Forms
Validation Message
Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.
Type (Error/Warning/Success/Info) — 4 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-13
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.2.0-beta
Known open questions
- Info type icon swap to dedicated Info icon is pending Figma confirmation.
Live preview
ValidationMessage pairs icon and text. Meaning must never rely on color alone.
Static messages (announce=off)
Enter a valid email address.
This action cannot be undone.
Profile saved successfully.
We will never share your email.
How are validation errors announced?
Dynamic error with assertive announcement
Static documentation messages use announce="off" so they do not speak on initial page load.
Purpose
Inline feedback text paired with a form field, communicating error, warning, success, or informational status.
Anatomy
ValidationMessage = Phosphor icon + message text. Icons are decorative; meaning comes from text.
Variants and states
error · warning · success · info
When to use
Directly below or near a Form Field Wrapper to explain a field's Error state, or to confirm successful validation.
When not to use
Page-level or app-level notifications unrelated to a specific field (use Alert or Toast instead).
Accessibility
Must be programmatically associated with its field via aria-describedby, not just visually placed nearby.
Keyboard behavior
Not focusable. Live announcement behavior is controlled by the announce prop.
Common mistakes
Relying on icon/color alone to convey meaning without real explanatory text.
Properties
Type as variants. Message (text).
Tokens used
semantic/action/dangersemantic/feedback/warningsemantic/feedback/successsemantic/feedback/info
Known limitation
Info type currently reuses the WarningCircle icon — Icon/Info now exists and should be swapped in.
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "error" | "warning" | "success" | "info" | "error" | Visual and semantic feedback type. |
| announce | "off" | "polite" | "assertive" | "off" | Live region behavior. Use assertive only for dynamically introduced errors. |
| id | string | — | Used by aria-describedby on the related control. |
React example
Copy React example
import { ValidationMessage } from "@/components/ui/ValidationMessage";
export function Example() {
return (
<ValidationMessage id="email-error" type="error" announce="assertive">
Enter a valid email address.
</ValidationMessage>
);
}