Checkbox or toggle? Learn how to correctly choose between these two components
Choosing when to use checkboxes or toggles in a form can be an easy and obvious choice to some designers, but we can all fall into situations where the choice can get quite cumbersome. It is our job, as product designers, to choose a UI element that dictates the interaction in the form, and select which element makes the most amount of sense. In this article, I’ve outlined basic principles to keep in mind when choosing which element fits best for different situations and give examples of the pattern library for checkboxes and toggles, we’ve created so that everyone on the team makes similar decisions when they run into the same choices.
Checkboxes and toggles
Checkbox: allows a user to make a binary choice. In this option, a user needs to choose between one of two possible mutually exclusive options.
Use checkboxes when:
· The user can choose one or multiple items from a list or menu
· The designer needs to display a list containing sub-selections. This allows for easy selection or deselection of all items with a parent checkbox.
· Performing an action CANNOT be instant. It requires an “action” example ‘Save/Submit’ to trigger an update via a single button that submits the form to the server for the action to take place.
· When there is a complex form at hand with multiple choices that requires feedback from the server before receiving results.
Toggles: Are like a physical switch or a faucet that can be turned on or off.
Use toggles when:
- A single option needs to be either turned on or off
- Users can immediately activate or deactivate something
- It is important to immediately change a setting if a switch was turned on or off. It does not require another action like “save” or returning to the previous screen. This is similar to a switch in real life.
Don’t
One of the key rules for using these elements is to NOT use toggles and checkboxes in the same form. It’s either checkboxes or toggles. A combination of these two components in the same form will confuse the user and defy the very meaning and usage of them.
Creating a checkbox/toggle pattern library
Keeping these principles about checkboxes and toggles in mind the product design team at RingCentral created patterns for the correct usage of both elements. Below is a visual chart of these categories that explain each decision further:
Category A — Form fields with checkboxes
Category B — Form fields with toggles
How establishing these form patterns helped:
Creating a pattern library for checkboxes and toggles kept us (all teams) on the same page. We reduced rework and coming back to the same questions every time we had a new form design. We solved the problem once and everyone now speaks the same language and refers to the patterns created. Designers now have access to a consistent pattern that can be used across all teams without any confusion. Users have a consistent pattern to follow when filling forms, eliminates surprises. Makes interacting with forms seamless.
