Forms

Combobox

An editable input paired with a filterable listbox.

stableEnhancer: enhanceComboboxBuilt on <input> + <ul role="listbox">hydrateless/combobox.css

An editable input paired with a filterable listbox, following the WAI-ARIA combobox pattern. The enhancer adds type-to-filter, keyboard navigation, aria-activedescendant wiring, and selection.

Combobox

Type to filter, use ↑/↓ to move, and Enter to select.

Live

• Apple
• Banana
• Cherry
• Grape

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceCombobox } from '@hydrateless/enhancers/combobox';

const handle = enhanceCombobox(container, { filter, autoHighlight, defaultValue, onValueChange });
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
onValueChange	(value: string) => void	—	Fires when a selection is committed.
defaultValue	string	—	Initially selected option value.

Events and callbacks

Event / Callback	Payload	Description
hl:select	{ value: string; option: HTMLElement }	Cancelable CustomEvent on selection; call `preventDefault()` to keep the input unchanged.
hl:change	{ value: string }	Fires after the value commits.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Listbox background.
--hl-border	Listbox and input border.
--hl-primary	Active option highlight.

Accessibility

• The input becomes role="combobox" with aria-expanded, aria-controls, and aria-activedescendant.
• The active option is tracked with aria-selected; Esc or an outside click closes the list.

Related

SelectA native select with a CSS-drawn caret.Command PaletteA filterable list of commands with keyboard navigation.Dropdown MenuA button-triggered menu following the WAI-ARIA menu pattern.