ONGOING 

Description

...

Usage & Behavior

General guidelines

Content

• Can be either text On/Off or visual “V”/”X”

• 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

State	Image	Comment
Regular<TBD>	Image Added
Hover	Image Added
Active	Image Added
Disabled	Error

...

Image Added

Interaction

• User can click

...

• inside the button to change sets, not limited to the round switch

Transition

There should be a smooth transition between the two states of the button

<TBD>

Validation and Errors

A warning can be displayed upon the button

...

For more information validations please see Field Validation

...

Toggles should provide immediate results - should not require the user to click Save or Submit to apply the new state.

Use when:

• you need to clearly show the mode or state that a setting is in

• The response is required immediately after the user “flips” the Toggle switch. They are commonly used for “On/Off” situations.

Don’t use:

• 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)

• part of a form (use radio buttons instead)

Design

Thumbnail

Zeplin Link	https://zpl.io/V4pgdpV Image Added	https://zpl.io/V4pgdpVbl5Myv2 Image RemovedImage Added

Current appearances in our products

Expand
title Expand to view products and screenshots
WFM Calendar:

...