ValidationMessage
Single-line validation note with a matching icon, used by FormGroup, Fieldset, and standalone.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | ValidationTone | "error" | Validation tone: "error" | "warning" | "success". |
children | ReactNode | — | The message text. |
ValidationMessage extends HTMLAttributes<HTMLDivElement>. Renders as role="alert" for error tone and role="status" otherwise.
Examples
All tones
import { ValidationMessage } from "@solarius/onset";
import type { ValidationMessageProps, ValidationTone } from "@solarius/onset";
<ValidationMessage tone="error">Invalid email address.</ValidationMessage>
<ValidationMessage tone="warning">Password is weak.</ValidationMessage>
<ValidationMessage tone="success">Saved.</ValidationMessage>