FormComboBox
A FormComboBox connects a ComboBox to a Form component using react-hook-form.
Preview
Code
Examples
With disabled keys
Preview
Code
Disabled
Preview
Code
Invalid
Preview
Code
Sections
Preview
Code
Props
Name | Type | Default |
|---|---|---|
defaultFilter | ((textValue: string, inputValue: string) => boolean) | — |
formValue | "key" | "text" | 'key' |
allowsEmptyCollection | boolean | — |
id | string | — |
name | string | — |
onFocus | ((e: FocusEvent<HTMLInputElement, Element>) => void) | — |
onBlur | ((e: FocusEvent<HTMLInputElement, Element>) => void) | — |
onKeyDown | ((e: KeyboardEvent) => void) | — |
onKeyUp | ((e: KeyboardEvent) => void) | — |
isDisabled | boolean | — |
autoFocus | boolean | — |
onFocusChange | ((isFocused: boolean) => void) | — |
disabledKeys | Iterable<Key> | — |
items | Iterable<T> | — |
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 | — |