Select primitives
Lower-level parts for composing a single-selection select.
Use these primitives when SelectField does not fit your layout.
They expose the root, trigger, value, indicator, popover, listbox, and option parts that
SelectField composes. Start with SelectField when it fits.
Anatomy
SelectRoot is the semantic root. It connects the trigger to the label, description, and error
inside it, and normally owns the selection, open state, validation, form state, and size.
SelectTrigger is the button that opens the popover, and it draws the control chrome. It holds a
SelectValue, which shows the selected option, and a SelectIndicator. SelectPopover holds a
SelectListBox, which holds the SelectItem options.
Put the SelectValue before the SelectIndicator.
Root props
Put placeholder and the selection, open state, validation, form, and size props on SelectRoot.
value and defaultValue take a key, or null for no selection, and onChange receives the same
type. A select has no read-only state.
id, className, and ref on SelectRoot target the root element. triggerId targets the
trigger, and ref on SelectTrigger reaches it.
Options
Use SelectItem for options. SelectListBox accepts static children or items with a render
function.
Indicator
SelectIndicator shows a chevron by default and sets data-open while the popover is open. Pass
children to replace the chevron.
Size
Set size on SelectRoot, and the trigger, indicator, and items follow. medium is the default.
Use small in compact layouts.
Pending
Pass isPending to SelectTrigger while a change is saving. The trigger keeps focus but can't be
pressed or opened, and can't change the value from the trigger, until pending ends.
Validation
Set isInvalid or a validation prop on SelectRoot. The trigger takes a danger border, and
FieldError inside Field shows the message and the error icon. See
Validation.
Labels
The label takes textual, non-interactive content only. Place a link or button outside it. To name
the select without a visible label, pass aria-labelledby or aria-label to SelectRoot.
API
SelectRootProps
SelectRootProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
SelectTriggerProps
SelectTriggerProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
SelectValueProps
SelectValueProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
SelectIndicatorProps
SelectIndicatorProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
SelectPopoverProps
SelectPopoverProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
SelectListBoxProps
SelectListBoxProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
SelectItemProps
SelectItemProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type