# Select field
> Generated from select-field.contract.json — do not edit by hand.

Pick one value from a short, known set — a lightweight native-select-backed field that embeds anywhere.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `options` | { label, value }[] | `[]` | The selectable set — a JSON `options` attribute or an `.options` property |
| `value` | string | `—` | Selected value (controlled) |
| `placeholder` | string | `—` | Dimmed hint shown when no value is selected |
| `size` | small | default | large | `default` | Control height 24 / 32 / 40 |
| `status` | error | warning | `—` | Validation border colour |
| `disabled` | boolean | `false` | Non-interactive, muted control |
| `change` | CustomEvent<{value}> | `—` | Composed event; read e.detail.value |
| `open` | boolean | `false` | Reflects/controls the themed listbox popup being open (also toggled by click/keyboard). aria-expanded stays in sync. |

## Visual standard (measured)
- Control: height 32 · radius 8 · 1px #E3E3E3 border
- Size: small 24 · default 32 · large 40
- Focus: brand #6A1EBB border + soft ring
- Placeholder: #8A8A8A
- Caret: trailing aha-icon system-caret-down (UA arrow suppressed)
- Status: error #F5222D · warning #FF7747 border
- Popup: themed role=listbox — white surface, radius 8, elevation shadow, brand-tint hover, check on selected; Arrow/Home/End + typeahead + Escape; outside-click close

## When to use
- **Select field (this leaf)** — one value from a short, known set (≤ ~10), or a select inside a shadow-DOM surface like a settings row — no search/tags/multi needed
- **Select (composite)** — a long list needing type-to-search, multiple/tags, async loading, or option groups
- **Radio** — 2–5 mutually-exclusive options all worth showing at once

Pre-select the recommended default rather than leaving it empty. Keep option labels short and sentence case; keep product nouns — Q&A, Word cloud. This is the leaf half of the hybrid — reach for the composite Select the moment you need search, tags, or a virtualised list.