Versions Compared

Version Old Version 23 New Version 24
Changes made by

dana lees kunik

dana lees kunik

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

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
titleExpand to view products and screenshots
orderupdate

WFM Calendar:



New LUX design 


...