About this set
Single-choice selects you can type into, for lists too long to scroll. Time zone with a toggle button lists seventeen zones with their IANA names and UTC offsets; typing a city, a region or an offset such as +05 narrows the list, and the chevron button opens the full list with the current zone highlighted. Airport search with codes and a clear button puts a plane icon in the field, shows three-letter codes as badges beside each airport, highlights the typed letters and offers a clear button once there is text. Both follow the WAI-ARIA editable combobox with list autocomplete: typing filters, Down and Up move through the matches and wrap round, Alt+Down opens without moving, Enter picks, and Escape closes the list or clears the field. The option’s name stays in the field while its id, such as Europe/Riga or LIS, goes into a hidden input, so the form submits a stable value rather than display text. A polite status line reports how many results match.
What’s included
- Filter as you type with the match highlighted
- Toggle button that opens the full list
- Clear button that appears with text
- WAI-ARIA editable combobox with list autocomplete
- Hidden input submits the option id, not the label
- Result count announced in a status line
Accessibility
The input is a role="combobox" with aria-autocomplete="list", aria-expanded, aria-controls and aria-activedescendant, labelled by a real label element; the highlighted option carries aria-selected as the pattern specifies. The toggle button is named and kept out of the tab order as in the APG example, the clear button is named and reachable with Tab, and a role="status" line announces the number of results. Focus shows a ring on the field.
Customise it
Change --cb-accent, --cb-mark, --cb-tint and --cb-line on .cb; in Tailwind edit the --color-cb-* theme colours. Put your own options in the listbox with data-value for the submitted id and a data-label span for the text that is matched and shown.
