Source: https://tailwindcss.com/plus/ui-blocks/documentation/select

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Getting started

  • Getting set up

  • Using HTML

  • Using React

  • Using Vue

  • Assets

• Elements

  • Introduction

  • Autocomplete

  • Command palette

  • Dialog

  • Disclosure

  • Dropdown menu

  • Popover

  • Select

  • Tabs

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.

Get the free course

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 .