Versions Compared

Key

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

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

...

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.

...

State

Image

Comment

Regular

<TBD>

Hover

Active

Disabled

Error

...

User can click anywhere inside the button to change sets


Validation and Errors

...

For more information validations please see Field Validation

Best practices

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)

...