ONGOING 

Description

...

The toggle button must start with a default selection.

Content

• Within the button, there can be either text On/Off or visual “V”/”X”

• The accompanying label of the button should describe what the control will do when the switch is on (e.g. “Show only employees”)

States

State	Text	Icon	Comment
Regular		<TBD>
Hover		<TBD>
Active		<TBD>
Disabled		<TBD>
Error
Warning
Focus…
Focused
Focused Hover
Focused Active
Focused Disabled

Interaction

• User can click inside the button to change it (not limited to the round switch)

...

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

<TBD nice transition Visual desgin>

Validation and Errors

Covered in Field Validation

<look on comboboxPlease refer to Field validation page for more information.

Best practices

Use when:

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

• Action is needed to be emphasized (for example in a ribbon)

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)

• Inside a form (use radio buttons OR a single checkbox instead)

...