comboBox

Free text with suggestions: type b and the list narrows to everything containing a “b”. Walk it with ↓ / ↑, take one with Enter, dismiss it with Esc — the field keeps what you typed. The chevron opens the full list, which is the way back when nothing matches. Try zurich: it finds Zürich, because matching folds accents as well as case.

Prefix matching, labels and a strict value: this one is data-combobox-match="start", so de finds Deutschland but land finds nothing. Each option carries a label, shown beside the value and searched along with it. data-combobox-strict makes anything that is not on the list a constraint violation — press Submit with Norwegen in the field and you get told so, because the verdict goes through setCustomValidity() and not through anything this component draws. Type schweiz in lower case and leave the field: it is snapped to Schweiz, so what you receive is what your list says.

The form carries formValidation, which is the partner this lane needs: without it the verdict is only the browser's transient bubble, with nothing in the DOM tied to the field. With it, the same text lands inline, linked by aria-describedby, listed in the error summary and marked with aria-invalid — the module still draws nothing itself. Note data-fv-item on the c-comboBox root rather than the field row: the row is the popup's positioning context.

No chevron, and one list for two fields: the toggle is optional — leave the button out and the arrow keys and a click in the field are the way in. Both fields below point at the same <datalist>, which sits outside them in the page: a datalist is a data source, not a part of the widget, so nothing has to be duplicated.

A list that arrives later: this field starts with three options. Press the button to write six more into its <datalist> — the module is watching the element, so the new entries are searchable immediately and no re-init is needed. That is what makes a server-filled or fragment-loaded list work.

Add six more options