U.S. Web Design System: Form templates
Documents accessibility guidance for forms with multiple controls, including DOM order matching visual order, validation aligned with inputs, fieldset and legend grouping, simple vertical layouts, required and optional field indicators, and avoiding confusing disabled states.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Complete complex form | Choose a complete complex form when many related configuration fields need one inspectable surface and cross-section comparison matters. | Section navigation changes the visible section without discarding draft values. | USWDS form-template guidance supports DOM order, fieldsets, legends, required indicators, validation messages aligned with inputs, and simple vertical ordering. |
| Single-page form | Choose a single-page form when the task has a short related set of fields that users should review together. | Tab order follows the same top-to-bottom order users see on screen. | USWDS form-template guidance supports multi-control form accessibility, field grouping, required indicators, validation alignment, and vertical field order. |
| Validation that clears user input | Flag this anti-pattern when validation failure, failed submit, server rejection, formatting, retry, reload, or route return clears safe user-entered values. | Validation messages name the problem and leave the user's value in place for editing. | USWDS form-template guidance supports aligned validation, field grouping, required indicators, and accessible recovery. |
Comparisons supported by this source
- Complete complex form vs single-page form vs multi-step form vs wizard
USWDS form-template guidance supports DOM order matching visual order, fieldsets, legends, required indicators, vertical layout, and validation aligned with inputs.
- Single-page form vs single-question page vs error summary vs text input
USWDS form-template guidance supports vertical multi-control forms, proper fieldset and legend grouping, validation alignment, and required/optional labelling.
- Validation that clears user input vs inline validation vs error summary vs single-page form vs autosave recovery vs error state
USWDS form templates support aligned validation, grouping, required indicators, and accessible recovery.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: U.S. Web Design System. Last checked: .