## Setting Row
ONE setting — a label (with an optional "?" help) plus a slotted DS control; inline (label-left / control-right) by default, or stacked (label above, control full-width) for a wide control.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-setting-row> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- label: string, default —. The setting name — a noun phrase in sentence case
- help: string, default —. Optional guidance — renders the "?" help trigger (circled question glyph) after the label; the tooltip carries the text
- layout: inline | stack, default inline. inline: label-left / control-right (space-between). stack: label above, control full-width — for a wide control
- disabled: boolean, default false. Dims the label to text-disabled and sets aria-disabled; the slotted control disables itself on its own element
- control: slot, default —. The DS control (slot="control") — an existing element like <aha-switch> / <aha-checkbox> / <aha-input>; reuse, never a re-implemented control
Tokens: font-product, text-default, text-tertiary, text-disabled.
Use when: Setting row (inline) (a compact control — a switch, a checkbox, a short input — sits to the right of its label); Setting row (stack) (a wide control — a textarea, a wide select — needs the full row width below the label); Section header (the title of the GROUP these rows sit under).