For Designer

Components/Inputs

Radio Group

Radio groups let people pick exactly one option from a short list where every choice should stay visible

Variants
16
Component sets
2

Playground

Playground

Pick a variant, then click an option in the preview to select it

Radio-group-label · Position=Left · Selected=Option 1 · Disable=false

Pastes into Figma as editable auto layout layers with Unictive values, click the button or press ⌘C to copy

Sizes

Sizes

Medium sits next to body text and in forms, Small fits dense tables and filters

States

States

Selected thickens the ring to 4 px in brand blue. Disabled keeps the shape and greys it out

With label

With label

Radio-group-label adds a label, an optional description, badge and link button. Position sets which side the radio sits on

Usage

When to use

Use when

  1. People must pick exactly one option and comparing them side by side helps
  2. There are two to five options, short enough to show them all at once
  3. One option is a sensible default, select it from the start

Avoid when

  1. People can pick more than one option, use a Checkbox
  2. The list is long or the options are obvious, use a Dropdown
  3. A single setting turns on or off right away, use a Switch

Guidance

Do and don’t

Standard deliveryExpress deliveryPick up in store
Do

Stack options vertically and keep each label short, so the group scans in one pass

I agree to the terms
Don’t

Don’t leave a single radio on its own, people can’t unselect it

Specs

Tokens and specs

PropertyTokenValue
Control size—20 / 16
Circle—16 / 12.8 px
Ring, unselected1 px #A3A3A3
Ring, selected4 px #1868D0
Disabled ring#D1D1D1
Label width—360 px
Control to text12 px
Label to description4 px
Text to link button8 px
Label styleInter Medium 14/20
Description styleInter Regular 12/16
Link button styleInter Medium 12/16
Badge#ECF0FE on #1868D0
Esc