Form Elements
Combobox
Combo Box combines a text input with a dropdown overlay, enabling both selection from a list and direct text input.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features14 checks
- Minimum 44x44px touch target size for interactive elements (WCAG 2.5.5)
- role="combobox" on input for proper assistive technology support
- aria-expanded attribute to announce dropdown state
- aria-autocomplete="list" to indicate autocomplete behavior
- aria-controls to link input with listbox
- aria-activedescendant for announcing highlighted option
- role="listbox" and role="option" for proper list semantics
- aria-selected to indicate selected options
- Keyboard navigation with Arrow keys, Enter, Escape, and Tab (WCAG 2.1.1)
- Focus ring with 2px width and offset for keyboard navigation (WCAG 2.4.7)
- Color contrast ratios meet or exceed 4.5:1 for text (WCAG 1.4.3)
- Screen reader announcements for loading, selected, and no results states
- Icons properly hidden from screen readers with aria-hidden
- Clear button with descriptive aria-label
When to use this component
✓Do's
- •Large option lists that need filtering
- •Search with suggestions
- •Address or location lookup
- •When users know part of the value
✗Don'ts
- •For small option lists (under 10 items), use a Select
- •For unrestricted text input, use an Input
- •For selecting multiple options, use a Checkbox Group
Do's and Don'ts
✓ Do's
Delhi
Delhi
Dehradun
Use autocomplete for large option lists (10+) that need filtering.
✗ Don'ts
Don't use autocomplete for fewer than 10 options, use Select instead.