State class applied to {{nodeName}} if {{conditions}}.

An unstyled option to be used within a Select.

If <code>true</code>, the option will be disabled.

A text representation of the option&#39;s content. Used for keyboard text navigation matching.

The props used for each slot inside the Option.

The components used for each slot inside the Option. Either a string to use a HTML element or a component.

An unstyled option group to be used within a Select.

If <code>true</code> all the options in the group will be disabled.

The human-readable description of the group.

The props used for each slot inside the Input.

The components used for each slot inside the OptionGroup. Either a string to use a HTML element or a component.

The foundation for building custom-styled select components.

A function used to determine if two options&#39; values are equal. By default, reference equality is used. There is a performance impact when using the <code>areOptionsEqual</code> prop (proportional to the number of options). Therefore, it&#39;s recommented to use the default reference equality comparison whenever possible.

If <code>true</code>, the select element is focused during the first mount

If <code>true</code>, the select will be initially open.

The default selected value. Use when the component is not controlled.

If <code>true</code>, the select is disabled.

A function used to convert the option label to a string. It&#39;s useful when labels are elements and need to be converted to plain text to enable navigation using character keys on a keyboard.

A function to convert the currently selected value to a string. Used to set a value of a hidden input associated with the select, so that the selected value can be posted with a form.

<code>id</code> attribute of the listbox element.

Controls the open state of the select&#39;s listbox.

If <code>true</code>, selecting multiple values is allowed. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props.

Name of the element. For example used by the server to identify the fields in form submits. If the name is provided, the component will render a hidden input element that can be submitted to a server.

Callback fired when an option is selected.

Callback fired when the component requests to be opened. Use in controlled mode (see listboxOpen).

Text to show when there is no selected value.

Function that customizes the rendering of the selected value.

If <code>true</code>, the Select cannot be empty when submitting form.

The components used for each slot inside the Select. Either a string to use a HTML element or a component.

The selected value. Set to <code>null</code> to deselect all options.

Option

bool

string

shape

root

OptionGroup

node

{ label?: func &#124;&nbsp;object, list?: func &#124;&nbsp;object, root?: func &#124;&nbsp;object }

{ label?: elementType, list?: elementType, root?: elementType }

label

list

Select

func

{ listbox?: func &#124;&nbsp;object, popper?: func &#124;&nbsp;object, root?: func &#124;&nbsp;object }

{ listbox?: elementType, popper?: elementType, root?: elementType }

listbox

popper

If <code>true</code>, the option is highlighted.

If <code>true</code>, the option is selected.

If <code>true</code>, the select will be open by default.

A function used to convert the option label to a string. This is useful when labels are elements and need to be converted to plain text to enable keyboard navigation with character keys.

The <code>id</code> attribute of the listbox element.

If <code>true</code>, the end user can select multiple values. This affects the type of the <code>value</code>, <code>defaultValue</code>, and <code>onChange</code> props.

The <code>name</code> attribute of the hidden input element. This is useful when the select is embedded in a form and you want to access the selected value in the form data.

Callback fired when an option is highlighted.

Callback fired when the listbox is opened or closed.

Controls the open state of the select&#39;s listbox. This is the controlled equivalent of the <code>defaultOpen</code> prop.

An alternative way to specify the options. If this parameter is set, options defined as JSX children are ignored.

If <code>true</code>, the select embedded in a form must have a selected value. Otherwise, the form submission will fail.

If <code>true</code>, the trigger button is active (pressed).

If <code>true</code>, the trigger button has a visible focus.

A value to be passed to the <code>SelectProvider</code> component.

Action dispatcher for the select component. Allows to programmatically control the select.

Resolver for the button slot&#39;s props.

Resolver for the hidden input slot&#39;s props.

Resolver for the listbox slot&#39;s props.

A function that returns the metadata of an option with a given value.

If <code>true</code>, the listbox is open.

useOption

boolean

string | React.ReactNode

React.Ref&lt;Element&gt;

Value

&lt;ExternalProps extends Record&lt;string, unknown&gt;&gt;(externalProps?: ExternalProps) =&gt; UseOptionRootSlotProps&lt;ExternalProps&gt;

number

React.RefCallback&lt;Element&gt; | null

useSelect

(a: OptionValue, b: OptionValue) =&gt; boolean

SelectValue&lt;OptionValue, Multiple&gt;

(option: SelectOption&lt;OptionValue&gt;) =&gt; string

(option: SelectValue&lt;SelectOption&lt;OptionValue&gt;, Multiple&gt;) =&gt; React.InputHTMLAttributes&lt;HTMLInputElement&gt;[&#39;value&#39;]

Multiple

(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue&lt;OptionValue, Multiple&gt;) =&gt; void

(event: React.MouseEvent&lt;Element, MouseEvent&gt; | React.KeyboardEvent&lt;Element&gt; | React.FocusEvent&lt;Element, Element&gt; | null, highlighted: OptionValue | null) =&gt; void

(open: boolean) =&gt; void

SelectOptionDefinition&lt;OptionValue&gt;[]

SelectProviderValue&lt;Value&gt;

(action: ListAction&lt;Value&gt; | SelectAction) =&gt; void

&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectButtonSlotProps&lt;ExternalProps&gt;

&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectHiddenInputSlotProps&lt;ExternalProps&gt;

&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSelectListboxSlotProps&lt;ExternalProps&gt;

(optionValue: Value) =&gt; SelectOption&lt;Value&gt; | undefined

Select

useOption API

Import

Parameters

Return value

useSelect API

Import

Parameters

Return value