Skip to content
Holm Digital logotyp

Combobox

An autocomplete input that allows users to filter and select from a list of options. Implements the ARIA 1.2 Combobox pattern.

Comboboxes are complex interactive widgets. Our implementation follows the latest ARIA patterns to ensure a consistent experience across all screen readers.

Accessibility Features

  • ARIA 1.2 Pattern: Uses role="combobox", aria-autocomplete, and aria-expanded.
  • Live Announcements: Announces the number of results found as the user types.
  • Keyboard Navigation: Up/Down arrows, Home/End to jump to first/last, PageUp/PageDown to jump 10 options, Enter to select, Escape to close (with stopPropagation so it does not also close a parent dialog), and Tab to close and move on.

Usage Example

import { Combobox, ComboboxInput, ComboboxList, ComboboxItem } from '@holmdigital/components'; <Combobox> <ComboboxInput placeholder="Search framework..." /> <ComboboxList> <ComboboxItem value="next">Next.js</ComboboxItem> <ComboboxItem value="svelte">SvelteKit</ComboboxItem> <ComboboxItem value="astro">Astro</ComboboxItem> </ComboboxList> </Combobox>
Next →Introduction