<datalist>

The <datalist> element represents a set of <option> elements that represent predefined options for other controls. In the browser's rendering, the <datalist> element alone represents nothing.

Browser Support for <datalist>

Note: The following information about browser support is from the MDN Web Docs HTML Elements Reference.

• Desktop
  • Chrome: 20 and later
  • Edge: All versions
  • Firefox: 4 and later
  • Internet Explorer: 10 and later
  • Opera: 9.5 and later
  • Safari: 12.1 and later
• Mobile
  • Android webview: Not supported
  • Chrome for Android: 33 and later
  • Firefox for Android: 4 and later
  • Opera for Android: Unknown
  • Safari on iOS: 12.2 and later
  • Samsung Internet: All versions

Default Browser Behavior

Content within a <datalist> element will not be be rendered by the browser, unless it is bound to an <input> element.

When a <datalist> element is bound to an <input> element, the browser will render a combobox that will be able to receive keyboard focus.

To operate the combobox, a user can:

• use the mouse to select among the options;
• use the Up Arrow and Down Arrow keys to navigate among the options; or
• enter text into it.

Usage Notes

To bind a <datalist> element with a <input> element, the <datalist> must have an id attribute whose value is identical to the list attribute of the <input> element.

Examples

Note: Use your browser's View Source function to view the source code of the following examples.

<datalist> element alone

Note: As mentioned previously, content within a <datalist> element will not be be rendered by the browser, unless it is bound to an <input> element.

<datalist> element bound to an <input> element