Form Helper Text
Form Helper Text
Field-level helper text with a state — info/success/warning/error, not just neutral-or-error like plain form descriptions. Inside an RHF-managed FormField, prefer FormMessage (renders the actual validation error automatically); reach for this when you need success/info states, or a helper text outside that context.
import { FormHelperText } from "@pompeitech/vesuvius-ui";Variants
We'll never share your email.
Your plan renews on the 1st.
Username is available.
This action can't be easily undone.
Password must be at least 8 characters.
Paired with a field
Username is available.
API
FormHelperText
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "info" | "success" | "warning" | "error" | "default" | Sets both the text color and the leading icon. |
showIcon | boolean | true | Ignored for "default", which has no icon regardless. |
Plus every native <p> prop.
Accessibility
Purely visual coloring/iconography — it carries no ARIA role of its own. When paired with a field outside RHF, associate it via aria-describedby pointing at its id so assistive tech reads it alongside the field; inside an RHF FormField, prefer FormMessage/FormDescription, which wire this automatically.