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.

Select an option

Disabled state

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

Disabled select

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.

Small select Default select Large select

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

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.