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
accessibilityLabel string - Accessibility label for screen readers
testID string - Test ID for testing purposes

Variants

Sizes

Three size options for different contexts.

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

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
      checked={selected === 'free'}
      onCheckedChange={() => setSelected('free')}
    />
    <span>Free</span>
  </label>
  <label>
    <Radio
      checked={selected === 'pro'}
      onCheckedChange={() => setSelected('pro')}
    />
    <span>Pro</span>
  </label>
</fieldset>

Card-Style Radio Group

Radio buttons styled within card containers.

Accessibility

  • Screen Reader: Announces radio state (checked/unchecked), disabled state, accessibilityLabel, and accessibilityRole.
  • WCAG Compliance: Meets AA standards.

Best Practices

  • Always use radio buttons in groups of 2 or more options
  • 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