Form Design Best Practices
Form validation, error messages, labels, autocomplete, input types, and layout based on WCAG, Nielsen Norman Group, Baymard Institute, and Material Design 3.
- Difficulty
- intermediate
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Use single-column layout. Always use visible <label> elements, never placeholder-only. Validate on blur, not on input. Show inline errors below fields. Use correct input types (email, tel) and autocomplete attributes. Mark required fields with asterisk.
Use When
- Designing form layouts
- Implementing form validation
- Writing error messages
- Setting up input fields with proper attributes
- Making forms accessible
Skip When
- Building search interfaces (different patterns)
- Creating data tables with inline editing
Form Design Best Practices
Form validation, error messages, labels, autocomplete, input types, and layout based on WCAG, Nielsen Norman Group, Baymard Institute, and Material Design 3.