When to Use a Switch or Checkbox

by on 08/03/16 at 11:17 am

It isn’t easy to figure out when to use a salad fork or dinner fork just by looking at them. This is because they’re similar in form and function. Both have prongs for spearing food, but each is designed for a different food course.

forks

Similar Functions but for Different Contexts

Forks confuse people in the same way that switches and checkboxes confuse designers. Many designers think it doesn’t matter when you use one or the other. But the arbitrary use of them can cause unexpectedness and confusion. Like forks, these user interface controls are meant for different contexts.

Switches and checkboxes are both used to activate settings. But the immediacy of when users expect those settings to activate are different.

Using these controls in the right context will make your user interface intuitive to use. But using them in the wrong context can cause users to wonder what went wrong.

Switches Are for Instantaneous Actions

Switches always indicate whether a setting is on or off. When users turn a switch to “on”, they expect an instantaneous action as soon as the label appears. This is what “on” implies, not just for UI switches but real-world switches too.

When you flip a light switch on you expect the bulb to light up in an instant. Any delayed effect or need for further action makes you think something is wrong.

switch-checkbox-with-button

Switches should never require users to press a button to apply their settings. This is because a switch is already a toggle button. When you require users to press a submit button, you confuse them because it’s not what they expect.

You should only use switches on settings that need to take effect instantaneously. If a setting requires a button press before it can take effect, you should use a checkbox instead.

Checkboxes Require a Button Press

A checkbox does not apply a setting at an instant like a switch. Instead, it’s accompanied by a submit button and takes effect after the user presses it. Requiring a button press allows users to review their settings before they commit. This helps prevent accidental activation errors.

switches-vs-checkboxes

The visual cue of a checkbox is different than a switch. While “on” implies instance, a checkmark only implies selection. This means users expect a more immediate change with switches than checkboxes.

Checkboxes are useful for applying a batch of settings. With switches, users have to wait for the system to apply a setting one by one. Checkboxes allow the system to handle multiple setting changes at one time.

If the user will change a batch of settings often, checkboxes save more time. But if the user will change only a few settings often, switches work better.

Deciding Between Switch or Checkbox

When deciding between a switch or checkbox, focus on context, not function. Ask yourself whether a setting should take immediate effect or not. Ask yourself whether users need to check their settings before they apply them.

There are many real-world objects that have similar functions. But similarity doesn’t mean they’re a fit for any occasion. There are subtle differences that come into play for a specific context. These differences are details that designers should never ignore.


Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

7 Responses to “When to Use a Switch or Checkbox”

  1. rizwan

    Aug 5th, 2016

    Excellent article,

    Our programmer has used a switch in an application which requires saving button afterward. I just explained these principle differences between checkbox & switch to him and he was speechless :)

  2. Vincent

    Aug 18th, 2016

    Never thought about it like that. Great article.

  3. Angela

    Aug 25th, 2016

    Great article. I have to bookmark this one for future reference :)

  4. Pothi Kalimuthu

    Sep 1st, 2016

    Been using switches and checkboxes for a long time without noticing this difference. Thanks for clarifying.

  5. Richard

    Sep 21st, 2016

    Nice article! I would like to see the same discussion on checkboxes and toggle buttons.

  6. Kelly @ WDG

    May 28th, 2017

    Our programmer has used a switch in an application which requires saving button afterward. I just explained these principle differences between checkbox & switch to him and he was speechless

  7. Rijo

    Jul 4th, 2017

    Learned a new thing. Now time to implement them properly in themes. :)

Leave a Comment