<datalist> Element

Technical Summary

Definition / Categories

Item	Definition
Meaning	A set of predefined option elements for another control
Categories	Flow content; phrasing content
Context	Where phrasing content is expected
Content model	Phrasing content, or zero or more option and script-supporting elements
Tag omission	Neither the start tag nor the end tag may be omitted
DOM interface	HTMLDataListElement; its read-only options attribute returns an HTMLCollection

Association with input

A datalist becomes the suggestions source for an input when the input's list attribute references the datalist's ID. The input remains the control that holds and submits the value; the datalist is not a separate form control.

<label for="browser">Browser</label>
<input id="browser" name="browser" list="browser-options">

<datalist id="browser-options">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

This is an HTML ID reference. It does not mean that the datalist must be a child of the input, and it does not implicitly merge multiple suggestion sources.

The user agent draws this suggestion UI. Its opening behavior, filtering, labels, and keyboard interaction must not be treated as a fixed page-level UI contract.

Options that become suggestions

An option descendant of a datalist represents a suggestion when it is not disabled and its value is not the empty string. The suggestion has a value and a label; their presentation is part of the user agent's implementation.

Condition	Meaning	Review point
Descendant of datalist	It belongs to that suggestions source	Read it separately from a select option list
Not disabled	It can qualify as a suggestion	Disabled excludes the option from suggestions; it does not disable all input
Non-empty value	It has a suggestion value	Do not use an empty option as a separator or placeholder suggestion
label present or absent	It contributes label information	Rendering varies by user agent, so essential information must not exist only in the label

<datalist id="countries">
  <option value="Japan" label="日本"></option>
  <option value="United States" label="アメリカ合衆国"></option>
  <option value=""></option> <!-- not a suggestion -->
  <option value="Legacy" disabled></option> <!-- not a suggestion -->
</datalist>

Form submission and constraint validation

Choosing a suggestion puts its value into the associated input. A datalist does not create the selectedness model of a select, and it does not reject a string merely because that string is not in the suggestions.

If the input needs constraints such as required, pattern, or minlength, put them on the input. Showing a suggestion does not itself make an outside value fail constraint validation.

<label for="ticket">Ticket number</label>
<input id="ticket" name="ticket" list="tickets"
       pattern="T-[0-9]{4}" required>
<datalist id="tickets">
  <option value="T-1024"></option>
  <option value="T-2048"></option>
</datalist>

Content model and fallback

The simple form places option elements directly inside datalist. The specification also defines fallback content for user agents that do not implement datalist. When fallback is used, verify the boundary between content shown to older user agents and options recognized as suggestions by current user agents.

<datalist id="animals">
  <label>Or choose from a list:
    <select name="animal">
      <option value="Cat">Cat</option>
      <option value="Dog">Dog</option>
    </select>
  </label>
</datalist>

The fallback select is its own form control. If this pattern is adopted, check its hidden boundary in current user agents, submission in older user agents, and duplicate labeling.

DOM Interface

HTMLDataListElement exposes a read-only options collection of its option elements. On the input side, input.list can be used to inspect the resolved datalist.

const input = document.querySelector('#browser');
const list = document.querySelector('#browser-options');

input.list === list;       // the associated datalist
list.options.length;       // number of options
list.options[0].value;     // first suggestion value

API	Summary
HTMLDataListElement.options	An HTMLCollection rooted at the datalist and filtered to option elements
HTMLInputElement.list	The HTMLDataListElement resolved from list, or null
HTMLOptionElement.value	The candidate value; an empty string does not meet the suggestion condition
HTMLOptionElement.disabled	The option's own disabled attribute; disabled options are excluded from suggestions

Fact / Evidence

Specification definitions, suggestion conditions, form boundaries, and DOM APIs are recorded as claims with scope and source locations. Browser suggestion UI and accessibility-tree observations are separated into Implementation Evidence below.

Evidence

1. HTML Standard: The datalist element — categories, content model, suggestions, rendering, fallback, and DOM interface
2. HTML Standard: The list attribute — association between an input and its suggestions source
3. HTML Standard: The option element — option value, label, disabled state, and datalist context
4. HTML Accessibility API Mappings — accessibility API boundary for inputs with a list attribute and a suggestions source
5. Web Platform Tests: HTML forms — starting point for identifying tests for datalist, input, and option

Implementation Evidence

Browser implementation, WPT, and accessibility observations are recorded separately from specification claims. This page does not yet have a complete datalist-specific measurement, so partial observations and unexecuted work remain distinct.

Partial observation from an existing fixture: fixture ID forms-core-v1 contains input[list] and an option inside a datalist. The existing record confirms the datalist option's label, value, text, and form owner, plus the idle AX-tree exposure of an input with a datalist, in Chrome 152.0.0.0 / Windows 10 / 2026-09-15. Popup expansion, HTMLDataListElement.options, and input-type-specific suggestion UI remain unverified for this page.

Suggestion popup presentation, label display, input-type support, and AX-tree exposure may depend on the user agent, OS, and interaction state. A single-environment partial observation is not registered as a cross-browser result.

Coverage / Open Issues

• ReviewedMeaning, categories, context, content model, tag omission, and DOM interface
• Reviewedlist-to-id association, disabled and empty-value suggestion conditions, and the input/datalist form boundary
• ReviewedWhy suggestions are not fixed choices or validation rules, and the specification position of fallback content
• OpenCross-browser popup opening, filtering, label display, keyboard behavior, and input-type differences
• OpenDedicated fixture measurements for HTMLDataListElement.options, dynamic option updates, selected values, and FormData
• OpenIndividual WPT results, expanded HTML-AAM state, assistive-technology observations, and fallback comparison in older user agents

This is initial coverage. It describes the specification scope; it does not claim identical suggestion UI, interaction, or accessibility API results across browsers, and it does not claim that outside values are automatically rejected.

Related surface

For beginner-friendly input suggestions, free-form input, and the list attribute, see Yugien's datalist element page. Input types and form validation are covered by Atlas on input; option values and labels by Atlas on option; and the fixed-choice model by Atlas on select.