Versions Compared

Version Old Version 25 New Version 26
Changes made by

dana lees kunik

Asaf Ben-Oved

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

ONGOING 

Table of Contents

Description

Toggle is a control that is used to quickly switch between two possible mutually exclusive 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

Text

  • The label should describe what the control will do when the switch is on
  • Use adjectives rather than verbs to describe labels and the state of the object affected.


States

Image Added

Interaction

User can click anywhere inside the button to change sets


Validation and Errors

Image Added


Best practices

  • Toggles should provide immediate results - should not require the user to click Save or Submit to apply the new state.
  • Toggles should not be part of a form (use radio buttons instead)
  • 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.
    • a setting is in
  • 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

Image Removed

Interaction

Validation and Errors

Image Removed

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 


...