Select API

API documentation for Select component

SelectRoot#

Props#

Defines valid properties in Select component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectRootInstance) => ReactNode)	null	The children to render.
multiple	boolean	null	When enabled, allows multiple items to be selected.
checkmark	boolean	null	When enabled, displays a checkmark icon next to the selected option.
invalid	boolean	null	When present, it specifies that the component should have invalid state style.
variant	"outlined" \| "filled"	null	Specifies the input variant of the component.
fluid	boolean	null	Spans 100% width of the container when enabled.
disabled	boolean	false	When present, it specifies that the element should be disabled.
size	"small" \| "large"	null	Defines the size of the component.
onValueChange	(event: SelectValueChangeEvent) => void	null	Callback fired when the select's value is changed.
onFilterValueChange	(event: SelectFilterValueChangeEvent) => void	null	Callback fired when the select's filter value is changed.
value	unknown	null	The current selected value of the select.
defaultValue	unknown	null	The default selected value when used in uncontrolled mode.
filterValue	string	null	The current filter text value (controlled).
defaultFilterValue	string	null	The default filter text value when used in uncontrolled mode.
open	boolean	null	Controlled open state of the select overlay.
defaultOpen	boolean	null	Default open state for uncontrolled mode.
options	unknown[]	null	An array of options to display.
optionKey	string	null	Unique key for each option.
optionLabel	string	null	Label field for each option.
optionValue	string	null	Value field for each option.
optionDisabled	string	null	Field to check if an option is disabled.
optionGroupLabel	string	null	Label field for option groups.
optionGroupChildren	string	null	Field that contains the children options in a group.
locale	string	null	The locale to use for localization.
autoOptionFocus	boolean	null	When enabled, the focused option is automatically highlighted.
selectOnFocus	boolean	null	When enabled, the focused option is automatically selected.
focusOnHover	boolean	null	When enabled, the focused option changes on hover.
filter	boolean	null	When enabled, displays a filter input in the dropdown.
filterMatchMode	"endsWith" \| "startsWith" \| "contains" \| "equals"	null	Defines how the filter should match options.
appendTo	HTMLElement \| "body" \| "self"	null	A valid query selector or an HTMLElement to specify where the overlay gets attached.
ariaLabel	string	null	Used to define a string that labels the input element.
ariaLabelledBy	string	null	Identifier of the underlying input element.
onOpenChange	(event: useSelectOpenChangeEvent) => void	null	Callback to invoke when the open state changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Select component.

name	type	default	description
value	unknown	null	The current selected value.
filterValue	string	null	The current filter text value.
opened	boolean	null	Whether the overlay is open.
focused	boolean	null	Whether the trigger is focused.
focusedOptionIndex	number	null	The index of the currently focused option. -1 if no option is focused.
anchorEl	HTMLElement	null	The anchor (trigger) element.
positionerEl	HTMLDivElement	null	The positioner element.

Exposes#

Defines the methods and properties exposed by Select component.

name	type	default	description
state	useSelectState	null	The state of the useSelect.
listbox	useListboxInstance	null	The listbox instance used internally for option management.
presence	{ present: boolean; exiting: boolean; mounted: boolean; ref: RefObject<HTMLElement> }	null	The presence state for managing mount/unmount transitions.
triggerRef	RefObject<HTMLElement>	null	Reference to the trigger element.
setAnchorRef	(node: HTMLElement) => void	null	Sets the anchor (trigger) element reference.
setPositionerRef	(node: HTMLDivElement) => void	null	Sets the positioner element reference.
onContainerClick	(event: MouseEvent<HTMLDivElement>) => void	null	Callback when the container is clicked.
onKeyDown	(event: KeyboardEvent<HTMLElement>) => void	null	Callback when a key is pressed on the trigger.
onFilterKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Callback when a key is pressed in the filter input.
onClearClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback when the clear button is clicked.
onOptionSelect	(event: { originalEvent: SyntheticEvent; value: unknown }) => void	null	Callback when an option is selected.
getFocusedOptionId	() => string	null	Gets the ID of the currently focused option for aria-activedescendant.
getSelectedOptionLabel	() => unknown	null	Gets the label of the currently selected option.
hasValue	() => boolean	null	Checks if there is a selected value.
show	() => void	null	Shows the overlay.
hide	() => void	null	Hides the overlay.
toggle	(event: SyntheticEvent) => void	null	Toggles the overlay visibility.

