Toggle & Checkbox. Who are they ?

Avinash Bussa

Oct 22, 2018·3 min read

Hello Readers ! In the era of GUI (Graphical User Interfaces), UI components, standards, rules and colors all came into existence. Using right component at right place can enhance the usability of product. Today it’s time for us to have a pep talk over two clear yet confusing UI elements called Check boxes & Toggles.

I’ve personally gone through articles to get a clear picture but they were all confusing too. So in this article I would like to explain it in a more simpler way.

Toggle

A Toggle is a Switch Control,
The purpose of toggle button is strictly to turn on/off some feature.
Ex. WiFi, Bluetooth, Airplane Mode, etc.

Capabilities

• Toggle always executes, means…
  If you turn on WiFi, it will be turned “ON” instantly from the hardware level. Whereas for check boxes there should be some kind of “submit” button to execute the action after selection.
• Toggle can show/hide other properties of particular action.

Color

• Android
  Knob - Primary Color
  Active Fill - Lighter version for primary color
  Inactive Fill - Grey or lighter versions of grey

Note: For Android, colors and toggle styles can be customized whereas for iOS we need to follow the standard toggles.

Where to use ?

• When you turn ON/OFF a feature which is not part of other features. Like WiFi, Airplane Mode, Bluetooth, Mobile Data, etc.

Where not to use ?

• When you want to select one or more options from a list.
• When you want to “Add extra cheese” to your pizza 🍕.

Checkbox

A Checkbox is a Selection Control.
The purpose of Check Box is to select multiple options from a list or a selection that need to be executed after submitting, in forms for example. There are few other use cases for check boxes which are explained below.

Capabilities

• Check Box is always an option, it’s not a choice(for choices radio buttons are best suitable UI Components).
• Check Box doesn’t hold any other properties of an action.
• Check Boxes are usable for single/Multiple selections.

Color

• Android
  Outline - Primary Color
  Active Fill - Primary color and white tick

Note: For Android, colors and check box styles can be customized whereas for iOS we need to follow the standard check boxes and radio actions.

Where to use ?

• When you want to enable any optional feature like “Remember Me”.
• When you want to confirm the agreement like “Accept Terms & Conditions”.
• When you want to select multiple rows from a table to reveal secondary actions(see the third image below for clear picture).
• When you want to select one or more options from a list.
• Of course, When you want to “Add extra cheese” to your pizza 🍕.

Where not to use ?

• When you turn on/off a feature which is not part of other features. Like WiFi, Airplane Mode, Bluetooth, Mobile Data, etc.
• When you want to select answers like “True/False, Yes /No,etc”.

Conclusion

To conclude this pep talk, the only scenario where check boxes and toggles are confusing is when you need to add extra service to an existing feature. Okay, this might be confusing again. In short, if you want to turn on mobile data, just use toggle. If you want to make tweaks to network connection then use check boxes.

Claps are free, Let me know if you like this post :)