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.

Datalist 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

Select Option One Option Two Option Three Helper message

Use a select:

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

States

Ice cream flavor Helper message

Enabled

Use when interactive.

Ice cream flavor Helper message

Active

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

Ice cream flavor Diasabled message

Disabled

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

Ice cream flavor 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.

Ice cream flavor 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

label message text

Horizontal

label message text

Compact

label 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.