CatalystHelperTextv1.1.5Ready for Production
A text component for displaying supplementary information, hints, and error messages in forms.
Prefer AI-assisted development?
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.
Installation
npm install @pmi/catalyst-helper-textimport { HelperText } from '@pmi/catalyst-helper-text';Sizes
Common Patterns
With Icon
Integrates icons with helper text using the asChild pattern.
Danger State
Uses the danger prop to indicate errors or validation issues.
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.
Danger State: Decorative Icon with Visually Hidden Error Prefix
When using the danger prop, always pair the helper text with an error icon and a visually-hidden label that reads "Error:". Without this, screen reader users hear only the message text — which may sound advisory rather than blocking.
Why this matters:
| What the screen reader announces | How it sounds |
|---|---|
| "Please confirm your project management training" | Sounds like a reminder |
| "Error: Please confirm your project management training" | Clearly a blocking error |
Warning/Info/Caution States
Depending on what helper text is trying to accomplish, a similar hidden label can be added to other states.
For example, for a warning state: <span className="sr-only">Warning: </span>
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 |