Combobox

molecules

Searchable select with type-ahead. Combines input with dropdown list.

ARIA Role: combobox

Demo

Demo for Combobox (molecules)

Searchable select with type-ahead. Combines input with dropdown list.

Props

Prop	Type	Required	Default	Description
`options`	`Option[]`	Yes	`—`	Selectable options
`value`	`string`	No	`—`	Selected value
`onChange`	`(value: string) => void`	Yes	`—`	Value change handler
`placeholder`	`string`	No	`—`	Input placeholder
`disabled`	`boolean`	No	`false`	Disabled state
`allowCustom`	`boolean`	No	`false`	Allow custom values

TypeScript Interface

interface ComboboxProps {
  options: Option[];
  value?: string;
  onChange: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  allowCustom?: boolean;
}

Assertions (NASA Rule 5)

[aria]role='combobox' on input, aria-expanded, aria-controls(WAI-ARIA APG)
[aria]Listbox must have role='listbox' with children role='option'(WAI-ARIA APG)
[keyboard]Arrow keys navigate, Enter selects, Escape closes(WCAG 2.1.1)
[aria]aria-activedescendant tracks focus within listbox(WCAG 4.1.2)

Usage

Import

import { Combobox } from '@epasslive/design-system'

Basic

<Combobox />

With Variants

<Combobox variant="primary" size="md" />