Select

Mood

Applies to this device

No value

Code

<Field label="Mood">
  <Select
    options={MOODS}
    placeholder="Pick a mood"
    value={mood}
    onValueChange={setMood}
  />
</Field>

npx shadcn@latest add https://components.haedong.dev/r/select.json

Data-driven: pass options, not children. Extends the native div props of the root; label it with aria-label / aria-labelledby, or wrap it in Field.

Prop	Type	Description
options	{ value: string; label: string; disabled?: boolean }[]	The choices. Disabled options are shown dimmed and skipped by the keyboard.
value / defaultValue	string	Selected value (controlled / uncontrolled).
onValueChange	(value: string) => void	Called on click, Enter or Space on an option; the list then closes.
placeholder	string	Muted uppercase when nothing is selected. Defaults to "Select".
name	string	Renders a hidden input so the value submits with a form.
disabled	boolean	Dims the trigger to 40% and drops pointer events.
aria-invalid	boolean	Dashed full-strength hairline on the trigger, like Input.