primitive · combobox

Editable combobox

A progressively enhanced text input backed by a native datalist and an ARIA listbox popup.

Install with npx @madojs/ui@latest add combobox.

Primitive

Start with the native datalist, then enhance the same text field with a keyboard-complete listbox where Popover is available.

Reviewer

Suggestions are optional; an arbitrary reviewer name remains a valid submitted value. Use a native select for a closed set.

No reviewer has been assigned.

Composition

Author a direct input[list], datalist, hidden toggle and hidden popover listbox inside mado-ui-combobox, then attach madoUiCombobox().root.
Use this editable contract only when arbitrary text remains valid; closed choices stay a native select.

export madoUiCombobox(): Returns a root ref and optional selection/results callbacks for the authored relationship.
class mado-ui-combobox: Root containing the four required direct children.
attribute data-mado-ui-combobox-enhanced: Helper-owned marker present only while progressive enhancement is active.
attribute list / popovertarget / popover: Native relationships that define the datalist baseline and popup enhancement.
css-property --mado-ui-combobox-listbox-inline-size: Constrains the enhanced suggestion popup.

DOM focus remains on the editable native input; aria-activedescendant exposes the active generated option.
The helper owns listbox/option state only after the complete authored relationship validates.

Down and Up open and move through suggestions; Enter accepts the active option; Escape closes; Tab closes and continues normally.
Text-editing keys, IME composition and modified shortcuts remain browser-owned.

The toggle stays outside Tab order and pointer selection returns focus to the input.

Without Popover support or after malformed markup, input[list] and datalist remain the complete native fallback.

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.