CatalystLabelv1.2.3Documentation Under Review
Form labels with size variants and state management for product contexts.
Prefer AI-assisted development?
The Label component is built on Radix UI Label primitive, providing accessible form labels with support for different sizes, states (danger, disabled), and composition patterns for complex label layouts. It supports Catalyst design tokens and dark mode.
Installation
npm install @pmi/catalyst-labelimport { Label, LabelRoot, LabelSlot } from '@pmi/catalyst-label';Sizes
Common Patterns
Danger State
Use the danger prop to indicate error states or validation issues.
Disabled State
Disabled labels have reduced opacity to indicate inactive form fields.
Composed Labels
Use LabelRoot and LabelSlot for complex label layouts with additional content like character counts or optional indicators.
API Reference
Label
Accepts all standard Radix UI Label props, adding size variants and unstyled prop.
Prop
Type
LabelRoot
Container component for composed label layouts. Accepts the standard props for HTMLElement.
Prop
Type
LabelSlot
Additional content slot for composed labels (e.g., character counts, optional indicators). Accepts the standard props for HTMLElement.
Prop
Type
Accessibility
Label is designed to meet WCAG 2.2 AA standards. The sections below document keyboard behavior and ARIA semantics.
ARIA
- Automatically applies the correct labelling when wrapping controls or using the
htmlForattribute.
See the Radix UI Label accessibility docs for inherited baseline behavior.
Choosing the Right Component
Use this component when you need accessible form labels. Reach for a different primitive when:
| If you need� | Use instead |
|---|---|
| Supplementary information | HelperText |
| An alternative text styling component | SubText |