formstexulinot agent-emittableapp
Select
select
A single-value select root with size and variant chrome.
Live examples
Outline select
Outline select
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
open | boolean | no | false | — |
value | string | no | — | — |
defaultValue | string | no | — | — |
name | string | no | — | — |
disabled | boolean | no | false | — |
required | boolean | no | false | — |
form | string | no | — | Associated form id |
type | enum (single) | no | "single" | — |
items | array | no | — | Optional value/label catalog when items are not registered by Select.Item |
sideOffset | number | no | 4 | — |
positioning | boolean | no | true | — |
size | enum (sm, md, lg) | no | "md" | — |
variant | enum (outline, soft) | no | "outline" | — |
onOpenChange | event | no | — | — |
onValueChange | event | no | — | — |
children | slot | no | — | — |
Keyboard
| Key | Action |
|---|---|
a, ArrowDown, Enter, Space | Trigger is a real button; listbox opens on ArrowDown/Enter/Space |
Escape | Typeahead highlights matching items; Escape closes and restores focus |
Accessibility
- Trigger is a real button; listbox opens on ArrowDown/Enter/Space
- Typeahead highlights matching items; Escape closes and restores focus
Evidence for select
Latest committed gates for select (as of 2026-10-23). Static snapshot — not live CI.
Behavior
checkedscenario select
Rows in tests/behavior/scenarios/select.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium, WebKit and the Pixel 7.
Size (gzip)
@texuli/primitives/select · measured 13.4 KiB · budget 20.0 KiB
Measured gzip from docs/quality/perf-primitives.md (2026-10-23).
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Pick one value from a moderate closed list
Don’t use when
Prefer another component
- A short exclusive set that fits on the page (use radio-group)
- Free text with suggestions (use combobox)