Design system Selectors

Radio button

A single-select control for a short visible set: choosing one answer clears every sibling in the named group.

.mk-radio

Overview

A radio button selects exactly one answer from a named group. Every option stays visible, and choosing a new one clears the previous answer without requiring a separate reset action.

Select one

Usage

  • Select one option from a visible setEvery radio button belongs to one named group, and selecting an option clears the previous selection in that group.
  • Use for short, comparable alternativesKeep all options visible when reading them together supports the choice. Use Dropdown when the set is long or space is constrained.
  • Record input for submissionA radio group contributes one value to a form. Use Toggle when switching between two interface modes should take effect immediately.

Anatomy

1 2
  1. 1Radio face. The 20px circle keeps its surface visible and places one accent dot inside it.
  2. 2Option label. One answer to the question in the group legend. Face and text share one 44px label target.

Variants and states

StateSpecimenWhat changes
RestWhite circle, strong hairline, no inner mark.
SelectedThe ring warms and an accent dot marks the one selected answer.
HoverThe unselected border warms; geometry and label position do not move.
Keyboard focusThe standard camel focus ring sits on the face.
DisabledThe complete option dims and cannot replace the current answer.

Do and don't

Select one
Do

Use one radio group when exactly one answer is required from a short visible set.

Select any that apply
Don't

Do not use radio buttons when several answers may be true at the same time.

Copy

  • The legend asks one questionEvery option answers that question directly in the same grammatical form.
  • Name the answers, not the mechanismLabels describe the available choices; they do not say “select this option”.

Accessibility

  • Keep the native inputArrow-key movement, form submission and selected semantics come from input type="radio".
  • One shared nameEvery sibling uses the same name, so the browser enforces exactly one selection.
  • Name the groupA fieldset and legend connect every answer to the question it answers.

When to reach for something else

  • Several answers may be trueUse Checkbox.
  • The single-select set is longUse Dropdown when keeping every option visible would overwhelm the page.
  • The choice applies immediatelyUse Toggle for a binary mode change with no form submission.

Markup

<fieldset class="mk-choice-group">
  <legend class="mk-choice-legend">Select one</legend>
  <label class="mk-radio"><input type="radio" name="choice" value="one"> Option 1</label>
  <label class="mk-radio"><input type="radio" name="choice" value="two"> Option 2</label>
</fieldset>