When to use
Use for durable preferences. Group by job, not by component type.
Loading…
Find components, patterns, tokens, and docs
Pattern
Grouped product preferences with immediate vs confirmatory controls.
Preview
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use for durable preferences. Group by job, not by component type.
Don't force this layout onto a task with a different risk profile or a different set of fields.
Let someone change appearance and data without hunting through a single endless form.
Every field in the pattern keeps a visible label, and primary actions remain real buttons. Error copy sits next to the field that failed.
<form>
<Switch label="Dark mode" />
<Select label="Density" />
<Button variant="secondary">Reset demo data</Button>
</form>