<datalist>
A list of suggestions for a text field: pick an option or type your own.
Syntax
<input list="ids">
<datalist id="ids"><option value="…"></datalist>Attributes
| Parameter | Type | Description |
|---|---|---|
| id | text | The list name; a field connects to it with the `list` attribute. |
Examples
A field with suggestions:
<label for="city">City</label>
<input id="city" list="cities" placeholder="Start typing">
<datalist id="cities">
<option value="Berlin">
<option value="London">
<option value="Paris">
</datalist>Notes
Unlike <select>, the user is not limited to the listed options. The browser draws the suggestions, and they cannot be styled with CSS.
See also
- <input> — An input field; its kind is set by the `type` attribute.
- <select> — A drop-down list of options.
- <option>, <optgroup> — An item of a `<select>` or `<datalist>`; `<optgroup>` puts items into groups.
Related recipes
In the tutorial
- Select lists and multi-line text — The select dropdown and option, optgroup groups, choosing several options, textarea and datalist suggestions.