HTML datalist playground

Explore datalist as a collection of suggested values for an input. Change the control type, configure attributes, and compare native menus, range ticks, and pickers without restricting the value to the available options.

Presets

Choose a configuration as a starting point, then adjust any control.

Content

Accessible label

The label is associated with the input through for and id. datalist provides suggestions but does not replace the control accessible name.

Associated input

Input type

datalist works with several input types, but its exact UI and support vary by browser. It is not a select replacement: users can enter other valid values.

placeholder

placeholder is generated only for compatible input types such as text, search, email, url, tel, and number.

value

value sets the initial value. It should follow the format expected by the selected input type.

Require a value

required makes the input mandatory, but it does not require the value to match a datalist suggestion.

Disable browser autocomplete

autocomplete="off" helps separate datalist suggestions from browser history suggestions, although each browser decides its final behavior.

Input constraints

min

min applies to numeric, date and time, and range types. Use a value compatible with the selected type.

max

max applies to numeric, date and time, and range types. Use a value compatible with the selected type.

step

step defines the allowed increment for numeric, date and time, and range types.

Datalist options

Suggestions

Write one suggestion per line. Use value | label to add optional descriptive text.

input type="text"

Preferred technology

Type in the field or open its native suggestions. Values outside the list are still allowed.

Current value No value

Configured suggestions

HTMLMarkup language
CSSStyle sheets
JavaScriptProgramming language
TypeScriptTyped JavaScript

HTML

<label for="preferred-technology">Preferred technology</label>
<input
  type="text"
  id="preferred-technology"
  name="suggested-value"
  list="technology-suggestions"
  placeholder="Type or choose a technology"
  autocomplete="off"
/>

<datalist id="technology-suggestions">
  <option value="HTML" label="Markup language"></option>
  <option value="CSS" label="Style sheets"></option>
  <option value="JavaScript" label="Programming language"></option>
  <option value="TypeScript" label="Typed JavaScript"></option>
</datalist>