5-day Mini-Course
Build UIs that don’t suck.
Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.
Select
A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.
The <el-select> component is a fully accessible replacement for a native <select> element, designed to give you complete control over styling.
Component API
<el-select>
Manages form integration and coordinates with its child components.
| Attributes | |
name | The form field name for the select when used in forms. |
value | The selected value of the select. Can be read and set programmatically. |
| Events | |
input | Dispatched when the selected option changes. |
change | Dispatched when the selected option changes. |
| CSS variables (Read-only) | |
--input-width | Provides the width of the input element (read-only). |
<el-options>
The options container that handles the popover behavior.
| Attributes | |
popover | Required to enable the popover behavior. |
anchor | Configures the way the options are anchored to the button. |
anchor-strategy | Sets the position CSS property of the popover to eitherabsolute (default) or fixed. |
| CSS variables | |
--anchor-gap | Sets the gap between the anchor and the popover. |
--anchor-offset | Sets the distance that the popover should be nudged from its original position. |
| Data attributes (Read-only) | |
data-closed | Present before transitioning in, and when transitioning out. |
data-enter | Present when transitioning in. |
data-leave | Present when transitioning out. |
data-transition | Present when transitioning in or out. |
| Methods | |
togglePopover() | Toggles the options visibility. |
showPopover() | Shows the options. |
hidePopover() | Hides the options. |
<el-option>
Individual selectable option within the select.
| Attributes | |
value | The value of the option (required for selection). |
disabled | Whether the option is disabled. |
| ARIA attributes (Read-only) | |
aria-selected | Present when the option is selected. |
<el-selectedcontent>
Automatically displays the content of the currently selected option.
Examples
Basic example
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Positioning the dropdown
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Setting the dropdown width
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Adding transitions
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Disabling the input
To view the complete documentation, you must own a Tailwind Plus license and be signed in.