Radio

Single choice from multiple options

InputsStable

Preview

Interactive preview of the Radio component with different variants.

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { RadioGroup, Radio, Label } from 'apex-design-system';

Basic Usage

tsx
<RadioGroup defaultValue="option1">
  <div className="flex items-center gap-2">
    <Radio value="option1" id="r1" />
    <Label htmlFor="r1">Option 1</Label>
  </div>
  <div className="flex items-center gap-2">
    <Radio value="option2" id="r2" />
    <Label htmlFor="r2">Option 2</Label>
  </div>
</RadioGroup>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source