Text Input
A form control for accepting text input from users
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsLabel association required
Use <label htmlFor> or aria-label/aria-labelledby to associate a label with the input.
Connect error messages
Link error messages to the input via aria-describedby and set aria-invalid="true" when invalid.
Mark required fields
Use required or aria-required="true" to indicate that a field is required.
Color contrast 4.5:1
Input text and background must meet a minimum contrast ratio of 4.5:1.
Do not use placeholder as the only label
Placeholder cannot replace a label — always use a visible label alongside the input.
Add autocomplete attribute
Set appropriate autocomplete values on personal data fields (name, email, etc.).
Connect helper text
Link hint or helper text to the input via aria-describedby.
Do not use placeholder as a label
Placeholder disappears on focus, leaving the user without context.
Do not indicate errors with color alone
Do not rely on a red border alone; always provide a text error message.
Additional checks
TextField helperText and aria connection
MUI TextField's helperText is automatically connected via aria-describedby. Do not set FormHelperText id manually.
Verify InputLabel shrink behavior
Confirm that the label is still accessible to screen readers when a floating label shrinks.
Code sample
Implementation notes
- –MUI TextField automatically handles aria connections between label, input, and helperText.
- –When the error prop is true, helperText automatically receives role="alert".
- –Verify the border color contrast for variant="outlined" (minimum 3:1).