CatalystRadiov0.4.4Ready for Production
A styled radio input with size variants and danger states, built on the native HTML radio element with CVA-based styling and Radix Slot composition.
Prefer AI-assisted development?
Deprecated Component
This component is deprecated and should not be used in new projects. Use RadioGroup instead — it provides built-in ARIA attributes, automatic label association, group context, and improved keyboard navigation.
Catalyst Radio wraps the native <input type="radio"> with CVA-based size and danger variants, design tokens, and Radix Slot composition — giving you a consistently styled radio input that fits the Catalyst design system with zero extra configuration.
Installation
npm install @pmi/catalyst-radioimport { Radio } from '@pmi/catalyst-radio';Sizes
Radio provides four size variants — xs, sm, md (default), and lg.
Common Patterns
Danger State
Use the danger prop to signal a validation error.
Disabled State
Set disabled to prevent interaction.
With Label
Pair Radio with Label using matching id/htmlFor for accessible form inputs.
With Label and Description
Add a description below the label with SubText.
As Child
Use asChild to delegate rendering to a custom element via Radix Slot.
API Reference
Radio
Prop
Type
Accessibility
Radio is designed to meet WCAG 2.2 AA standards.
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Moves focus to the radio input |
Arrow Keys | Moves selection between radios sharing the same name (native browser behavior) |
Space | Selects the focused radio |
ARIA
- The component renders a native
<input type="radio">so browsers providerole="radio",aria-checked, and group semantics automatically. - Always pair each
Radiowith aLabelvia matchingid/htmlFor— theRadioelement itself carries no visible label. - Group related radios with the same
nameattribute so arrow-key navigation works as expected. - Use
aria-describedbyto associate error messages whendangeris set.
Choosing the Right Component
Use Radio only when maintaining a legacy codebase. For all new work, prefer a component that manages group semantics natively:
| If you need… | Use instead |
|---|---|
| A radio group with ARIA and label management built in | RadioGroup |
| Card-style radio selection | RadioCards |
| A single on/off boolean toggle | Switch |
| Selecting multiple independent options | Checkbox |
Related
Radio Group
A set of checkable buttons where no more than one can be checked at a time, providing single-choice selection in forms and interfaces.
Select
A dropdown component for selecting options from a list, built on Radix UI Select with Catalyst design tokens and CVA size variants. Supports Single Select (one option) and Multi-Select (multiple options via checkboxes and tags) patterns.