Validation
Validation
Validation displays error messages below form inputs with customizable styling.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Font Size | 12-14px |
| Color | Red (error), Orange (warning) |
| Spacing | 4-8px from input |
| Icon Size | 16px |
States
Section titled “States”Red color with error/warning icon
Orange color with info icon
Green color with checkmark (optional)
Style Variants
Section titled “Style Variants”Simple text with red color
Bold text with stronger emphasis
Highlighted with colored background
Left border accent for visual emphasis
Message Guidelines
Section titled “Message Guidelines”| Type | Example |
|---|---|
| Required | ”This field is required” |
| Invalid | ”Please enter a valid email” |
| Too short | ”Must be at least 8 characters” |
| Mismatch | ”Passwords do not match” |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Form validation errors
- Input field error messages
- Custom error styling needed
- Inline error feedback
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Provide clear, actionable messages | Use vague error messages |
| Position close to related input | Show errors before user interacts |
| Use consistent message phrasing | Cluster multiple errors |
| Show after user interaction | Use for critical alerts |