# Setting group
> Generated from setting-group.contract.json — do not edit by hand.

The settings GROUP container — an optional semibold header (with a "?" help and an action slot) over a column of rows — that bakes in the panel spacing scale so gaps come out right automatically.

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

Surfaces: editor, settings, dashboard.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | string | `—` | Optional group header (a 1–3 word noun phrase). When set, renders a semibold header and becomes the group's aria-label |
| `help` | string | `—` | Optional guidance shown as the "?" help tooltip (composed DS <aha-tooltip help>) after the header label — never a standing line |
| `tone` | 'default' | 'danger' | `default` | danger → a danger-zone group, dropped 48px below the previous group (overrides the automatic 32). Spacing only — the danger CTA styling lives on the button |
| `action` | slot | `—` | Forwarded to the header, right-aligned — e.g. a small link or button beside the group title |
| `(default slot)` | slot | `—` | The setting rows / sub-groups; they stack 16px apart automatically |

## Visual standard (measured)
- Rows: column · 16px between sibling settings (the settings scale) · header→rows 12px
- Between groups: 32px automatically (:host(:not(:first-child))) — no divider, no wiring
- Danger zone: tone=danger → 48px above (overrides the 32); the danger CTA styling lives on the button, not here
- Header: optional (label) · 14/21 Semibold (600) #1A1A1A · optional "?" help (composed <aha-tooltip help>) · action slot pushed right (margin-left:auto)
- Structure: no divider lines, no card/box — spacing only, white background

## When to use
- **Setting group** — a titled cluster of related settings in a panel — it bakes in the 16/32/48 spacing scale
- **Sub setting group** — dependent child settings that appear under one parent toggle (indent + tight gap)
- **Settings list** — you want the whole surface rendered from a schema (rows + reused DS controls) in one element

Reach for a group whenever you place more than one setting in a panel — it removes the temptation to eyeball gaps or draw a divider. Title it with a noun phrase; put guidance in the "?" help, not a standing line. Never wrap plain settings in a card or separate them with a line — hierarchy is spacing. Reserve tone="danger" for a genuine danger zone (delete / reset), and put the destructive styling on the CTA button inside it.