Skip to main content
UI/UX components critical

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.

Tags

forms validation accessibility autocomplete error-messages labels

Discussion