ComboBox

A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

Preview

Code

This is a label for a field

This is a description for a field

Examples

With disabled keys

Preview

Code

This is a label for a field

This is a description for a field

Borderless

Preview

Code

This is a label for a field

This is a description for a field

Disabled

Preview

Code

This is a label for a field

This is a description for a field

Invalid

Preview

Code

This is a label for a field

This is a description for a field

Sections

Preview

Code

This is a label for a field

This is a description for a field

Props

Name	Type	Default
`defaultFilter`	`((textValue: string, inputValue: string) => boolean)`	—
`formValue`	`"text"` \| `"key"`	`'key'`
`allowsEmptyCollection`	`boolean`	—
`isDisabled`	`boolean`	—
`autoFocus`	`boolean`	—
`onFocus`	`((e: FocusEvent<HTMLInputElement, Element>) => void)`	—
`onBlur`	`((e: FocusEvent<HTMLInputElement, Element>) => void)`	—
`onFocusChange`	`((isFocused: boolean) => void)`	—
`onKeyDown`	`((e: KeyboardEvent) => void)`	—
`onKeyUp`	`((e: KeyboardEvent) => void)`	—
`id`	`string`	—
`disabledKeys`	`Iterable<Key>`	—
`items`	`Iterable<T>`	—
`name`	`string`	—
`isReadOnly`	`boolean`	—
`isRequired`	`boolean`	—
`isInvalid`	`boolean`	—
`validate`	`((value: ComboBoxValidationValue) => true` \| `ValidationError` \| `null)`	—
`shouldFocusWrap`	`boolean`	—
`onSelectionChange`	`((key: Key` \| `null) => void)`	—
`selectedKey`	`Key` \| `null`	—
`defaultSelectedKey`	`Key`	—
`defaultItems`	`Iterable<T>`	—
`onOpenChange`	`((isOpen: boolean, menuTrigger?: MenuTriggerAction) => void)`	—
`inputValue`	`string`	—
`defaultInputValue`	`string`	—
`onInputChange`	`((value: string) => void)`	—
`allowsCustomValue`	`boolean`	—
`menuTrigger`	`MenuTriggerAction`	`'input'`
`validationBehavior`	`"native"` \| `"aria"`	`'native'`
`children`	`ReactNode` \| `((values: ComboBoxRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	—
`className`	`string` \| `((values: ComboBoxRenderProps & { defaultClassName: string; }) => string)`	—
`style`	`CSSProperties` \| `((values: ComboBoxRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	—
`slot`	`string` \| `null`	—
`renderEmptyState`	`((props: ListBoxRenderProps) => ReactNode)`	—
`ref`	`ForwardedRef<HTMLDivElement>`	—
`showCheckmarkOnSelected`	`boolean`	—