Zetta v0.10

Patterns

Form layout

Field, label, helper and error are small parts; the pattern is how they stack into a form a person can move through quickly. One column, clear labels above inputs, helper text where it earns its place, and errors that say what to do.

A form

Composed from Input, Select, Checkbox and Button.

Shown across the dashboard. You can change it later.
Use lowercase letters, numbers and hyphens only — no spaces.
Options

Rules of thumb

  • One column. Labels sit above inputs, left-aligned — never floating or inside the field.
  • Mark required fields with the required asterisk; don't mark every optional one. Helper text is for guidance, not repetition of the label.
  • Errors attach to the field, say what's wrong and how to fix it, and wire aria-invalid + aria-describedby so they're announced.
  • The primary action is the last button and uses the primary variant; cancel is the lower-emphasis outline beside it.

Where the spec is silent

Zetta specifies the field, error and invalid states, but not full form-validation UX — when to validate (on blur vs submit), inline vs summary errors, async checks. Pick a consistent approach and apply it; see Known gaps.