Form Validation
A form component with inline error messages and accessible validation
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsConnect error messages to inputs
Use aria-describedby to link error messages to their corresponding inputs.
Set aria-invalid on invalid inputs
Invalid inputs must have aria-invalid="true" set programmatically.
Mark required fields
Required fields must use required or aria-required="true", plus a visual indicator.
Move focus to first error on submit
When form submission fails, move focus to the first invalid field or an error summary.
Label all inputs
Every input must have an accessible label — never rely solely on placeholder.
Provide specific error messages
Error messages must clearly describe what is wrong and how to fix it (e.g., "Enter a valid email address").
Show an error summary
For forms with multiple errors, display a summary at the top listing all errors.
Show format hints
Provide format hints (e.g., "MM/DD/YYYY") for fields that require a specific format.
Do not indicate errors with color alone
A red border alone does not communicate an error to color-blind or screen reader users.
Do not validate in real-time aggressively
Triggering errors before users finish typing causes frustration. Validate on blur or submit.
Do not use placeholder as a label
Placeholder text disappears on focus, causing users to lose context.
Additional checks
Use helperText and error props together
Set error={true} on TextField and provide the error message via helperText for linked error announcements.
Code sample
Implementation notes
- –The error prop on MUI TextField automatically sets aria-invalid.
- –helperText renders as FormHelperText and is automatically connected via aria-describedby.
- –The required prop automatically adds an asterisk to the label and sets aria-required.