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.

This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">following the specification</a>.

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.

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

OptionGroup

node

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

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

Select

func

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

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

Stabilizes the ListContext value for the Option component, so it doesn't change when sibling Options update.

Select

useOption API

Import

Return value

useOptionContextStabilizer API

Import

Return value

useSelect API

Import

Return value