ComponentsCombobox
Combobox
An intelligent input box with a dropdown for suggesting possible options.
An intelligent input box with a dropdown for suggesting possible options.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
T[]
The options of the select
boolean
Whether to allow custom values or free values in the input
boolean
Whether to autofocus the input on mount
boolean
Whether to close the combobox when an item is selected.
string[]
'ltr' | 'rtl'
The document's text/writing direction.
boolean
Whether the combobox is disabled
string
The associate form of the combobox.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The active item's id. Used to set the `aria-activedescendant` attribute
string
The unique identifier of the machine.
Partial<{ root: string label: string control: string input: string content: string trigger: string clearTrigger: string item(id: string, index?: number | undefined): string positioner: string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>
The ids of the elements in the combobox. Useful for composition.
'none' | 'autohighlight' | 'autocomplete'
Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
string
The current value of the combobox's input
boolean
Whether the combobox is required
(item: T) => boolean
Whether the item is disabled
(item: T) => string
The label of the item
(item: T) => string
The value of the item
boolean
Whether to loop the keyboard navigation through the items
boolean
Whether to allow multiple selection
string
The `name` attribute of the combobox's input. Useful for form submission
(event: FocusOutsideEvent) => void
Function called when the focus is moved outside the combobox
(details: HighlightChangeDetails<T>) => void
Function called when an item is highlighted using the pointer or keyboard navigation.
(details: InputValueChangeDetails) => void
Function called when the input's value changes
(event: InteractOutsideEvent) => void
Function called when an interaction happens outside the combobox
(details: OpenChangeDetails) => void
Function called when the popup is opened
(event: PointerDownOutsideEvent) => void
Function called when the pointer is pressed down outside the combobox
(details: ValueChangeDetails<T>) => void
Function called when a new item is selected
boolean
Whether to open the combobox popup on initial click on the input
string
The placeholder text of the combobox's input
PositioningOptions
The positioning options to dynamically position the menu
boolean
Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it
'replace' | 'clear' | 'preserve'
The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved
boolean
Whether to select the higlighted item on interaction outside the combobox
IntlTranslations
Specifies the localized strings that identifies the accessibility elements and their states
string[]
The keys of the selected items
WithoutRef< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> >
(value?: string | undefined) => void
Function to clear the value of the combobox
() => void
Function to close the combobox
WithoutRef<HTMLAttributes<HTMLElement>>
WithoutRef<HTMLAttributes<HTMLElement>>
() => void
Function to focus on the combobox input
(props: ItemGroupLabelProps) => WithoutRef<HTMLAttributes<HTMLElement>>
(props: ItemGroupProps) => WithoutRef<HTMLAttributes<HTMLElement>>
(props: ItemProps) => WithoutRef<HTMLAttributes<HTMLElement>>
(props: ItemProps) => WithoutRef<HTMLAttributes<HTMLElement>>
(props: ItemProps) => ItemState
Returns the state of a combobox item
(props: ItemProps) => WithoutRef<HTMLAttributes<HTMLElement>>
boolean
Whether there's a selected item
(value: string) => void
The value of the combobox input
WithoutRef< DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> >
string
The value of the combobox input
boolean
Whether the combobox is focused
boolean
Whether the combobox input value is empty
boolean
Whether the combobox is open
WithoutRef< DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> >
() => void
Function to open the combobox
WithoutRef<HTMLAttributes<HTMLElement>>
WithoutRef<HTMLAttributes<HTMLElement>>
T[]
The selected items
(value: string) => void
Function to select a value
(collection: Collection<T>) => void
Function to set the collection of items
(value: string) => void
Function to set the input value of the combobox
(value: string[]) => void
Function to set the value of the combobox
WithoutRef< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> >
string[]
The selected item keys
string
The string representation of the selected items
T
The highlighted item
string
The value of the highlighted item
any
boolean
Whether to enable lazy mounting. Defaults to `false`.
() => void
boolean
boolean
Whether to unmount on exit. Defaults to `false`.
string
string