Combobox combines a text input with a list of suggested values

Combobox wraps Reach UI's Combobox component with default styling and accepts all the same props. See the Reach UI docs for details.

Arbitrary components can be nested inside the Combobox.Popover to allow for more advanced usecases, e.g. adding a new value to the list of suggestions

Note that when combined with a Label, the id that matches the Label's htmlFor prop should go on the Combobox.Input.

Edit me!

API Reference

Combobox

PropTypeDefaultRequired
asJSX.IntrinsicElements

-

-

aria-label
string

-

-

aria-labelledby
string

-

-

onSelect
(value: string) => void

-

-

openOnFocus
boolean

-

-

cssCSSProperties

-

-

Combobox.Input

PropTypeDefaultRequired
value
string

-

-

selectOnClick
boolean

-

-

autocomplete
boolean

-

-

state
"error"

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

Combobox.Popover

PropTypeDefaultRequired
position
Position

-

-

hidden
boolean

-

-

targetRef
RefObject<PossibleNode>

-

-

unstable_observableRefs
RefObject<PossibleNode>[]

-

-

portal
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

Combobox.List

PropTypeDefaultRequired
persistSelection
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

Combobox.Option

PropTypeDefaultRequired
valuestring

-

children
null | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | (props: ComboboxOptionContextValue) => ReactNode

-

-

index
number

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

Combobox.OptionText

PropTypeDefaultRequired