FormError
Field-level error message display with destructive styling and accessibility attributes. Automatically hidden when no error message is provided. Includes ARIA role="alert" for screen readers.
Live Preview
Basic
Basic Error Message
Simple error message below an input
This field is required
Conditional Display
Error only displays when content exists
No error message shown when content is empty
Validation
Email Validation
Real-time email validation with error messages
Real World
Multiple Form Fields with Errors
Form with various error messages
Username is already taken
Please enter a valid phone number
URL must start with http:// or https://
Usage Guidance
✓ When to Use
Use for displaying validation errors below form fields. Best used within FormField component or directly below inputs when custom layouts are needed.
✗ When NOT to Use
Don't use for general alerts (use Alert instead), success messages (use helper text with success styling), or form-level errors (use Alert at top of form).
Props
classNamestylechildrenonClickonChange