datalist

Provides autocomplete suggestions for input elements. The datalist creates a native dropdown of options that users can select from while still allowing free-form text entry.

When to Use

  • Providing suggestions while allowing custom values (e.g., country input)
  • Autocomplete functionality without JavaScript
  • Search inputs with common suggestions
  • When users might enter values not in the predefined list

Use select instead when users must choose from a fixed set of options.

Basic Usage

Connect an input to a datalist using the list attribute on the input and an id on the datalist.

Code

<label for="browser">Browser</label> <input type="text" id="browser" list="browsers" placeholder="Start typing..." /> <datalist id="browsers"> <option value="Chrome"></option> <option value="Firefox"></option> <option value="Safari"></option> <option value="Edge"></option> <option value="Opera"></option> </datalist>

Input Variants

Default (with dropdown arrow)

Inputs with a list attribute display a dropdown arrow to indicate suggestions are available.

.no-arrow

Hide the dropdown indicator for a cleaner text input appearance.

.search

Search-style input with a magnifying glass icon on the left.

Code

<!-- No dropdown arrow --> <input type="text" list="options" class="no-arrow" /> <!-- Search style with icon --> <input type="search" list="options" class="search" />

Options with Labels

Options can include a label that is displayed alongside the value. The value is what gets submitted, while the label provides additional context.

Code

<datalist id="airports"> <option value="JFK" label="John F. Kennedy International"></option> <option value="LAX" label="Los Angeles International"></option> <option value="ORD" label="Chicago O'Hare"></option> </datalist>

With Different Input Types

Datalist works with various input types beyond text.

Email Input

URL Input

Number Input (Range)

Using with form-field

For enhanced accessibility and validation, wrap datalist inputs in the form-field custom element.

Start typing to see suggestions

Code

<form-field> <label for="country">Country</label> <input type="text" id="country" name="country" list="countries" required autocomplete="country-name" aria-describedby="country-msg" /> <datalist id="countries"> <option value="United States"></option> <option value="Canada"></option> <!-- more options --> </datalist> <output id="country-msg" for="country" aria-live="polite"> Start typing to see suggestions </output> </form-field>

Accessibility Notes

  • Always include a label: The input must have an associated label
  • Screen reader support: Native datalist is well-supported by assistive technologies
  • Keyboard navigation: Users can navigate options with arrow keys
  • Allow custom values: Unlike select, datalist allows users to enter values not in the list
  • Provide fallback: The input works without the datalist in older browsers

CSS Reference

/* Input with datalist indicator */ input[list] { background-image: url("data:image/svg+xml,..."); /* dropdown arrow */ background-repeat: no-repeat; background-position: right var(--size-s) center; padding-inline-end: var(--size-xl); } /* Hide the dropdown arrow */ input[list].no-arrow { background-image: none; padding-inline-end: var(--size-s); } /* Search-style datalist input */ input[list].search { background-image: url("data:image/svg+xml,..."); /* search icon */ background-position: left var(--size-s) center; padding-inline-start: var(--size-xl); padding-inline-end: var(--size-s); } /* The datalist element itself is hidden */ datalist { display: none; }

Browser Support Notes

  • Datalist is supported in all modern browsers
  • Visual appearance varies between browsers (cannot be fully styled)
  • The dropdown behavior is controlled by the browser
  • On mobile devices, the suggestions may appear in a different format

Related Elements

  • input - The input element that uses datalist
  • option - Defines individual suggestions
  • select - For fixed option lists (no custom values)
  • label - Associates text with the input
  • form-field - Enhanced form field wrapper