Skip to content
6amDesign
v0.7.0 · PilotUse with AI
6am/Design system/Forms
Section reviewNeeds work1 met · 1 to improve · 1 to review

What is in place, what needs improving, and what still needs a closer look. Each status refers only to the criterion below; it is not approval of the whole section.

Implementation inventory · 2026-09-08 · v0.7.0 · Brand approval not recorded

  • Meets criterion
    The form example demonstrates validation and a clear outcome.

    The local demo includes required fields, validation feedback and a success state; it sends no data.

    View supporting material ↗
  • Needs work
    Production forms handle sending, failure and retry consistently.

    Document and share the real submission pattern, including preserved values and recovery.

  • Awaiting review
    Instructions and errors are clear with keyboard and screen readers.

    Review labels, error announcements, focus order and recovery in real form flows.

View all reviews · JSON ↗

Read-only record. Updates are versioned with the design system; copying a brief does not change a status.

06 / Forms

Ask only what is needed. Explain what happens next.

Visible labels, help beside the field and errors that show how to continue. The example below runs in the browser and sends no data.

No email will be sent in this example.

Local demo. Try submitting with empty fields.

How this form behaves

  1. Identifies required fields before submission.
  2. Explains the error beside the field and moves focus to the first problem.
  3. Preserves answers while the person makes corrections.
  4. Confirms the outcome and lets you try again.

In the product, the sending state must also prevent duplicate submissions, explain server failures and offer a retry.

<DsField
  id="email" name="email" type="email"
  label="Email" required autoComplete="email"
  hint="We will send the proposal to this address."
  error={errors.email}
/>