Versions Compared

Version Old Version 21 New Version 22
Changes made by

dana lees kunik

dana lees kunik

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Description

ONGOING 

Toggle is a control that is used to quickly switch between two possible 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


States

Interaction


Validation and Errors


Best practices

  •  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.
    Use adjectives rather than verbs to describe labels and the state of the object affected.

    Design


    Zeplin Link
    Thumbnail
    https://zpl.io/V4pgdpV



Current appearances in our products

 


Expand
titleExpand to view products and screenshots
orderupdate

WFM Calendar:

Image Modified

Current appearances in our products

update
Expand
titleExpand to view products and screenshots
order



New LUX design 


Html macro
sanitizefalse
<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>

...