Description
A switch button is a control that is used to quickly toggle between two mutually-exclusive states, such as On and Off.
For example:
Usage & Behavior
General guidelines
Structure
The size of the button may be either big or small.
Default state
The switch must start with a default selection.
Content
The switch consists of:
Main button area, including:
a colored background, which changes when the state is changed.
a round toggle button, which moves between the two sides when the state is changed.
(optional) a label within the button area, describing the current state. This can be either ✓ and ☓, or On and Off.
A small-sized button may have On and Off, or Empty (Base).
A preceding label, describing what the switch will do when it is in the On state (e.g. Show only employees).
States
State | Text On | Text Off | Icon On | Icon Off | Base On | Base Off | Text On (small) | Text Off (small) | Base On (small) | Base Off (small) | Comment | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Regular |  |  |  |  |  |  |  |  |  |  | ||
Hover |  |  |  |  |  |  |  |  |  |  | ||
Active |  |  |  |  |  |  |  |  |  |  | ||
Disabled |  |  |  |  |  |  |  |  |  |  | ||
Warning |  |  |  |  |  |  |  |  | ||||
Focused |  |  |  |  |  |  |  |  |  |  |
Interaction
Clicking the toggle triggers the action immediately.
The user is not limited to clicking the round toggle button: clicking anywhere within the switch will change its state.
Validation and Errors
Please refer to Field Validation for more information.
Transitions
There should be a smooth transition between the two states. See code below.
Best practices
Use:
when a change is required immediately after the user toggles the switch.
where there are On / Off options.
when you want to emphasize an action, for example in a ribbon.
Don’t use:
where there are more than two options.
where the user has to perform several actions before the change will become effective → use Checkboxes instead.
where the change is visible as soon as the action was performed → use Checkboxes instead. For example, to show or hide certain rows in a data table or data sets in a chart.
Inside a form → use Radio Buttons or a single Checkbox instead.
General
Where possible, use ✓ and ☓ instead of On and Off within the button area.
Keep preceding labels short and informative.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
Tab | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. |
Space | Applies the action. |
Enter | Applies the action. |
Esc | N/A |
Arrows | N/A |
Responsive design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
Where space becomes limited, the switch button size may be reduced from big to small.
Design
 | |
 | |
 | |
 | |
 |