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.

Usage

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
vs
Helper message

Use a select:

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

States

Helper message

Enabled

Use when interactive.

Helper message

Active

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

Diasabled message

Disabled

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

Invalid character

Error

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

Success

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

Layouts

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

Vertical

message text

Horizontal

message text

Compact

message text

Behavior

Datalist support the use of autocomplete.

Auto-complete

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