## Settings list
A schema-driven group of settings rows — semibold label left (with a "?" help tooltip), control right — reusing existing DS controls.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-settings-list> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings, dashboard.
Props:
- schema: object, default —. (list, property) Settings schema { sections:[{ label, rows:[{ key, label, description?, layout?, consequence?, control }] }] } — an array is treated as one section's rows; renders rows and reuses DS controls. Also settable as a JSON `schema` attribute for the build-free HTML form A row may declare visible_if (structured `visibleIf:{key,equals?,in?,not?}` or the Shopify string `visible_if:"{{ settings.<key> }}"`) — the row is shown only when its trigger is on and hidden when off, rendered nested (indented, de-emphasised).
- label: string, default —. Group header (a 1–3 word noun phrase); on <aha-settings-item> it is the setting name. Ignored when a schema supplies section labels
- description: string, default —. (item / schema row) Guidance text — rendered as the "?" HELP TOOLTIP after the label (DS <aha-tooltip help>), NOT a standing line. Default: no help glyph
- consequence: string, default —. (item / schema row) RARE opt-in must-see-consequence line shown as a standing line under the label (e.g. 'This cannot be undone.') — default none
- layout: 'inline' | 'stack', default inline. (item / schema row) inline = label left / control right (align-items:center, space-between, gap 12); stack = label above / control full-width (column, gap 8) for wide controls (textarea / wide select)
- control: slot | schema, default —. (item) The DS control on the right — <aha-switch>, <aha-checkbox>, <aha-input>… slotted by hand, or named in a schema row's `control:{ type }` and instantiated for you
- density: 'default' | 'compact', default default. (list) Row/group rhythm. compact tightens the spacing (16 between groups, 8 between siblings) — never adds lines or boxes
- disabled: boolean, default false. (item / schema row) Dims the label to text-disabled, disables the reused control, sets aria-disabled
- locked: boolean, default false. (schema row) Plan-gates the row: stays visible, its control becomes the shared Paywall crown badge → upsell. Pair with `plan` ('essential'|'pro') and `feature` (the upsell label)
Tokens: text-default, text-tertiary, text-disabled, color-primary.
Use when: Settings list (a group of related on/off or choice settings in a panel, page or drawer); Form (values are submitted together with validation and a submit step); a single Switch/Select (one setting that applies on its own).