| layout | docs |
|---|---|
| title | Tailwind CSS Select - Flowbite |
| description | 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 |
| group | forms |
| toc | true |
| previous | Phone Input |
| previousLink | forms/phone-input/ |
| next | Textarea |
| nextLink | forms/textarea/ |
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.
{{< example github="forms/select.md" show_dark=true >}}
Select an option Choose a country United States Canada France Germany {{< /example >}}Multiple options
Apply the multiple attribute to the select component to allow users to select one or more options.
{{< example github="forms/select.md" show_dark=true >}}
Select an option Choose countries United States Canada France Germany {{< /example >}}Size attribute
Use the size attribute for the select component to specify the number of visible options in the list.
{{< example github="forms/select.md" show_dark=true >}}
Select an option 2016 2017 2018 2019 2020 2021 2022 {{< /example >}}Disabled state
Apply the disable state to the select component to disallow the selection of new options.
{{< example github="forms/select.md" show_dark=true >}}
Select an option Choose a country United States Canada France Germany {{< /example >}}Underline select
Use the underline style for the select component as an alternative appearance.
{{< example github="forms/select.md" show_dark=true >}}
Underline select Choose a country United States Canada France Germany {{< /example >}}{{< requires_js >}}
Select with dropdown
Use this example if you want to create a multi-level dropdown and select component combination.
{{< example github="forms/select.md" show_dark=true iframeHeight="340" >}}
USA
Choose a state Choose a state California Texas Washinghton Florida Virginia Georgia Michigan
Sizes
Get started with the small, default, and large sizes for the select component from the example below.
{{< example github="forms/select.md" show_dark=true >}}
Small select Choose a country United States Canada France Germany Default select Choose a country United States Canada France Germany Large select Choose a country United States Canada France Germany Extra Large select Choose a country United States Canada France Germany {{< /example >}}