Toggles - Inspiration from Everyday Objects.
This story is about a toggle. A toggle that is inspired by everyday objects. And it also gives a brief idea of what is a toggle?, why do we need a toggle? and where should we use a toggle?
Real Life Toggle
Toggles are not new to us. It existed from a long period of time. We use toggles in our everyday things. One example I can think of is the knob which is situated on the folding door of a restroom on a flight. You turn knob to:
- Lock or unlock the door.
- Change the state of the restroom to either vacant or occupied.
Now let’s look at the attributes of this knob. It has a affordance to rotate i.e handle to grab. It has a signifier that either says vacant or occupied. The door only opens when it clearly says vacant and it is locked only when it clearly says occupied. It has only two states: vacant and occupied. After turning the knob from vacant to occupied the door immediately locks. There is no need to press any other button or rotate another knob to occupy the restroom. In the same way, there is no need to interact with any other control on the door. No need to specify that door is unlocked or the restroom is vacant.
Last but not the least, the signifiers like text(vacant/occupied) or say lock symbol is outside the knob so that it does not cover the holder of the knob. The reason why it’s designed in such a way is because when the passenger is holding the knob by its handle then their hand should not cover signifier. Imagine placing the lock symbol on the knob holder. Now when the passenger is holding the knob they have no idea about its current state. As the passanger’s hand is covering a symbol which signify the current state of the door.
Conventional Design
Now when it comes to web, there are many ways to change the state of a component. There are many components which are involved in selection of a data. Dropdowns are use to select from the given list of options. Radio button are use to select from a list which has less than 6 items. Lastly, checkboxes are used to opt-in and opt-out of the selection.
All these form components serve their own purpose and by no means toggle is going to replace any. But if you look closely then checkboxes and toggles has one thing in common.
Both always fire mutually exclusive event i.e both has only two states.
If that’s the case then why not to use toggles in web. Like how they are use in the everyday things. As a designer, we have always learned from things around us and we are inspired by the nature. May it be a simple Golden Rectangle which is found everywhere around us. Then Why not digitize it. Why not bring that knob to web.
What is a toggle?
Toggle is a new modern web component use to quickly switch between two states. It’s like a wrapper for a checkbox or even to a pair of a radio button.
Why do we need a toggle?
The need for the use of toggles exist because there was a need to get rid of an extra save button. If you want to move to more inline components then there is a need to introduce toggles in your form.
Where should we use a toggle?
To use toggles one needs to know the context of where to use it. Toggle is a very powerful web component but it need a label or legend.
- When you have only two states of a function, thats where you use toggle. Toggle triggers mutually exclusive event so use it wisely.
- Use it to replace traditional checkbox and avoid additional save button
- Use it to replace two radio buttons and also avoid the save button
- It gets tricky when you use toggle in a form. Make sure all the elements in the form save immediately as soon as the state of a control changes.
- It’s not a good practice to use toggle in a form which has save button in the end. This will confuse users.
Now we know what the toggle is and where to use it. Here is another article which talks about how to design a toggle and which design will work for you in your use case.