Events#

SelectValueChangeEvent

Event fired when the select's value changes.

name	type	description
value	unknown	The new value of the select.
option	unknown	The selected option.
originalEvent	SyntheticEvent	The original event that triggered the change.

SelectFilterValueChangeEvent

Event fired when the select's filter value changes.

name	type	description
query	string	The current filter query.
originalEvent	SyntheticEvent	The original event that triggered the change.

SelectOpenChangeEvent

Event object for the onOpenChange callback.

name	type	description
value	boolean	The new value of the select's open state.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Select component.

name	type	default	description
root	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
trigger	SelectRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the trigger's DOM element.
value	SelectRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the value's DOM element.
clearIcon	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the clear icon's DOM element.
icon	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the icon's DOM element.
portal	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.
positioner	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the positioner's DOM element.
panel	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
filter	SelectRootPassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the filter's DOM element.
pcListbox	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the listbox's DOM element.
options	SelectRootPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the options' DOM element.
option	SelectRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the option's DOM element.
selection	SelectRootPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the selection's DOM element.
header	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
footer	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.
empty	SelectRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the empty's DOM element.

Types#

Instance

Instance of SelectRoot component.

values
ComponentInstance<SelectRootProps, SelectRootState, SelectRootExposes>

SelectTrigger#

Props#

Defines valid properties in SelectTrigger component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectTriggerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectTriggerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectTriggerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectTriggerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectTrigger component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectTrigger component.

name	type	default	description
root	SelectTriggerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectTrigger component.

values
ComponentInstance<SelectTriggerProps, SelectTriggerState, SelectTriggerExposes>

SelectIcon#

Props#

Defines valid properties in SelectIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectIconInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectIcon component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectIcon component.

name	type	default	description
root	SelectIconPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectIcon component.

values
ComponentInstance<SelectIconProps, SelectIconState, SelectIconExposes>

SelectPortal#

Props#

Defines valid properties in SelectPortal component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	(CSSProperties \| ((instance?: PortalInstance) => CSSProperties)) & (CSSProperties \| ((instance?: SelectPortalInstance) => CSSProperties))	null	The style to apply to the component.
className	(string \| ((instance?: PortalInstance) => string)) & (string \| ((instance?: SelectPortalInstance) => string))	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	PortalPassThrough & Record<PropertyKey, unknown> & SelectPortalPassThrough	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	(ReactNode \| ((instance: PortalInstance) => ReactNode)) & (ReactNode \| ((instance: SelectPortalInstance) => ReactNode))	null	The children to render.
element	ReactNode	null	The element to be rendered as the portal.
appendTo	HTMLElement \| "body" \| "self"	'body'	The DOM element where the portal should be appended to.
visible	boolean	false	Whether the portal is visible or not.
onMounted	() => void	null	Callback function to invoke when the portal is mounted.
onUnmounted	() => void	null	Callback function to invoke when the portal is unmounted.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectPortal component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectPortal component.

name	type	default	description
root	SelectPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectPortal component.

values
ComponentInstance<SelectPortalProps, SelectPortalState, SelectPortalExposes>

SelectList#

Props#

Defines valid properties in SelectList component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectListInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectListPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectListInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectList component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectList component.

name	type	default	description
root	SelectListPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectList component.

values
ComponentInstance<SelectListProps, SelectListState, SelectListExposes>

SelectOptions#

Props#

Defines valid properties in SelectOptions component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectOptionsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectOptionsInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectOptionsPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectOptionsInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectOptions component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.
listbox	ListboxRootInstance	null	The Listbox component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectOptions component.

