Skip to main content Skip to navigation Skip to search

Datalist is a type of list that becomes contextualized through the selection of extensive pre-defined options. Datalists can contain a custom input value.


Use a datalist when the user needs to choose from a list of items that are long enough for it to be filtered before selection. Or, there are pre-defined options but the user needs the ability to input a custom value for their use case.

Use a datalist to provide a standard set of options but also allow the user to enter a custom value that may not be pre-defined.

Do not confuse a datalist element with the select input. Datalist elements usually have more than 13 options that the user will need to filter or narrow down before making a choice. If there are 3-13 options, consider using the select input.

Helper message

Use a datalist:

  • When the user needs to choose from a long list of items to be filtered before selection
  • When there are pre-defined options but the user needs the ability to input a custom value
  • With more than 13 options
Helper message

Use a select:

  • When a custom input value is not allowed
  • With 3-13 options


Helper message


Use when interactive.

Helper message


Use when selected by a user with an input method, such as mouse or keyboard.

Diasabled message


Use when not interactive. For example, when a user does not have permission to change specific settings.

Invalid character


Use to communicate a user or system error. This validation can happen when the user moves away from the datalist or after attempting to submit a form. For example, to remind the user of a missing selection.

Changes saved


Use to provide real-time feedback immediately after a user’s input.


Datalists are available in vertical, horizontal, and compact layout. See more layout guidelines on the form page.


message text


message text


message text


Datalist support the use of autocomplete.


Datalist natively supports autocomplete behavior. Users can search and filter while using the datalist component.