Svelte Select - Flowbite

Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants

The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.

Setup #

Svelte
<script>
  import { Select } from 'flowbite-svelte';
</script>

Select input example #

Get started with the default example of a select input component to get a single option selection.

 Select an option
  
Svelte
<script>
  import { Select, Label } from 'flowbite-svelte';
  let selected;
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' }
  ];
</script>

<Label>
  Select an option
  <Select class="mt-2" items={countries} bind:value={selected} />
</Label>

Disabled state #

Apply the disable state to the select component to disallow the selection of new options.

 Disabled select   
Svelte
<script>
  import { Select, Label } from 'flowbite-svelte';
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' }
  ];
</script>

<Label for="select-disabled" class="mb-2">Disabled select</Label>
<Select id="select-disabled" disabled items={countries} placeholder="You can't select anything..." />

Underline select #

Use the underline style for the select component as an alternative appearance.

 Underline select   
Svelte
<script>
  import { Select, Label } from 'flowbite-svelte';
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' }
  ];
</script>

<Label for="select-underline" class="sr-only">Underline select</Label>
<Select id="select-underline" underline class="mt-2" items={countries} />

Select with dropdown #

Use this example if you want to create a multi-level dropdown and select component combination.

Svelte
<script>
  import { Select, Dropdown, DropdownItem } from 'flowbite-svelte';
  import { ChevronDownOutline } from 'flowbite-svelte-icons';
  import Usa from '../../utils/icons/Usa.svelte';
  import Germany from '../../utils/icons/Germany.svelte';
  import Italy from '../../utils/icons/Italy.svelte';
  import China from '../../utils/icons/China.svelte';
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' }
  ];
  let states = [
    { value: 'CA', name: 'California' },
    { value: 'TX', name: 'Texas' },
    { value: 'WH', name: 'Washinghton' },
    { value: 'FL', name: 'Florida' },
    { value: 'VG', name: 'Virginia' },
    { value: 'GE', name: 'Georgia' },
    { value: 'MI', name: 'Michigan' }
  ];
</script>

<div class="flex">
  <button id="states-button" class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
    <Usa />
    USA
    <ChevronDownOutline class="w-3 h-3 ml-2" />
  </button>
  <Dropdown triggeredBy="#states-button">
    <DropdownItem class="flex items-center">
      <Usa />
      United States
    </DropdownItem>
    <DropdownItem class="flex items-center">
      <Germany />
      Germany
    </DropdownItem>
    <DropdownItem class="flex items-center">
      <Italy />
      Italy
    </DropdownItem>
    <DropdownItem class="flex items-center">
      <China />
      China
    </DropdownItem>
  </Dropdown>
  <Select items={states} placeholder="Choose the state" class="!rounded-l-none" />
</div>

Sizes #

Get started with the small, default, and large sizes for the select component from the example below.

Small select Default select Large select

Svelte

<script>
  import { Select, Label } from 'flowbite-svelte';
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' }
  ];
</script>

<Label for="select-sm" class="mb-2">Small select</Label>
<Select id="select-sm" size="sm" items={countries} class="mb-6" />
<Label for="select-md" class="mb-2">Default select</Label>
<Select id="select-md" size="md" items={countries} class="mb-6" />
<Label for="select-lg" class="mb-2">Large select</Label>
<Select id="select-lg" size="lg" items={countries} class="mb-6" />
<p class="my-6" />
<Label for="select-sm" class="sr-only">Underline small select</Label>
<Select id="select-sm" underline size="sm" items={countries} class="mb-6" />
<Label for="select-md" class="sr-only">Underline default select</Label>
<Select id="select-md" underline size="md" items={countries} class="mb-6" />
<Label for="select-lg" class="sr-only">Underline large select</Label>
<Select id="select-lg" underline size="lg" items={countries} class="mb-6" />

Custom options #

If you want custom options, put them directly inside the component and leave the items prop unset. Furthermore, if the default placeholder is not what you want, set the placeholder prop to "".

 Select an option   
Svelte
<script>
  import { Select, Label } from 'flowbite-svelte';
  let selected;
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' }
  ];
</script>

<Label for="countries">Select an option</Label>
<Select id="countries" class="mt-2" bind:value={selected} placeholder="">
  <option selected value="all">All</option>

  {#each countries as { value, name }}
    <option {value}>{name}</option>
  {/each}
</Select>

MultiSelect #

Svelte
<script>
  import { MultiSelect } from 'flowbite-svelte';
</script>

Basic example #

Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.

Svelte
<script>
  import { MultiSelect } from 'flowbite-svelte';

  let selected = [];
  let countries = [
    { value: 'us', name: 'United States' },
    { value: 'ca', name: 'Canada' },
    { value: 'fr', name: 'France' },
    { value: 'jp', name: 'Japan' },
    { value: 'en', name: 'England' }
  ];
</script>

<MultiSelect items={countries} bind:value={selected} size="lg" />

Pre-select values #

Svelte
<script>
  import { MultiSelect, Badge } from 'flowbite-svelte';

  let countries = [
    { value: 'us', name: 'United States', color: 'indigo' },
    { value: 'ca', name: 'Canada', color: 'green' },
    { value: 'fr', name: 'France', color: 'blue' },
    { value: 'jp', name: 'Japan', color: 'red' },
    { value: 'en', name: 'England', color: 'yellow' }
  ];
  let selected = ['us', 'fr'];
</script>

<MultiSelect items={countries} bind:value={selected} />

Customization #

To customize the look and feel use the slot to insert inner Badge component.

Remember to connect the clear slot’s prop to trigger option removal.

Svelte
<script>
  import { MultiSelect, Badge } from 'flowbite-svelte';

  let selected = [];
  let countries = [
    { value: 'us', name: 'United States', color: 'indigo' },
    { value: 'ca', name: 'Canada', color: 'green' },
    { value: 'fr', name: 'France', color: 'blue' },
    { value: 'jp', name: 'Japan', color: 'red' },
    { value: 'en', name: 'England', color: 'yellow' }
  ];
</script>

<MultiSelect items={countries} bind:value={selected} let:item let:clear>
  <Badge color={item.color} dismissable params={{ duration: 100 }} on:dismiss={clear}>
    {item.name}
  </Badge>
</MultiSelect>

Props #

The component has the following props, type, and default values. See types page for type information.

Use the class prop to overwrite the select tag.

Name	Type	Default
items	SelectOptionType[]	[]
value	any	undefined
placeholder	string	'Choose option ...'
underline	boolean	false
size	'sm' \| 'md' \| 'lg'	'md'
defaultClass	string	'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500'
underlineClass	string	'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'

Forwarded Events #

on:change

on:input

References #

Flowbite Select

Search Input

Textarea