Patterns
Forms & Validation
Max two columns, and only once the form is long enough to need it — a 3-field form is never split into columns just because two-column "looks more designed."
Short form — single column, never split
Long form — two columns once it earns them
Enter a valid email address.
Optional
Optional
Do
- Validate on blur, not on every keystroke.
- Show a red border plus a specific caption stating the problem and, where possible, how to fix it.
- Keep the primary submit button visually muted/disabled until every required field validates.
Don't
- Split a short form into two columns purely for visual balance.
- Show a generic "Invalid input" error message.
- Rely on a click-time alert instead of inline, per-field validation.