Select

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

<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.

<script>
  import { Select} 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.

<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.

  <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.

<script>
import { Us, De, It, Cn } from 'svelte-flag-icons'
</script>

<div class="flex">
    <Dropdown>
      <button slot="trigger" id="states-button" data-dropdown-toggle="dropdown-states" 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">
        <Us size="18" class="mr-2"/>
        USA 
        <ChevronDown size="14" class="ml-2"/>
      </button>
      <DropdownItem class="flex items-center">
        <Us size="16" class="mr-2"/>
        United States
      </DropdownItem>
      <DropdownItem class="flex items-center">
        <De size="16" class="mr-2"/>
        Germany
      </DropdownItem>
      <DropdownItem class="flex items-center">
        <It size="16" class="mr-2"/>
        Italy
      </DropdownItem>
      <DropdownItem class="flex items-center">
        <Cn size="16" class="mr-2"/>
        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.

<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"></p>
<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"/>

Props

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

Forwarded Events

Related components

References