Autocomplete

A commercial license is required to use Tailwind Plus Elements.

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 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 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.

<el-selectedcontent>

Automatically displays the content of the currently selected option.

Examples

Basic example

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

<el-autocomplete>
  <input name="user" />
  <button type="button">
    <svg><!-- ... --></svg>
  </button>

  <el-options popover>
    <el-option value="Wade Cooper">Wade Cooper</el-option>
    <el-option value="Tom Cooper">Tom Cooper</el-option>
    <el-option value="Jane doe">Jane Doe</el-option>
  </el-options>
</el-autocomplete>

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

<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 input 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 <input> width, use the --input-width CSS variable that's exposed on the <el-options> element:

<el-options popover class="w-(--input-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 <input>:

<el-autocomplete>
  <input name="user" disabled />

  <!-- ... -->
</el-autocomplete>

Getting started

Elements