Forms & Inputs

Radio Button

Used to select a single option from a set of mutually exclusive choices. Supports selected/unselected, two sizes, disabled state, and an optional visible label. Selected state uses brand violet (#892CDC).

V 1.0View in Storybook
Controls
Checked
Size
Disabled
Label
Helper Text

Variants

SizeSmall (16px) and Large/Medium (24px) radio buttons
Option A
Option B
size = sm
Option A
Option B
size = lg
SelectionUnselected vs selected state
Helper Text
Checked = False
Helper Text
Checked = True
State — All statesDefault, Pressed, Enabled, Disabled
Option
Default
Option
Pressed
Option
Enabled
Option
Disabled
Option
Disabled (on)

Props

Name
Type
Default
state*
'default' | 'pressed' | 'enabled' | 'disabled'
'default'
selection*
boolean
false
size*
'medium' | 'small'
'medium'
label
string
—
onChange
(selected: boolean) => void
—

Code

import RadioButton from '@/src/components/RadioButton/RadioButton'

// Unselected
<RadioButton state="default" selection={false} size="medium" label="Option A" />

// Selected (brand violet)
<RadioButton state="enabled" selection={true} size="medium" label="Option A" />

// Disabled
<RadioButton state="disabled" selection={false} size="medium" label="Option A" />

// Controlled
<RadioButton
  state={selected ? 'enabled' : 'default'}
  selection={selected}
  size="medium"
  label="Option A"
  onChange={setSelected}
/>

Usage guidelines

When to use
  • Use when the user must pick exactly one option from a set of two or more mutually exclusive choices.
  • Use the Large/Medium size for standard form contexts; Small for dense or compact layouts.
  • Always group radio buttons — a lone radio button should be a toggle or checkbox instead.
When not to use
  • Don't use radio buttons when multiple selections are allowed — use checkboxes instead.
  • Don't use a single radio button in isolation.
  • Don't substitute Disabled for removing an option — if unavailable, explain why.