What is the Datalist Element?

Autocomplete suggestions for inputs.

What You'll Learn

Using the datalist element
Connecting to inputs
Custom vs predefined values

The Datalist Element

The <datalist> element provides autocomplete suggestions for an <input>. Users see matching options as they type, but can still enter custom values.

Key Difference from Select

Element	Behavior
`<select>`	Must choose from options
`<datalist>`	Suggests options, allows custom input

Example

index.htmlHTML

<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

How to Connect

Give <datalist> an id
Reference it in input's list attribute

Use Cases

Searchable inputs
Predefined + custom values
Dynamic suggestions

What are BDI and BDO Elements?

What is Optgroup in Select?