Offer suggestions with datalist

A task label is usually Design, Content, Development, or Review, but sometimes a new label fits better. 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>

Type De and the browser offers Development. Type Launch prep and submit anyway. Both should stay valid in this design.

Use select when the value must come from a closed set. Use datalist when suggestions save typing but free text remains valid. Pick from the data contract up front so later code does not treat 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. Test your supported browsers and assistive tech.

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 typed value when the suggestions change.

Try this in the task editor: type De and pick Development, then enter a new label that is not listed. Repeat without a pointer in every browser you support. The suggestion UI can differ while the text field must stay usable. If the product rule changes to a closed set, replace the control with select. If the input is unexpectedly constrained, look for custom validation that confuses suggestions with allowed values.