Atom

Radio

A radio button component for single-select options within a group. Supports multiple sizes and states.

Overview

The Radio component is a form control that allows users to select exactly one option from a set of mutually exclusive choices. Radio buttons should always be used in groups of two or more options.

Props

Prop Type Default Description
checked boolean false Whether the radio is selected
onCheckedChange (checked: boolean) => void - Callback fired when the radio state changes
size 'sm' | 'md' | 'lg' 'md' Size variant of the radio button
disabled boolean false Whether the radio is disabled
name string - Name attribute for radio group association
value string - Value attribute for form submission

Variants

Sizes

Three size options for different contexts.

<Radio size="sm" />
<Radio size="md" />
<Radio size="lg" />

States

Unchecked and checked states with smooth animation.

Examples

Radio Group

Typical usage with multiple mutually exclusive options.

Select a plan: 
<fieldset>
  <legend>Select a plan:</legend>
  <label>
    <Radio
      name="plan"
      checked={selected === 'free'}
      onCheckedChange={() => setSelected('free')}
    />
    <span>Free</span>
  </label>
  <label>
    <Radio
      name="plan"
      checked={selected === 'pro'}
      onCheckedChange={() => setSelected('pro')}
    />
    <span>Pro</span>
  </label>
</fieldset>

Card-Style Radio Group

Radio buttons styled within card containers.

Accessibility

  • Role: Uses native radio input for proper semantics.
  • Keyboard Support: Space/Enter to select, Arrow keys to navigate within group, Tab to move focus.
  • Screen Reader: Announces radio state (checked/unchecked), label, and group context.
  • Focus Management: Visible focus ring on keyboard navigation.
  • WCAG Compliance: Meets AA standards.

Best Practices

  • Always use radio buttons in groups of 2 or more options
  • Group related radio buttons with a shared name attribute
  • Use <fieldset> and <legend> to provide group context
  • Use Checkbox instead when users can select multiple options
  • Consider using Select/Dropdown when there are more than 5 options
  • Always provide a visible label for each radio button