...
...
...
...
| Expand | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
Description
...
Toggle is a control that is used to quickly switch between two possible states.
...
| title | Expand for more info |
|---|---|
| order | update |
...
Related items:
- Lorem ipsum dolor si
Behavior
If it is disabled, the cursor will indicate that the selection cannot be made.
Content guidelines
Toggles are used for binary actions that occur immediately after the user “flips” the Toggle switch. They are commonly used for “On/Off” situations.
Labels
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.
Language
Use adjectives rather than verbs to describe labels and the state of the object affected.
Current appearances in our products
...
| title | Expand to view products and screenshots |
|---|---|
| order | update |
New LUX design
TBD - Open issues
- xxxxx
- xxxxx
- xxxxx
Deceissiond Made
- xxxxx
- xxxxx
- xxxxx
Next Steps / Tasks
- xxxxx
- xxxxx
- xxxxx
...
| sanitize | false |
|---|
...
| Table of Contents |
|---|
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) | Icon On (small) | Icon 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
 | |
 | |
 | |
 | |
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css"> <link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script> <link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css"> <div class="card"> <div class="card-header">Text Toggle <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div> <div class="card-body"> <form> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label> <div class="col-lg-4"> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle7" type="checkbox" checked /> <label for="toggle7"><span class="on">On</span><span class="off">Off</span></label> </div> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle8" type="checkbox" /> <label for="toggle8"><span class="on">On</span><span class="off">Off</span></label> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle7" type="checkbox" checked /> <label for="toggle7"><span class="on">On</span><span class="off">Off</span></label> </div> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle8" type="checkbox" /> <label for="toggle8"><span class="on">On</span><span class="off">Off</span></label> </div></script></code></pre> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label> <div class="col-lg-4"> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle9" type="checkbox" disabled checked /> <label for="toggle9"><span class="on">On</span><span class="off">Off</span></label> </div> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle10" type="checkbox" disabled /> <label for="toggle10"><span class="on">On</span><span class="off">Off</span></label> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle9" type="checkbox" disabled checked /> <label for="toggle9"><span class="on">On</span><span class="off">Off</span></label> </div> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle10" type="checkbox" disabled /> <label for="toggle10"><span class="on">On</span><span class="off">Off</span></label> </div></script></code></pre> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Warninng</label> <div class="col-lg-4"> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle is-warning" id="toggle11" type="checkbox" checked /> <label for="toggle11"><span class="on">On</span><span class="off">Off</span></label> </div> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle is-warning" id="toggle12" type="checkbox" /> <label for="toggle12"><span class="on">On</span><span class="off">Off</span></label> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle is-warning" id="toggl11" type="checkbox" checked /> <label for="toggle11"><span class="on">On</span><span class="off">Off</span></label> </div> <div class="custom-control custom- |
...
toggle custom-control-inline"> |
...
|
...
<input |
...
class="custom-checkbox-toggle is-warning" |
...
id=" |
...
toggle12" |
...
type=" |
...
checkbox" /> <label for="toggle12"><span class=" |
...
on">On</span><span class="off">Off</span></label> </div></script></code></pre> |
...
</div>
|
...
</div> </form> </div> </div> |
...
<div class=" |
...
card"> <div class="card-header">Icon Toggle</div> <div class=" |
...
card- |
...
body"> |
...
<form> <div class=" |
...
form-group row"> |
...
<label |
...
for=" |
...
inputKey" class=" |
...
col- |
...
lg- |
...
2 col-form-label col-form-label-sm">Regular</label> |
...
<div class="col-lg-4"> <div class=" |
...
custom-control custom-toggle custom-control-inline"> |
...
<input class=" |
...
custom-checkbox- |
...
toggle" |
...
|
...
id=" |
...
toggle13" |
...
|
...
type=" |
...
checkbox" checked /> <label for="toggle13"><span class=" |
...
on"><i |
...
class=" |
...
icon-check"></i></span><span class=" |
...
off" |
...
><i class="icon-remove"></i></span></label> </div> <div class="custom-control custom- |
...
toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle14" type="checkbox" /> <label for="toggle14"><span class=" |
...
on"><i |
...
class=" |
...
icon-check"></i></span><span class=" |
...
off" |
...
><i class="icon-remove"></i></span></label> </div> </div> <div class=" |
...
col- |
...
lg-6"> |
...
<pre class="language-html"><code><script type=" |
...
prism-html-markup"><div class="custom-control custom- |
...
toggle custom-control-inline"> |
...
<input class="custom- |
...
checkbox- |
...
toggle" |
...
id=" |
...
toggle13" |
...
type="checkbox" checked /> <label for=" |
...
toggle13"><span class= |
...
"on"><i class="icon-check"></i></span><span class="off"><i class=" |
...
icon-remove"></i></span></label> </div> <div class="custom-control custom- |
...
toggle custom-control-inline"> |
...
|
...
<input class="custom-checkbox-toggle" id="toggle14" type="checkbox" /> <label for="toggle14"><span class=" |
...
on"><i |
...
class=" |
...
icon-check"></i></span><span class=" |
...
off"><i |
...
class=" |
...
icon-remove"></i></span></label> |
...
</div></script></code></pre> </div> </div> <div class=" |
...
form- |
...
group row"> |
...
<label |
...
for=" |
...
inputKey" class=" |
...
col- |
...
lg- |
...
2 col-form-label col-form-label-sm">Disabled</label> |
...
<div class="col-lg-4"> <div class="custom-control custom- |
...
toggle custom-control-inline"> <input |
...
class="custom-checkbox-toggle" |
...
id=" |
...
toggle15" |
...
type=" |
...
checkbox" |
...
disabled checked /> <label for="toggle15"><span class="on"><i class=" |
...
icon- |
...
check"></i></span><span class="off"><i |
...
class="icon-remove"></i></span></label> </div> |
...
|
...
|
...
<div class="custom-control custom- |
...
toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle16" type="checkbox" disabled /> <label for="toggle16"><span class=" |
...
on"><i |
...
class=" |
...
icon-check"></i></span><span class=" |
...
off" |
...
><i class="icon-remove"></i></span></label> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom- |
...
toggle custom-control-inline"> <input |
...
class="custom-checkbox-toggle" |
...
id="toggle15" |
...
type="checkbox" disabled checked /> <label for="toggle15"><span class="on"><i class="icon-check"></i></span><span class="off"><i class="icon-remove"></i></span></label> </div> <div class="custom-control custom-toggle custom-control-inline"> <input class="custom-checkbox-toggle" id="toggle16" type="checkbox" disabled /> <label for="toggle16"><span class="on"><i class="icon-check"></i></span><span class="off"><i class="icon-remove"></i></span></label> </div></script></code></pre> |
...
</div> </div> <div class=" |
...
form- |
...
group row"> |
...
<label |
...
for=" |
...
inputKey" class=" |
...
col- |
...
lg- |
...
2 |
...
col-form-label col-form-label-sm">Warning</label> |
...
<div class="col-lg-4"> <div class="custom-control custom- |
...
toggle custom-control-inline"> <input |
...
class="custom- |
...
checkbox- |
...
toggle is- |
...
warning" id |
...
="toggle17" type="checkbox" checked /> <label for="toggle17"><span class="on"><i class="icon-check"></i></span><span class=" |
...
off" |
...
><i class="icon-remove"></i></span></label> </div> <div class="custom-control custom- |
...
toggle custom-control-inline"> <input class="custom-checkbox-toggle is-warning" id="toggle18" type="checkbox" /> <label for="toggle18"><span class=" |
...
on"><i class="icon-check"></i></span><span class=" |
...
off" |
...
><i class="icon-remove"></i></span></label> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom- |
...
toggle custom-control-inline"> <input |
...
class="custom- |
...
checkbox- |
...
toggle is- |
...
warning" id=" |
...
toggle17" |
...
|
...
type=" |
...
checkbox" checked /> |
...
<label |
...
for=" |
...
toggle17"><span class=" |
...
on"><i class="icon-check"></i></span><span class=" |
...
off"><i |
...
class=" |
...
icon-remove"></i></span></label> </div> <div class="custom-control custom- |
...
toggle custom-control-inline"> |
...
<input class="custom- |
...
checkbox- |
...
toggle is- |
...
warning" id="toggle18" |
...
type=" |
...
checkbox" /> <label for="toggle18"><span class="on"><i class=" |
...
icon-check"></i></span><span class="off"><i class="icon-remove"></i></span></label> </div></script></code></pre> </div> </div> </form> </div> </div> |