Select
A single choice with a scope-aware listbox and native form participation.@gemologic/sheen · formsPlayground
<Select label="Cadence" name="cadence" options={[{ value: "live", label: "Live" }, { value: "manual", label: "Manual" }]} defaultValue="live" />Variant matrix
Refresh cadence
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Select.tsx- Tokens
--sheen-color-border-control--sheen-color-bg-raised--sheen-color-focus-ring
Accessibility
Role: buttonKeyboard: Tab, Space, Enter, Arrow keys, Home, End, Escape, TypeaheadDo
- Keep option values stable across refreshes.
Do not
- Do not use Select as an editable autocomplete.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible label. |
options * | readonly SelectOption[] | — | Options keyed by unique nonempty strings, with labels, descriptions, and disabled flags. |
value | string | null | — | App-owned value; null explicitly clears selection. |
defaultValue | string | null | — | Captured uncontrolled default restored by uncanceled form reset. |
onValueChange | (value: string | null) => void | — | Requested value changes; controlled owners may accept or reject. |
name | string | — | Native form field name; unnamed selects do not submit. |
form | string | — | Optional external form ID, associated with the trigger and native select. |
placeholder | string | — | Empty-selection text, defaulting to the localized selectOption message. |
description | string | — | Supporting instructions associated with the trigger. |
error | string | — | Associated error text and invalid state, without automatic announcements. |
disabled | boolean | false | Prevents interaction and submission. |
readOnly | boolean | false | Allows inspection but rejects selection changes. |
required | boolean | false | Requires a nonempty selection for native form submission. |