ONGOING

Description

Toggle is a control that is used to quickly switch between two states that cannot both occur at the same time (mutually exclusive)

For example:

Verint LUX Design System > Switch Buttons > image-20200622-141602.png

Usage & Behavior

General guidelines

Default state

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)

Transition

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

Validation and Errors

Please 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)

General

Prefer Icon toggle over text toggle
Prefer short and informative accompanied labels

Design

https://zpl.io/V4pgdpV

https://zpl.io/bl5Myv2

Verint LUX Design System > Switch Buttons > image-20200622-142232.png

New LUX design

<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>