Toggle switch allow the users to switch between two states or options within a single action, and visually indicate each state with a distinct appearance.



Toggle switches should deliver immediate result. The changes chould apply instantly without pressing save or submit. We want to strive for toggle switches to match how it works in the real world, i.e. look at how light switches works, or when I turn on and off a coffee machine.

It its not possible to achieve an immediate result, consider using checkboxes or radio buttons instead.

Set the default state based on common user preferences. Default state should align with the expected behaviour for most users and reduce the need for unnecessary toggling.

Provide additional contextual help or information to explain the purpose or consequences of toggling. This may include explanatory text, or links to relevant documentation.

Avoid overusing toggles in the user interface. Reserve them for settings or actions with significance, that have a clear binary choice and where a toggle provides an intuitive interaction method. While Checkbox can also be used for binary options, Toggles are best used to represent a choice of two opposing values or state of something

It is not easy to select if a checkbox or toggle switch are the best option for your design. We've tried to set up this table to make it easier for you to decide if a toggle switch is the correct component.

For more information about when to use toggle vs checkbox, read the guidelines from the Nielsen Norman group

Labels should be clear Make sure all toggle switches have labels so users know what they do when they interact with them. Labels should be short, clear, and describe what happens when the toggle is on. Check if adding "On" or "Off" makes sense at the end of the label. If not, change the label.

Toggle switches should not include any negations of some sort, since it can be confusing for the user what will happen when the toggle switch is "on" or "off". Its not always neccessary to have a verb included in the label, as long as it is understandable. When in doubt, add a verb such as "show" or "enable".

Formatting When writing labels for toggle switches:

To create a Toggle, create an instance of the FaceliftToggle class:

The waitEffect argument allows you to specify if the animation of the toggle should be completed before the callback is executed.

For the full list of constructor options, please refer to cm/win/faceliftToggle.cm.