Skip to main content

Function: Select()

Select<T>(__namedParameters): Element

Defined in: components/Select/Select.tsx:148

A semantic dropdown selection built on React Aria.

Composes a trigger Button, a floating Popover, and a ListBox. Use SelectItem for each option.

Entity = Selection, interaction = select.single. Validation feedback is driven by React Aria's isInvalid and surfaces on the trigger via the invalid token State — and, since F-009 closed, in a validationMessage part, so an invalid choice can state why inside the system.

A required Select blocks its Form's submit and focus returns to the trigger: React Aria submits the value through a visually hidden <select required> and forwards its focus to the trigger button (read in HiddenSelect.mjs). That hidden element is what onInvalid reports as its target, so a Select is the one field whose event target is not the part carrying data-part="control".

Type Parameters

Type ParameterDefault type
T extends objectobject

Parameters

ParameterType
__namedParametersSelectProps<T>

Returns

Element

Example

<Select
label="Framework"
placeholder="Choose a framework"
description="Only the runtime changes; your data stays."
isRequired
>
<SelectItem id="react">React</SelectItem>
<SelectItem id="vue">Vue</SelectItem>
<SelectItem id="angular">Angular</SelectItem>
</Select>