## Select field
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.
Default to the HTML snippet — <aha-select> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- options: { label, value }[], default []. The selectable set — a JSON `options` attribute or an `.options` property
- value: string, default —. Selected value (controlled)
- placeholder: string, default —. Dimmed hint shown when no value is selected
- size: small | default | large, default default. Control height 24 / 32 / 40
- status: error | warning, default —. Validation border colour
- disabled: boolean, default false. Non-interactive, muted control
- change: CustomEvent<{value}>, default —. Composed event; read e.detail.value
- open: boolean, default false. Reflects/controls the themed listbox popup being open (also toggled by click/keyboard). aria-expanded stays in sync.
Tokens: color-primary, border, border-hover, border-error, border-warning, bg-container, bg-container-disabled, border-disabled, text-default, text-tertiary, text-disabled, font-product.
Use when: 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).