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.
Autocomplete
A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.
The <el-autocomplete> component is a text input that allows users to enter arbitrary values or select from a list of filtered suggestions. It behaves like a native<datalist>, but offers greater control over styling.
Component API
<el-autocomplete>
The main autocomplete component that manages form integration, filtering, and coordinates with its child components
| CSS variables (Read-only) | |
--input-width | Provides the width of the input element. |
--button-width | Provides the width of the button element. |
<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 autocomplete.
| 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. |
<button>
A button that toggles the options dropdown when clicked.
| ARIA attributes (Read-only) | |
aria-expanded | Set to "true" when the options dropdown is open, "false" when closed. |
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.