Skip to main content
MACAW

Settings

Templatebeta@macaw-ds/blocks · since 0.1.0

Structure for a settings or form page: a header, then card sections of labelled fields in one column.

A PageHeader, then a single column capped at max-w-form of Card sections, each a labelled region with a title, a description, labelled Inputs with optional hints and a CardFooter with its Save button. One primary per page: the last section's Save is primary and earlier sections' are secondary. Renders the main area only.

Filled by pages

When to use

  • Account, business, payout or notification settings.
  • Any form that splits into a few independently saved groups.

When not to use

  • A multi-step flow such as onboarding: one step per page with its own primary action.
  • A record with actions: use the record template.

Rules

Hard rules for this composition. Keep them when you adapt the copy in your repo.

  1. Render inside AppShell's main; never add a second main or a TopBar.
  2. The PageHeader title is the page's only h1; section titles are h2.
  3. Every Input has a visible label via Text as label with htmlFor; hints are linked with aria-describedby.
  4. Only one primary Button on the page: the last section's Save.
  5. Field ids are unique on the page.