SelectRow

<SelectRow> is the canonical Settings row for a single-pick value. Label + Select + optional description, all stacked. S5 in 13-section-anatomy.md.

import from "@na/ui/components/SelectRow" ▶ Open in Storybook packages/ui/src/components/SelectRow.tsx

When to use

Settings-page rows for one-of-N value pickers.
Configuration rows where the option count is static and ≤ ~30.

Don’t use SelectRow for: searchable / async lists (Combobox), 2–5 visible options (SegmentedControl), or boolean toggles (ToggleRow).

Default

Language

Used for outbound greetings and prompts.

<SelectRow
  label="Language"
  value={config.language}
  onValueChange={(v) => setConfig({ ...config, language: v })}
  options={[
    { value: 'en-US', label: 'English (US)' },
    { value: 'vi-VN', label: 'Tiếng Việt' },
  ]}
  description="Used for outbound greetings and prompts."
/>

API

Prop	Type	Default	Description
`label` *	`string`	—	Sentence-case label.
`value` *	`string`	—	Currently selected value.
`onValueChange` *	`(next: string) => void`	—	Fires on every change.
`options`	`SelectRowOption[]`	—	Flat option list. Mutually exclusive with `groups`.
`groups`	`SelectRowGroup[]`	—	Grouped options. Mutually exclusive with `options`.
`placeholder`	`string`	—	Trigger placeholder when no value.
`description`	`string`	—	Optional muted helper text below the Select.
`quietLabel`	`boolean`	`true`	Use the muted Settings-page label style.
`disabled`	`boolean`	`false`	Disable the Select.
`id`	`string`	—	Optional id; auto-generated when omitted.

SelectRowOption: { value, label, meta?, disabled? }. SelectRowGroup: { label, options }.

Design guidelines

✓ Do

Use options for flat lists; groups when categories carry meaning.
Pair with description when the consequence of the choice isn't obvious.
Sort options by user frequency, not alphabetically.

✗ Don't

Use SelectRow for 100+ options. Switch to Combobox.
Mix options + groups in one SelectRow. Pick one.

Accessibility

Inherits Select ARIA semantics.
<Label htmlFor> is wired automatically.
Description (when present) is linked to the trigger via aria-describedby.

Select — Underlying primitive.
Combobox — Searchable / long lists.
ToggleRow, SliderRow, NumberInputRow, ActionRow — Sibling row primitives.

▶ Open SelectRow stories in Storybook