Radio

atoms

Radio button for a radio group. Wrapped by RadioGroup which manages arrow-key navigation between siblings.

ARIA Role: radio

Demo

Demo for Radio (atoms)

Radio button for a radio group. Wrapped by RadioGroup which manages arrow-key navigation between siblings.

Props

PropTypeRequiredDefaultDescription
valuestringYes—
checkedbooleanYes—
labelstringYes—

TypeScript Interface

interface RadioProps {
  value: string;
  label: string;
  checked: boolean;
  onChange: (value: string) => void;
  disabled?: boolean;
}

Assertions (NASA Rule 5)

  • [type]value and checked required(NASA Rule 5)
  • [aria]role='radio' aria-checked; must be inside role='radiogroup'(WAI-ARIA Radio Pattern)

Usage

Import

import { Radio } from '@epasslive/design-system'

Basic

<Radio />

With Variants

<Radio variant="primary" size="md" />