Forms
Forms are the primary way users input data. A well-structured form reduces cognitive load, prevents errors, and guides users toward successful submission. This pattern covers layout, validation, field grouping, and multi-step flows.
Components used
Anatomy
Best practices
Layout
Use a single-column layout for most forms — it reduces eye movement and works across all screen sizes. Place labels above inputs, not beside them. Group related fields with a section heading and divider.
Validation
Validate on blur for individual fields and on submit for the full form. Show inline errors below each field with aria-describedby linking the error to the input. When submission fails, show an Error Summary at the top of the form with anchor links to each invalid field.
Required fields
Mark required fields with a visual asterisk (*) in the label and aria-required="true" on the input. If most fields are required, mark optional fields instead — "Email (optional)".
Progressive disclosure
Only show fields when they become relevant. For example, show "Company name" only when the user selects "Business" as account type. This reduces initial cognitive load.
Multi-step forms
Use Stepper to show progress across steps. Validate each step before allowing progression. Allow users to navigate back to previous steps without losing data. Show a summary before final submission.
Button placement
Place the primary action button (Submit, Save) right-aligned at the bottom of the form. Place Cancel as a link or tertiary button to the left. Never use "Reset" — it destroys user work without confirmation.