name	type	default	description
root	SelectOptionsPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectOptions component.

values
ComponentInstance<SelectOptionsProps, SelectOptionsState, SelectOptionsExposes>

SelectOption#

Props#

Defines valid properties in SelectOption component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectOptionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectOptionInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectOptionPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectOptionInstance) => ReactNode)	null	The children to render.
option	unknown	null	The option data object.
index	number	null	The index of the option in the list.
selected	boolean	null	Whether the option is selected.
focused	boolean	null	Whether the option is focused.
disabled	boolean	null	Whether the option is disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectOption component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.
listbox	ListboxRootInstance	null	The Listbox component instance.
optionInstance	ListboxOptionInstance	null	The ListboxOption component instance.
option	unknown	null	The option data object.
index	number	null	The index of the option.
group	boolean	null	Whether this is a group header option.
selected	boolean	null	Whether the option is selected.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectOption component.

name	type	default	description
root	SelectOptionPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectOption component.

values
ComponentInstance<SelectOptionProps, SelectOptionState, SelectOptionExposes>

SelectClearIcon#

Props#

Defines valid properties in SelectClearIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectClearIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectClearIconInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectClearIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectClearIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectClearIcon component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectClearIcon component.

name	type	default	description
root	SelectClearIconPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectClearIcon component.

values
ComponentInstance<SelectClearIconProps, SelectClearIconState, SelectClearIconExposes>

SelectSelection#

Props#

Defines valid properties in SelectSelection component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectSelectionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectSelectionInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectSelectionPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectSelectionInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectSelection component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.
listbox	ListboxRootInstance	null	The Listbox component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectSelection component.

name	type	default	description
root	SelectSelectionPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectSelection component.

values
ComponentInstance<SelectSelectionProps, SelectSelectionState, SelectSelectionExposes>

SelectFilter#

Props#

Defines valid properties in SelectFilter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectFilterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectFilterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectFilterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectFilterInstance) => ReactNode)	null	The children to render.
placeholder	string	null	Placeholder text for the filter input.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectFilter component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectFilter component.

name	type	default	description
root	SelectFilterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
input	SelectFilterPassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.

Types#

Instance

Instance of SelectFilter component.

values
ComponentInstance<SelectFilterProps, SelectFilterState, SelectFilterExposes>

SelectHeader#

Props#

Defines valid properties in SelectHeader component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectHeaderInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectHeaderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectHeaderInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectHeader component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectHeader component.

name	type	default	description
root	SelectHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectHeader component.

values
ComponentInstance<SelectHeaderProps, SelectHeaderState, SelectHeaderExposes>

SelectFooter#

Props#

Defines valid properties in SelectFooter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectFooterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectFooterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectFooterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectFooterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectFooter component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectFooter component.

name	type	default	description
root	SelectFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectFooter component.

values
ComponentInstance<SelectFooterProps, SelectFooterState, SelectFooterExposes>

SelectEmpty#

Props#

Defines valid properties in SelectEmpty component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SelectEmptyInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SelectEmptyInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SelectEmptyPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SelectEmptyInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SelectEmpty component.

name	type	default	description
select	SelectRootInstance	null	The Select component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SelectEmpty component.

name	type	default	description
root	SelectEmptyPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SelectEmpty component.

values
ComponentInstance<SelectEmptyProps, SelectEmptyState, SelectEmptyExposes>

useSelect#

Props#

Props for the useSelect hook.

