ToggleRow

<ToggleRow> is the canonical Settings row for a boolean. Label + optional description on the left, Switch on the right. Spec’d as S1 in 13-section-anatomy.md.

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

When to use

Settings-page rows for binary toggles that take effect immediately.
Per-feature flags (“Read knowledge base”, “Send transcripts via email”).

Don’t use ToggleRow for: form-style booleans that submit later (Checkbox), 2–5 visible options (SegmentedControl), or actions (ActionRow).

Default

Read knowledge base

Augment replies with content from the connected KB.

Auto-save drafts

<ToggleRow
  id="kb"
  label="Read knowledge base"
  description="Augment replies with content from the connected KB."
  checked={config.readKnowledgeBase}
  onCheckedChange={(v) => setConfig({ ...config, readKnowledgeBase: v })}
/>

With inline alert

When a precondition isn’t met, surface an inline alert below the row.

Read knowledge base

Augment replies with content from the connected KB.

Knowledge base is empty — upload docs in the Knowledge Base tab.

<ToggleRow
  id="kb-empty"
  label="Read knowledge base"
  description="Augment replies with content from the connected KB."
  checked={v}
  onCheckedChange={setV}
  alert="Knowledge base is empty — upload docs in the Knowledge Base tab."
/>

API

Prop	Type	Default	Description
`id` *	`string`	—	Used to bind <Label> to <Switch> via htmlFor.
`label` *	`string`	—	Sentence-case label without trailing punctuation.
`description`	`string`	—	Optional muted helper sentence.
`checked` *	`boolean`	—	Controlled state.
`onCheckedChange` *	`(next: boolean) => void`	—	Fires on every toggle.
`disabled`	`boolean`	`false`	Disable the Switch.
`alert`	`ReactNode`	—	Optional inline warning shown below the row when a precondition is unmet.
`alertVariant`	`"default" \| "destructive"`	`"default"`	Alert tint.

Design guidelines

✓ Do

Pair every ToggleRow with a description for non-obvious settings — the label is too short to teach.
Use the alert slot when a precondition is unmet. The user shouldn't have to wonder why the toggle won't take effect.

✗ Don't

Use ToggleRow for form fields that submit later. That's Checkbox + a Save button.
Render Save/Cancel after a ToggleRow. Toggles take effect immediately by definition.

Accessibility

<Label htmlFor> ties the label to the Switch — clicking the label toggles the Switch.
The alert (when shown) is <Alert> with the appropriate live-region role.

Switch — Underlying primitive.
SliderRow, SelectRow, NumberInputRow — Sibling row primitives for value-based settings.
Fieldset — Group multiple ToggleRows.

▶ Open ToggleRow stories in Storybook