Skip to end of banner
Go to start of banner

Toggle

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 25 Next »

Description

ONGOING 

Toggle is a control that is used to quickly switch between two possible states.

Toggles are used for binary actions that occur immediately after the user “flips” the Toggle switch. They are commonly used for “On/Off” situations.

Usage & Behavior

General guidelines

  • Use a toggle if:
    • You need to emphasize the “on” or “off” states.
    • You need to clearly show the mode or state that a setting is in.
    • You need a toggle switch for binary settings when changes become effective immediately after the user changes them.
  • Do not use a toggle if:
    • The user has to choose several options.
    • The user has to perform several actions for the change to become effective (in this case, choose checkboxes).

States

Interaction


Validation and Errors


Best practices

Use labels with a Toggle so the action is clear. Labels should described the function of toggle and let the toggle type (icon, text etc) convey the toggles state.
Use adjectives rather than verbs to describe labels and the state of the object affected.

Design

Zeplin Link
Thumbnail
https://zpl.io/V4pgdpV


Current appearances in our products


 Expand to view products and screenshots

WFM Calendar:



New LUX design 



  • No labels