Offer suggestions with datalist

A task label may usually be Design, Content, Development, or Review, but occasionally a new label is appropriate. datalist attaches suggestions to an input without restricting the value to those options.

Connect the input’s list attribute to the datalist ID. The browser presents matching suggestions using its own platform UI. Unlike select, the user can still type another value, so validation must not assume every submitted string came from an option.

<label>Label
  <input name="label" list="task-labels" autocomplete="off">
</label>
<datalist id="task-labels">
  <option value="Design">
  <option value="Content">
  <option value="Development">
  <option value="Review">
</datalist>

Use select when the value must come from a closed set. Use datalist when suggestions save typing but free text remains valid. Choosing between them from the data contract prevents later code from treating an arbitrary value as a trusted category.

Datalist presentation and accessibility support vary more than basic text inputs and selects. Keep a visible label, do not put essential instructions only inside the suggestion UI, and test your supported browsers and assistive technology.

The options can be updated through normal DOM operations. If suggestions come from a server, debounce requests, handle failure as an ordinary text input, and do not erase a user’s typed value when the suggestions change.

Type “De” and select Development, then enter a new label that is not listed. Both should remain valid in this design. Try the same interaction without a pointer and in every browser you support; the suggestion presentation can differ while the text field must remain usable. Change the product rule to a closed set and replace the control with select. If the input is unexpectedly constrained, look for custom validation code that confuses suggestions with allowed values.