Select

Basic usage

Apple
Banana
Orange
Peach
Apple
Banana
Orange
Peach 
<script>
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<CSelect bind:value={selectedValue} {options} placeholder="Normal select" />
<CSelect bind:value={selectedValue} {options} disabled placeholder="Disabled select" />
<script>
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<CSelect bind:value={selectedValue} {options} placeholder="Normal select" />
<CSelect bind:value={selectedValue} {options} disabled placeholder="Disabled select" />
svelte
Click fold/expand code

Clearable

Selected value:

Apple
Banana
Orange
Peach 
<script lang="ts">
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<p>
  <b> Selected value: </b>
  {selectedValue}
</p>

<CSelect
  clearable
  placeholder="Clearable"
  bind:value={selectedValue}
  {options}
/>
<script lang="ts">
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<p>
  <b> Selected value: </b>
  {selectedValue}
</p>

<CSelect
  clearable
  placeholder="Clearable"
  bind:value={selectedValue}
  {options}
/>
svelte
Click fold/expand code

Shape

Apple
Banana
Orange
Peach
Apple
Banana
Orange
Peach 
<script lang="ts">
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<CSelect bind:value={selectedValue} {options} placeholder="Normal select" />
<CSelect bind:value={selectedValue} {options} placeholder="Rounded select" rounded />
<script lang="ts">
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<CSelect bind:value={selectedValue} {options} placeholder="Normal select" />
<CSelect bind:value={selectedValue} {options} placeholder="Rounded select" rounded />
svelte
Click fold/expand code

Sizes

Selected value:

Apple
Banana
Orange
Peach
Apple
Banana
Orange
Peach
Apple
Banana
Orange
Peach
Apple
Banana
Orange
Peach
Apple
Banana
Orange
Peach 
<script lang="ts">
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<p>
  <b> Selected value: </b>
  {selectedValue}
</p>
<div class="c-flex c-gutter-md c-wrap c-items-center">
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="xs" size="xs" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="sm" size="sm" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="md (default)" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="lg" size="lg" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="xl" size="xl" />
  </div>
</div>
<script lang="ts">
  let selectedValue = ''
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<p>
  <b> Selected value: </b>
  {selectedValue}
</p>
<div class="c-flex c-gutter-md c-wrap c-items-center">
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="xs" size="xs" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="sm" size="sm" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="md (default)" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="lg" size="lg" />
  </div>
  <div>
    <CSelect bind:value={selectedValue} {options} placeholder="xl" size="xl" />
  </div>
</div>
svelte
Click fold/expand code

Multiple

Selected values:

Select something
Apple
Banana
Orange
Peach 
<script lang="ts">
  let selectedValue: any[] = []
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<p>
  <b> Selected values: </b>
  {selectedValue}
</p>

<CSelect
  multiple
  placeholder="Select something"
  bind:value={selectedValue}
  {options}
/>
<script lang="ts">
  let selectedValue: any[] = []
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]
</script>

<p>
  <b> Selected values: </b>
  {selectedValue}
</p>

<CSelect
  multiple
  placeholder="Select something"
  bind:value={selectedValue}
  {options}
/>
svelte
Click fold/expand code

CSelect Props

  • placeholder
    string
    default:

    The placeholder text. Same as CInput

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of select. Notice that default value is 'md' instead of undefined

  • value
    number | string | Array<string | number>
    default:

    The selected value(s).

  • options
    { label: string; value: string | number; [key: string]: any }[]
    default: undefined

    The select options

  • multiple
    boolean
    default: false

    Determine the select can select muliple choices

  • clearable
    boolean
    default: false

    Determine whether the select has a clear icon when selected selection is not empty

  • disabled
    boolean
    default: false

    Determine whether the select is diabled or not.

  • rounded
    boolean
    default: false

    Determine whether the select has a rounded border or not.

  • validateOnFold
    boolean
    default: true

    Determine whether validate current form item on dropdown fold.

CSelect Events

No data

CSelect Slots

No data

CSelect Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55