Full-Form UX Policy (Strict)¶

This rule defines the required UI and accessibility contract for full forms across the monorepo.

Scope¶

• Applies to full forms (auth, account, onboarding, admin create/update/invite flows, and multi-field editable sections).
• Excludes search/filter bars used for data listing UX.
• Search/filter bar conventions are governed by 058-search-input-ux-policy.mdc.

Core Contract¶

• Full-form sections must be horizontally centered.
• Full forms must use a constrained shell width for readability (max-w-sm or max-w-md pattern).
• Full forms must render in a visible outlined, rounded container.
• Field spacing must be consistent across forms (gap-4 form flow and gap-2 field groups pattern).
• Every input control (input, select, textarea) must have a visible label.

Accessibility Requirements¶

• Every form control must have a programmatic label association (label + htmlFor / matching id).
• Validation and helper text must be linked with aria-describedby when present.
• Error states must remain user-safe and readable, without exposing sensitive internals.

Multi-Section Page Requirement¶

• If a page has multiple editable sections, each section must independently satisfy this full-form contract.
• Keeping multi-section page structure is allowed; each section must still be centered, constrained, and outlined.

Exceptions¶

• Any exception must be explicitly documented in the owning feature/app rule with product justification.
• Exceptions must preserve accessibility and clear labeling requirements.

Validation¶

• Add or update tests for changed form components to assert:
  • centered constrained shell,
  • outlined rounded container,
  • visible labels for controls.
• Run full repository validation after form UX changes: npm run check.