...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
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
Text
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.
States
...
Interaction
User can click anywhere inside the button to change sets
Validation and Errors
...
Best practices
Toggles should provide immediate results - should not require the user to click Save or Submit to apply the new state.
Toggles should not be part of a form (use radio buttons instead)
Use a toggle if:
You need to clearly show the mode or state that a setting is in
Do not use a toggle if:
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)
Design
Zeplin Link | Thumbnail |
|---|---|
...
 |
Current
...
appearances in our products
| Expand | ||
|---|---|---|
|
...
WFM Calendar:  |
...
New LUX design
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/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/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">Base 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="toggle1" type="checkbox" checked /> <label for="toggle1"></label>
</div>
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle" id="toggle2" type="checkbox" /> <label for="toggle2"></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="toggle1" type="checkbox" checked />
<label for="toggle1"></label>
</div>
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle" id="toggle2" type="checkbox" />
<label for="toggle2"></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="toggle3" type="checkbox" disabled checked /> <label for="toggle3"></label>
</div>
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle" id="toggle4" type="checkbox" disabled /> <label for="toggle4"></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="toggle3" type="checkbox" disabled checked />
<label for="toggle3"></label>
</div>
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle" id="toggle4" type="checkbox" disabled />
<label for="toggle4"></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">Error</label>
<div class="col-lg-4">
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle is-invalid" id="toggle5" type="checkbox" checked /> <label for="toggle5"></label>
</div>
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle is-invalid" id="toggle6" type="checkbox" /> <label for="toggle6"></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-invalid" id="toggle5" type="checkbox" checked />
<label for="toggle5"></label>
</div>
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle is-invalid" id="toggle6" type="checkbox" />
<label for="toggle6"></label>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Text 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="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">Error</label>
<div class="col-lg-4">
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle is-invalid" 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-invalid" 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-invalid" 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-invalid" 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">Error</label>
<div class="col-lg-4">
<div class="custom-control custom-toggle custom-control-inline">
<input class="custom-checkbox-toggle is-invalid" 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-invalid" 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-invalid" 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-invalid" 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>
|
...