opinion
Combobox
Search, pick, done.
Assign a teammateType to filter, arrows to move
Assignee
DesignOps
Pick someone to own this.
In context
New taskThe same picker, closed, inside a form
New task
ResearchDue Fri 30 Oct
Props
| Prop | Type | Required | Default |
|---|---|---|---|
multiple | boolean | undefined | No | — |
value | string | undefined | No | — |
defaultValue | string | undefined | No | — |
onValueChange | ((value: string) => void) | undefined | No | — |
options | ComboboxOption[] | Yes | — |
placeholder | string | undefined | No | — |
aria-label | string | undefined | No | — |
disabled | boolean | undefined | No | — |
className | string | undefined | No | — |
invalid | boolean | undefined | No | — |
values | string[] | undefined | No | — |
defaultValues | string[] | undefined | No | — |
onValuesChange | ((values: string[]) => void) | undefined | No | — |
Accessibility
A real WAI-ARIA combobox: role="combobox" with aria-expanded and aria-controls, a role="listbox" popup, and aria-activedescendant tracking the arrow-key-highlighted option. Type to filter, arrows to move, Enter to pick, Escape to close.
data-rebar-* attributes
data-rebar-component="combobox"; data-rebar-part="list" on the option popup.
Migrating to Ant Design
A close, low-risk rename: AntD's AutoComplete takes the same options and filtering shape.