Skip to main content

Checkbox vs Radio vs Switch

Three ways to let the user pick something

I need the user to make a selection. Which control?

Comparison table

Checkbox vs Radio vs Switch
PatternMultiple selectionTakes effectWhat it expressesTypical use
Checkbox复选框YesOn form submit"I checked these"Cart multi-select, accepting terms
Radio Button单选按钮No (mutually exclusive)Selected on click"I picked one of these"Sign-in method, plan choice
Switch开关Not applicableApplies immediately"This feature is on or off"Feature toggles in settings

← Swipe to see the full table

The demos, side by side

Checkbox

复选框
Notice the "Select all" box supports an indeterminate state (the dash). The whole row is clickable.

How to decide: Collecting several choices

Radio Button

单选按钮
Account type
Options are mutually exclusive and the whole row is clickable. Use ↑ ↓ to move between them.

How to decide: Pick one out of many

Switch

开关
A switch takes effect immediately — note how it differs from a checkbox: a Switch changes state, it doesn't collect a choice.

How to decide: Flipping a state on or off

Decision rule

  • several options can be picked at onceuse a Checkbox
  • only one option is allowed and all of them should stay visibleuse a Radio
  • it is the on/off state of a featureuse a Switch
  • what comes next is "what should I do now"that is a Button, not a selection control

In one line

Radio and Switch both look like a dot or a slider, but one is a single decision and the other is a lasting state. Ask: am I choosing once, or turning something on?

Related comparisons