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.
- United States
- Germany
- Italy
- China
<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.
Name | Type | Default |
---|---|---|
items | SelectOptionType[] | [] |
value | string | number | |
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-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-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' |