name	type	default	description
value	unknown	null	The current selected value of the select.
defaultValue	unknown	null	The default selected value when used in uncontrolled mode.
filterValue	string	null	The current filter text value (controlled).
defaultFilterValue	string	null	The default filter text value when used in uncontrolled mode.
open	boolean	null	Controlled open state of the select overlay.
defaultOpen	boolean	null	Default open state for uncontrolled mode.
options	unknown[]	null	An array of options to display.
optionKey	string	null	Unique key for each option.
optionLabel	string	null	Label field for each option.
optionValue	string	null	Value field for each option.
optionDisabled	string	null	Field to check if an option is disabled.
optionGroupLabel	string	null	Label field for option groups.
optionGroupChildren	string	null	Field that contains the children options in a group.
disabled	boolean	null	When present, it specifies that the component should be disabled.
locale	string	null	The locale to use for localization.
autoOptionFocus	boolean	null	When enabled, the focused option is automatically highlighted.
selectOnFocus	boolean	null	When enabled, the focused option is automatically selected.
focusOnHover	boolean	null	When enabled, the focused option changes on hover.
multiple	boolean	null	When enabled, allows multiple items to be selected.
filter	boolean	null	When enabled, displays a filter input in the dropdown.
filterMatchMode	"endsWith" \| "startsWith" \| "contains" \| "equals"	null	Defines how the filter should match options.
appendTo	HTMLElement \| "body" \| "self"	null	A valid query selector or an HTMLElement to specify where the overlay gets attached.
ariaLabel	string	null	Used to define a string that labels the input element.
ariaLabelledBy	string	null	Identifier of the underlying input element.
onValueChange	(event: useSelectValueChangeEvent) => void	null	Callback to invoke when the selected value changes.
onFilterValueChange	(event: useSelectFilterValueChangeEvent) => void	null	Callback when the filter value changes.
onOpenChange	(event: useSelectOpenChangeEvent) => void	null	Callback to invoke when the open state changes.

State#

Defines valid state in useSelect.

name	type	default	description
value	unknown	null	The current selected value.
filterValue	string	null	The current filter text value.
opened	boolean	null	Whether the overlay is open.
focused	boolean	null	Whether the trigger is focused.
focusedOptionIndex	number	null	The index of the currently focused option. -1 if no option is focused.
anchorEl	HTMLElement	null	The anchor (trigger) element.
positionerEl	HTMLDivElement	null	The positioner element.

Exposes#

Defines the methods and properties exposed by useSelect.

name	type	default	description
state	useSelectState	null	The state of the useSelect.
listbox	useListboxInstance	null	The listbox instance used internally for option management.
presence	{ present: boolean; exiting: boolean; mounted: boolean; ref: RefObject<HTMLElement> }	null	The presence state for managing mount/unmount transitions.
triggerRef	RefObject<HTMLElement>	null	Reference to the trigger element.
setAnchorRef	(node: HTMLElement) => void	null	Sets the anchor (trigger) element reference.
setPositionerRef	(node: HTMLDivElement) => void	null	Sets the positioner element reference.
onContainerClick	(event: MouseEvent<HTMLDivElement>) => void	null	Callback when the container is clicked.
onKeyDown	(event: KeyboardEvent<HTMLElement>) => void	null	Callback when a key is pressed on the trigger.
onFilterKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Callback when a key is pressed in the filter input.
onClearClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback when the clear button is clicked.
onOptionSelect	(event: { originalEvent: SyntheticEvent; value: unknown }) => void	null	Callback when an option is selected.
getFocusedOptionId	() => string	null	Gets the ID of the currently focused option for aria-activedescendant.
getSelectedOptionLabel	() => unknown	null	Gets the label of the currently selected option.
hasValue	() => boolean	null	Checks if there is a selected value.
show	() => void	null	Shows the overlay.
hide	() => void	null	Hides the overlay.
toggle	(event: SyntheticEvent) => void	null	Toggles the overlay visibility.

Events#

useSelectValueChangeEvent

Event fired when the select's value changes.

name	type	description
originalEvent	E	The original event that triggered the change.
value	unknown	The selected value.
option	unknown	The selected option object.

useSelectOpenChangeEvent

Event object for the onOpenChange callback.

name	type	description
value	boolean	The new value of the select's open state.

useSelectFilterValueChangeEvent

Event fired when the select's filter value changes.

name	type	description
originalEvent	E	The original event that triggered the change.
query	string	The current filter query.

Types#

Instance

Instance of useSelect headless.

values
HeadlessInstance<useSelectProps, useSelectState, useSelectExposes>