Code example
Common baseline
Label 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.
Design system implementations
Additional checks
helperText is auto-connected via aria-describedby
MUI TextField renders helperText as FormHelperText and connects it via aria-describedby automatically. Do not set a manual id on FormHelperText.
Use slotProps.htmlInput for native input attributes
Pass autoComplete, aria-required, and other HTML input attributes via slotProps.htmlInput. The inputProps prop is deprecated in MUI v7.
Use error + helperText to communicate errors
When the error prop is true, helperText color changes to the error color. Provide the error message in helperText.
Code sample
Implementation notes
- –MUI TextField automatically wires aria connections between InputLabel, input, and helperText.
- –When error={true}, the helperText text color changes to indicate an error state.
- –Verify that the outlined variant border color meets the minimum 3:1 contrast ratio against the background.