Skip to content
Download assets

Radio

Radio buttons offer a short list where exactly one option is chosen. Choosing one clears the option chosen before it.

What it is

First interview
First interview

When to use it

Use radio buttons for two to five options that someone should compare before choosing one.

With more options, or too little room, use a select. When the options change a view or a setting at once and each is a word or two, a segmented control is shorter. When any number may be chosen, use checkboxes. For one setting that is on or off, a checkbox or a switch says it more clearly than two radio buttons.

Anatomy

The circle has the fill and the edge of the checkbox. A description under an option is a full sentence with a full stop: give one to every option in the group, or to none.

Circle
16 px
--radius-full
Fill
white in light, control gray in dark
Edge
1 px, gray in light, faint white in dark
Chosen
brand blue fill, no edge
--brand-blue
Dot
6 px, white
--on-brand
Label
14 px on a 20 px line
--text
Description
13 px on an 18 px line
--text-muted
Gap to the label
8 px
--space-2
Space between options
8 px with a mouse, none on touch
--space-2
Row height on touch
44 px

The first choice and the order

Start with one option chosen: the safe and usual answer, placed first. For a first interview that is a video call, which works wherever the candidate lives.

Order the rest from the simplest to the most complex, or from the safest to the riskiest. When choosing nothing is a valid answer, offer it as an option, such as None.

States

  • Rest
  • Focus
  • Chosen
  • Disabled
  • Error
  • Rest
  • Focus
  • Chosen
  • Disabled
  • Error
Focus ring
2 px, 2 px outside the circle
--focus-ring
Disabled
the circle at half strength, the label muted
--text-muted
Error edge
1 px
--error

Stacked or in a row

Stack options one above the other. Set them in a row only for two or three short labels, and give every option the width of the longest so the circles line up. Below 640 px a row stacks.

  • Contract
    Stacked
  • Contract
    In a row

Keyboard and screen readers

The group is one stop on the Tab ring. A screen reader hears the group label, the option, its place in the group and whether it is chosen.

Tab
enters the group at the chosen option, or the first
Arrow keys
move to the next or previous option and choose it, wrapping at the ends
Space
chooses the focused option when none is chosen
Shift and Tab
leaves the group

Writing the labels

Write labels as short fragments in sentence case with no full stop. Let a long label wrap onto a second line rather than cut it with an ellipsis. The group label ends without a colon.

NextSwitch

Radio

Chooses exactly one option from a short list shown in full.

  • Kind: component
  • Page: https://design.werklist.com/components/radio
  • Version: 2.1.2

When to use it

  • Two to five options the reader compares before choosing.
  • Options that need a sentence or a description each.
  • A choice inside a form that applies on submit.

When not to use it

  • More than five options or little room: use Select.
  • Two to five one word values that apply at once: use SegmentedControl.
  • Any number of choices: use Checkbox.
  • One on or off setting: use Checkbox or Switch.

Rules

  • Two to five visible options, one chosen from the start.
  • A long list, such as a country of origin, is a Select or a Combobox.
  • One setting that is on or off is one Checkbox or Switch, not two radio buttons for Yes and No.

Anatomy

  • Circle: 16 px (--radius-full)
  • Edge at rest: 1 px inset, rgba(13, 18, 40, 0.55) in light, rgba(255, 255, 255, 0.2) in dark, as on the checkbox
  • Fill at rest: #ffffff in light, --surface-control in dark, as on the checkbox
  • Fill chosen (--brand-blue)
  • Dot: 6 px, centered (--on-brand)
  • Label: 14 px on 20 px, weight 400 (--text)
  • Description: 13 px on 18 px, directly under the label (--text-muted)
  • Gap circle to label: 8 px (--space-2)
  • Space between options: 8 px with a fine pointer, 0 with a coarse pointer, where rows are 44 px (--space-2)
  • Row layout: two or three short options, each as wide as the longest, 24 px apart, stacked below 640 px (--space-6)
  • Group label: a field label on a legend
  • Focus ring: 2 px, offset 2 px (--focus-ring)

States

  • rest: the flat circle inside its 1 px edge
  • focus visible: ring outside the circle (--focus-ring)
  • chosen: brand fill with a white dot (--brand-blue, --on-brand)
  • disabled: circle and dot at half strength, label in muted ink (--text-muted)
  • invalid: error edge, with the message in the error line of the group (--error, --error-ink)

Keyboard

  • Tab: Enters the group at the chosen option, or the first when none is chosen
  • Arrow keys: Move to the next or previous option and choose it, wrapping at the ends
  • Space: Chooses the focused option when none is chosen
  • Shift+Tab: Leaves the group

Accessibility

  • Native radio inputs sharing a name, inside a fieldset with a legend.
  • Each option is a label element.
  • The group is one Tab stop.
  • Screen readers announce the legend, the option, its position and its state.

