Switch

v1.2.0

Ready for Production

Catalyst Switch extends Radix UI's Switch primitive with built-in CVA size variants, design-token styling, and dark-mode support — giving you a fully accessible, production-ready toggle with zero configuration.

Installation

npm install @pmi/catalyst-switch

import { SwitchRoot, SwitchThumb } from '@pmi/catalyst-switch';

Variants

Disabled

Switches can be disabled to prevent user interaction while preserving their visual state.

Sizes

Switch supports three size variants: sm, md (default), and lg.

Common Patterns

Precomposed Label

Associate a Label with the switch via matching id / htmlFor for full accessibility.

Precomposed Label and HelperText

Combine Label and HelperText to provide a description below the label.

API Reference

Switch is a compound component built on Radix UI Switch. The sections below summarize the API surface for each part.

SwitchRoot

The root container that manages checked state and size context. Accepts all standard Radix Switch Root props and forwards ref.

SwitchThumb

The indicator that moves when the switch is toggled. Accepts all standard Radix Switch Thumb props and forwards ref.

Accessibility

Switch is designed to meet WCAG 2.2 AA standards.

Keyboard Interactions

ARIA

• Radix renders role="switch" and keeps aria-checked in sync with the checked state automatically.
• aria-disabled is set when disabled is true.
• Always associate a visible label via id / htmlFor (see With Label pattern). If no visible label is present, provide aria-label directly on SwitchRoot.
• Catalyst adds the visual token styling; Radix provides all underlying accessibility semantics.

See the Radix Switch accessibility docs for the full baseline behavior.

Choosing the Right Component

Use Switch for binary on/off settings that take effect immediately without requiring form submission. Reach for a different primitive when:

Related

• Checkbox
• Radio Group
• Label
• SubText