CatalystSubTextv1.0.0Ready for Production
A compact helper-text element for displaying secondary copy beneath form controls, with built-in size variants and danger state for validation messaging.
Prefer AI-assisted development?
Catalyst SubText is a lightweight typography primitive for rendering helper text, descriptions, and validation messages beneath form controls. It ships with three size variants, a danger state for validation error styling, and asChild composition support via Radix Slot.
Installation
npm install @pmi/catalyst-subtextimport { SubText } from '@pmi/catalyst-subtext';Sizes
Three sizes are available: sm, md (default), and lg.
Common Patterns
Danger State
Use the danger prop to style the text as an error for validation messaging.
With Icon
Compose SubText with an icon using className to create informative helper text.
API Reference
SubText
A <span> element styled with CVA size and danger variants. Use asChild to render a custom element via Radix Slot.
Prop
Type
Accessibility
SubText is designed to support WCAG 2.2 AA compliance when used correctly.
ARIA
- SubText renders as a
<span>by default — it carries no implicit ARIA role. - To associate SubText with a form control, set
idon the SubText and point the control'saria-describedbyto thatid. This ensures screen readers announce the helper or error text when the control receives focus. - For dynamically appearing error messages (e.g. after form submission), add
aria-live="polite"so assistive technologies announce the change without disrupting the user's flow. - When using the
dangerprop, the colour change alone is not sufficient to meet WCAG 2.2 AA (SC 1.4.1 Use of Colour) — always include descriptive text that communicates the error without relying solely on colour.
Choosing the Right Component
Use SubText for secondary descriptive copy that sits visually beneath another element. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A structured error or helper message tied to a form field | Helper Text |
| A visible label for a form control | Label |
| A short inline text badge or status indicator | Badge |
Related
Radio Cards
A card-style radio group component for presenting mutually exclusive options as visually rich selectable cards with title, optional label, and size variants.
Video Player
A Brightcove video player component with customizable controls and comprehensive styling options. Built on Brightcove React Player Loader with full support for captions, chapters, audio tracks, and picture-in-picture.