| Table of Contents |
|---|
...
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 | Comment |
|---|---|---|---|---|---|---|---|
Regular |  |  |  |  | |||
Hover |  |  |  |  | |||
Active |  |  |  |  | |||
Disabled |  |  |  |  | |||
Warning |  |  |  |  | |||
Focused |  |  |  |  | |||
Focused Hover |  |  |  |  | |||
Focused Active |  |  |  |  | |||
Focused Disabled |  |  |  |  |
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.
...
Please refer to Field Validation for more information.
 |
Transitions
There should be a smooth transition between the two states. See code below.
...
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 Check Boxes Checkboxes instead.
where the change is visible as soon as the action was performed → use Check Boxes 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 Check Box Checkbox instead.
General
Where possible, use ✓ and ☓ instead of On and Off within the button area.
Keep preceding labels short and informative.
...
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 |
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> |
...