CatalystForm utilities
HelperTextv1.1.3Ready for Production
A text component for displaying supplementary information, hints, and error messages in forms.
Prefer AI-assisted development?
This documentation is available via the Catalyst MCP Server. Learn how to connect →
Catalyst HelperText is a simple text component that goes with built-in design tokens, CVA variants, and accessibility defaults — giving you a production-ready component with zero configuration.
Preview
Helper text
Installation
npm install @pmi/catalyst-helper-textimport { HelperText } from '@pmi/catalyst-helper-text';Sizes
Preview
Helper textHelper textHelper text
Common Patterns
With Icon
Integrates icons with helper text using the asChild pattern.
Preview
Helper text with icon
Danger State
Uses the danger prop to indicate errors or validation issues.
Preview
Something went wrong
API Reference
Extends all standard HTML span element props.
Prop
Type
Accessibility
HelperText is designed to meet WCAG 2.2 AA standards. The section below documents ARIA semantics.
ARIA
- Provide HTML
idto associate the helper text with form fields usingaria-describedby.
Choosing the Right Component
Use this component when you need supplementary information (hints or status messages) in forms. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A form field label | Label |
| An alternative text styling component | SubText |
| A text input field | TextField |