Toggle

A Toggle is used to turn something on or off.

When to use

Use a Toggle when there are only 2 availabkle options - to turn something on or off (or true/ false). A toggle is sometimes also referred to as a switch. Just like in real life, a switch turns something on or off, with immediate effect. This behaviour should apply as much as possible, meaning that no additional saving should be required.

Toggle vs Radio

Another selection control that allows users to apply a single setting is a Radio. However, there is a difference between these two components. A toggle is used when there are only 2 available options, to turn something on or off. If possible with immediate effect as described easlier. A radio button allows one option from a group and can have more than 2 options. It never has an immediate effect, but requires further action instead.


Layout and positioning

A toggle is never used on it's own. Within the context of a digital product, there is always a label or additional text present to make clear what kind of setting the user will turn on or off. In general, the toggle is presented at the far right in a list as it usually applies to settings. However, the kind of layout and position could be context dependent.

Overview / Anatomy 2 - AF