Select

A commercial license is required to use Tailwind Plus Elements.

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 either`absolute` (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

Use the <el-select>, <el-options> and <el-selectedcontent> components, along with a native <button>, to build a select input:

<el-select name="status" value="active">
  <button type="button">
    <el-selectedcontent>Active</el-selectedcontent>
  </button>
  <el-options popover>
    <el-option value="active">Active</el-option>
    <el-option value="inactive">Inactive</el-option>
    <el-option value="archived">Archived</el-option>
  </el-options>
</el-select>

Add the anchor prop to the <el-options> to automatically position the dropdown relative to the <button>:

<el-options popover anchor="bottom start">
  <!-- ... -->
</el-options>

Use the values top, right, bottom, or left to center the dropdown along the appropriate edge, or combine it with start or end to align the dropdown to a specific corner, such as top start or bottom end.

To control the gap between the button and the dropdown, use the --anchor-gap CSS variable:

<el-options popover anchor="bottom start" class="[--anchor-gap:4px]">
  <!-- ... -->
</el-options>

Additionally, you can use --anchor-offset to control the distance that the dropdown should be nudged from its original position.

The <el-options> has no width set by default, but you can add one using CSS:

<el-options popover class="w-52">
  <!-- ... -->
</el-options>

If you'd like the dropdown width to match the <button> width, use the --button-width CSS variable that's exposed on the <el-options> element:

<el-options popover class="w-(--button-width)">
  <!-- ... -->
</el-options>

Adding transitions

To animate the opening and closing of the dropdown, target the data-closed, data-enter, data-leave, and data-transition attributes with CSS to style the different stages of the transition:

<el-options popover class="transition transition-discrete data-closed:opacity-0 data-enter:duration-75 data-enter:ease-out data-leave:duration-100 data-leave:ease-in">
  <!-- ... -->
</el-options>

Disabling the input

To disable the input, add the disabled attribute to the <button>:

<el-select name="status" value="active">
  <button type="button" disabled>
    <el-selectedcontent>Active</el-selectedcontent>
  </button>

  <!-- ... -->
</el-select>

Getting started

Elements