Label

v1.2.5

Documentation Under Review

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-label

import { 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.

LabelRoot

Container component for composed label layouts. Accepts the standard props for HTMLElement.

LabelSlot

Additional content slot for composed labels (e.g., character counts, optional indicators). Accepts the standard props for HTMLElement.

Accessibility

Label is designed to meet WCAG 2.2 AA standards. The sections below document keyboard behavior and ARIA semantics.

Keyboard Interactions

The Label component is display-only and has no keyboard interactions of its own.

ARIA

• Use htmlFor to associate the Label with a form control. Its value must match the control's id.
• When the Label wraps a form control, the association is created automatically.
• The associated Label provides the accessible name for the form control.

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:

Related

• SubText
• TextField
• Checkbox
• RadioGroup