Basic example
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!
Multiselect
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
Use 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.
Size
Change the size of select input by changing the value of
data-te-select-size
attribute.
Disabled select
Add disabled
attribute to the select element to disable select
input.
Disabled options
Use disabled
attribute on option element to disable specific
option.
Clear button
Set data-te-select-clear-button
option to true to display the
button that will allow to clear current selections.
Custom content
A custom content container with a class
data-te-select-custom-content-ref
will be displayed at the end
of the select dropdown.
Visible options
Use data-te-select-visible-options
option to change the number
of options that will be displayed in the select dropdown without scrolling.
Secondary text
Add data-te-select-secondary-text
data attribute to the
specific options to display secondary text.
Search
Set data-te-select-filter
option to true
to enable
options filtering.
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.
The 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.
Option groups
It is possible to group options by using optgroup
element.
Select with icons
Add data-te-select-icon
data attribute to the specific options
to display the option icon.
Set value
The setValue
method allows to programatically set the component
selections.
Single selection
Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.
Multi selection
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
Select element.
Auto select
Set 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
the div
wrapper and use CSS classes on that div.