Content

  • Fragments in sentence case, no full stop.
  • Long labels wrap and are not truncated.
  • Descriptions are sentences with a full stop, on every option or on none.
  • The group label ends without a colon.
  • The safe, usual option comes first and starts chosen.

Tokens

  • --surface-control
  • --text-muted
  • --text
  • --brand-blue
  • --on-brand
  • --error
  • --radius-full
  • --space-2
  • --space-6
  • --focus-ring

JSON

{
  "title": "Radio",
  "path": "/components/radio",
  "url": "https://design.werklist.com/components/radio",
  "text": "https://design.werklist.com/agent/components/radio",
  "summary": "Lets someone choose exactly one option from a short list they can see in full.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Radio",
  "purpose": "Chooses exactly one option from a short list shown in full.",
  "use": [
    "Two to five options the reader compares before choosing.",
    "Options that need a sentence or a description each.",
    "A choice inside a form that applies on submit."
  ],
  "avoid": [
    "More than five options or little room: use Select.",
    "Two to five one word values that apply at once: use SegmentedControl.",
    "Any number of choices: use Checkbox.",
    "One on or off setting: use Checkbox or Switch."
  ],
  "anatomy": [
    {
      "part": "Circle",
      "measure": "16 px",
      "token": "--radius-full"
    },
    {
      "part": "Edge at rest",
      "measure": "1 px inset, rgba(13, 18, 40, 0.55) in light, rgba(255, 255, 255, 0.2) in dark, as on the checkbox"
    },
    {
      "part": "Fill at rest",
      "measure": "#ffffff in light, --surface-control in dark, as on the checkbox"
    },
    {
      "part": "Fill chosen",
      "token": "--brand-blue"
    },
    {
      "part": "Dot",
      "measure": "6 px, centered",
      "token": "--on-brand"
    },
    {
      "part": "Label",
      "measure": "14 px on 20 px, weight 400",
      "token": "--text"
    },
    {
      "part": "Description",
      "measure": "13 px on 18 px, directly under the label",
      "token": "--text-muted"
    },
    {
      "part": "Gap circle to label",
      "measure": "8 px",
      "token": "--space-2"
    },
    {
      "part": "Space between options",
      "measure": "8 px with a fine pointer, 0 with a coarse pointer, where rows are 44 px",
      "token": "--space-2"
    },
    {
      "part": "Row layout",
      "measure": "two or three short options, each as wide as the longest, 24 px apart, stacked below 640 px",
      "token": "--space-6"
    },
    {
      "part": "Group label",
      "measure": "a field label on a legend"
    },
    {
      "part": "Focus ring",
      "measure": "2 px, offset 2 px",
      "token": "--focus-ring"
    }
  ],
  "states": [
    {
      "name": "rest",
      "change": "the flat circle inside its 1 px edge"
    },
    {
      "name": "focus visible",
      "change": "ring outside the circle",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "chosen",
      "change": "brand fill with a white dot",
      "tokens": [
        "--brand-blue",
        "--on-brand"
      ]
    },
    {
      "name": "disabled",
      "change": "circle and dot at half strength, label in muted ink",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "invalid",
      "change": "error edge, with the message in the error line of the group",
      "tokens": [
        "--error",
        "--error-ink"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Enters the group at the chosen option, or the first when none is chosen"
    },
    {
      "key": "Arrow keys",
      "action": "Move to the next or previous option and choose it, wrapping at the ends"
    },
    {
      "key": "Space",
      "action": "Chooses the focused option when none is chosen"
    },
    {
      "key": "Shift+Tab",
      "action": "Leaves the group"
    }
  ],
  "accessibility": [
    "Native radio inputs sharing a name, inside a fieldset with a legend.",
    "Each option is a label element.",
    "The group is one Tab stop.",
    "Screen readers announce the legend, the option, its position and its state."
  ],
  "content": [
    "Fragments in sentence case, no full stop.",
    "Long labels wrap and are not truncated.",
    "Descriptions are sentences with a full stop, on every option or on none.",
    "The group label ends without a colon.",
    "The safe, usual option comes first and starts chosen."
  ],
  "tokens": [
    "--surface-control",
    "--text-muted",
    "--text",
    "--brand-blue",
    "--on-brand",
    "--error",
    "--radius-full",
    "--space-2",
    "--space-6",
    "--focus-ring"
  ],
  "rules": [
    "Two to five visible options, one chosen from the start.",
    "A long list, such as a country of origin, is a Select or a Combobox.",
    "One setting that is on or off is one Checkbox or Switch, not two radio buttons for Yes and No."
  ]
}

Raw file: https://design.werklist.com/agent/components/radio