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.
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
Use a select:
- When a custom input value is not allowed
- With 3-13 options
Datalists are available in vertical, horizontal, and compact layout. See more layout guidelines on the form page.
Datalist support the use of autocomplete.
Datalist natively supports autocomplete behavior. Users can search and filter while using the datalist component.