ComponentsSelect
Select
A flexible and customizable dropdown select component.
A flexible and customizable dropdown select component.
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 the select should close after an item is selected
string[]
'ltr' | 'rtl'
The document's text/writing direction.
boolean
Whether the select is disabled
string
The associate form of the underlying select.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The key of the highlighted item
string
The unique identifier of the machine.
Partial<{ root: string content: string control: string trigger: string clearTrigger: string label: string hiddenSelect: string positioner: string item(id: string | number): string itemGroup(id: string | number): string itemGroupLabel(id: string | number): string }>
The ids of the elements in the select. Useful for composition.
boolean
Whether the select is invalid
(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 options
boolean
Whether to allow multiple selection
string
The `name` attribute of the underlying select.
(event: FocusOutsideEvent) => void
Function called when the focus is moved outside the combobox
(details: HighlightChangeDetails<T>) => void
The callback fired when the highlighted item 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
The callback fired when the selected item changes.
boolean
Whether the select menu is open
PositioningOptions
The positioning options of the menu.
boolean
Whether the select is read-only
boolean
Whether to select the highlighted item when the user presses Tab, and the menu is open.
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<any>) => WithoutRef<HTMLAttributes<HTMLElement>>
(props: ItemProps<any>) => WithoutRef<HTMLAttributes<HTMLElement>>
(props: ItemProps<any>) => ItemState
Returns the state of a combobox item
(props: ItemProps<any>) => WithoutRef<HTMLAttributes<HTMLElement>>
boolean
Whether there's a selected option
WithoutRef< DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> >
(value: string) => void
The value of the combobox input
boolean
Whether the select is focused
boolean
Whether the select 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 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