Form Patterns

Validation

• Validate on submit (and optionally on blur); don’t show errors while someone is still typing.
• Pass each message to its Field error: the control turns red, gets aria-invalid, and the message is announced and added to its description.
• Write errors as instructions ("Enter an amount", "The minimum payment is $1.00").
• Keep the submit button enabled; disabled buttons don’t explain what is missing.
• Use noValidate on the form when you show your own messages, so the browser’s bubbles don’t compete.

Layout

• One column by default; pair short related fields (amount + date) in a sm:grid-cols-2 grid so they stack on phones.
• Labels above controls, 16px between fields, primary action at the bottom left.
• Mark required fields with required (asterisk + aria-required), or mark the optional ones in the description, not both.

Usage

• Use this structure for settings, checkout, invite and create forms.
• For filter bars, skip Fields and give each control an aria-label (see Date Range Picker).

Accessibility

• Every control has a visible label from Field; the checkbox brings its own label, so its Field hides the label and only supplies the error.
• Errors live in polite live regions; the success message is a role="status" region.
• The whole form works with the keyboard: Tab between fields, the pickers follow their WAI-ARIA patterns, Enter submits.