Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Select

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.

Select input example

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

Disabled state

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

Underline select

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

Select with dropdown

Sizes

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

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

MultiSelect

Basic example

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

Placeholder

placeholder text

Pre-select values

United States
France

Keyboard Usage

Some keyboard interaction was implemented. Use / to highlight an item, then press Enter or SpaceBar to toggle the highlighted item. Press Esc to close the selection pop-up.

Customization

To customize the look and feel use the `slot` to insert inner [`Badge`](/docs/components/badge) component. Remember to connect the `clear` slot's prop to trigger option removal.