The <datalist> Element
As defined in the HTML Living Standard, the <datalist> element contains a set of <option> elements that represent the permissible or recommended options available for a particular control.
Try typing "A" or "H" in the field below:
<label for="search">Topic:</label>
<input list="topics" id="search" name="search">
<datalist id="topics">
<option value="Accessibility">
<option value="HTML5">
<option value="CSS">
</datalist>
View HTML Living Standard: The datalist element
Key Differences: Datalist vs. Select
While they look similar, their functional and accessibility impact differs:
- Flexibility: Unlike
<select>, which forces a choice from a list,<datalist>allows the user to type a custom value that isn't in the list. - Native UI: Browsers provide a specialized "autocomplete" interface for datalist, often including filtering as the user types.
- The
listAttribute: To connect an<input>to a<datalist>, the input'slistattribute must match the datalist'sid.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The <datalist> provides a clear programmatic link between a field and its suggestions. This is particularly helpful for users with cognitive disabilities (as it reduces memory load) and users with motor impairments (as it reduces the amount of typing required).
Technical Constraints
- Hidden by Default: The
<datalist>element is not rendered by itself; it only appears when associated with an input. - Option Content: While
<option>elements inside a datalist can have text content (e.g.,<option value="1">One</option>), most browsers prioritize thevalueattribute for the autocomplete behavior.
A11y Tip: Labeling
Always ensure the <input> has a clear, visible label. Screen readers will announce that autocomplete is available, but the user still needs to know the purpose of the input itself to satisfy WCAG SC 3.3.2 (Labels or Instructions).