The Select component is most useful for gathering information provided by the user from a list of options. Basic select component allows you to choose from a number of options.
Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Add multiple attribute to the select element to activate multiple mode.
Select with label
You can add select label by adding
data-te-select-label-ref attribute to the label element. Select
and label should be wrapped in a container.
Select with placeholder
data-te-select-placeholder attribute to set placeholder for
select input. The placeholder will be displayed when input is focused and no
option is selected.
Change the size of select input by changing the value of
disabled attribute to the select element to disable select
disabled attribute on option element to disable specific
data-te-select-clear-button option to true to display the
button that will allow to clear current selections.
A custom content container with a class
data-te-select-custom-content-ref will be displayed at the end
of the select dropdown.
data-te-select-visible-options option to change the number
of options that will be displayed in the select dropdown without scrolling.
data-te-select-secondary-text data attribute to the
specific options to display secondary text.
data-te-select-filter option to
true to enable
Select with search inside a modal
Due to a focus trap in modals, it is not possible to focus the outer
elements (like select dropdown). You can use select
data-te-select-container option to resolve this problem.
data-te-select-container accepts selector of the element
inside of wich select dropdown will be rendered. In this case, the selector
should point to the modal container (the element with attribute
data-te-modal-init). It is important to use a unique selector
to assign select to a specific modal.
It is possible to group options by using
Select with icons
data-te-select-icon data attribute to the specific options
to display the option icon.
setValue method allows to programatically set the component
Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.
Add array of string values to the arguments list to correctly select option with corresponding value in multi selection mode.
Select with toggle element
If you want to toggle Select via button, you have to add
data-te-select-toggle attribute to this button with ID of the
autoSelect option to
data-te-select-auto-select to enable selecting on Tab press.
Hidden selected option
Add the first option with the hidden and selected attributes and an empty value to leave select with no selection.
Select with CSS classes
In order to use select with additional CSS classes you need to place it in
div wrapper and use CSS classes on that div.
If you are looking for more advanced options, try Bootstrap Select from MDBootstrap.