The content of the component.

Whether the select popup is initially open.

To render a controlled select popup, use the open prop instead.

The uncontrolled value of the select when it's initially rendered.

To render a controlled select, use the value prop instead.

Whether the component should ignore user interaction.

Identifies the form that owns the hidden input. Useful when the select is rendered outside the form.

Whether moving the pointer over items should highlight them. Disabling this prop allows CSS :hover to be differentiated from the :focus (data-highlighted) state.

The id of the Select.

A ref to access the hidden input element.

Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to Object.is comparison.

Data structure of the items rendered in the select popup. When specified, <Select.Value> renders the label of the selected item instead of the raw value.

When the item values are objects (<Select.Item value={object}>), this function converts the object value to a string representation for display in the trigger. If the shape of the object is { value, label }, the label will be used automatically without needing to specify this prop.

When the item values are objects (<Select.Item value={object}>), this function converts the object value to a string representation for form submission. If the shape of the object is { value, label }, the value will be used automatically without needing to specify this prop.

Determines if the select enters a modal state when open.

• true: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
• false: user interaction with the rest of the document is allowed.

On touch devices, a true modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

Whether multiple items can be selected.

Identifies the field when a form is submitted.

Event handler called when the select popup is opened or closed.

Event handler called after any animations complete when the select popup is opened or closed.

Event handler called when the value of the select changes.

Whether the select popup is currently open.

Whether the user should be unable to choose a different option from the select popup.

Whether the user must choose a value before submitting a form.

The value of the select. Use when controlled.

Specifies the text label to use when the item is matched during keyboard text navigation.

Defaults to the item text content if not provided.

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

A unique value that identifies this select item.

Additional offset along the alignment axis, in pixels.

An element to position the popup against. Defaults to the trigger.

The content of the component.

Determines the element to focus when the select popup is closed.

• false: Do not move focus.
• true: Move focus based on the default behavior (trigger or previously focused element).
• RefObject: Move focus to the ref element.
• function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

Which side of the copy button the tooltip and toast open on.

The gap between the trigger and the calendar, in pixels.

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

The size of the component.