Versions Compared

Version Old Version 4 New Version 5
Changes made by

Femi

Femi

Saved on

Key

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


Expand
titleExpand for table of Content
orderupdate
Table of Contents
outlinetrue
stylesquare

Description

Status
colourYellow
titleOngoing
 

Toggle is a control that is used to quickly switch between two possible states.

Expand
titleExpand for more info
orderupdate

This is best used as an alternative to checkboxes when it isn't part of a group or related states.

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


Expand
titleExpand to view products and screenshots
orderupdate




New LUX design 



TBD - Open issues

  1. xxxxx
  2. xxxxx
  3. xxxxx

Deceissiond Made

  1. xxxxx
  2. xxxxx
  3. xxxxx

Next Steps / Tasks

  1. xxxxx
  2. xxxxx
  3. xxxxx





Html macro
sanitizefalse
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.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="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism-coy.min.css">


<div class="card">
			<div class="card-header">Check>Base Box<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-checkboxtoggle custom-control-inline">
								<input type="checkbox" class="custom-controlcheckbox-inputtoggle" id="customCheck1toggle1"> <label classtype="custom-control-label"checkbox" checked /> <label for="customCheck1toggle1"></label>
							</div>
							<div class="custom-control custom-checkboxtoggle custom-control-inline">
								<input type="checkbox" class="custom-controlcheckbox-inputtoggle" id="customCheck2toggle2" checked> <label classtype="custom-control-label"checkbox" /> <label for="customCheck2toggle2"></label>
							</div>
						</div>
						<div class="customcol-control custom-checkbox custom-control-inlinelg-6">
								<input<pre class="language-html"><code><script type="checkboxprism-html-markup"><div class="custom-control custom-input indeterminate" id="customCheck3"> <labeltoggle custom-control-inline">
	<input class="custom-control-label"checkbox-toggle" id="toggle1" type="checkbox" checked />
	<label for="customCheck3toggle1"></label>
							</div>
						</div>
						<div class="colcustom-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-checkboxcontrol custom-toggle custom-control-inline">
	<input typeclass="custom-checkbox-toggle" classid="custom-control-inputtoggle2" idtype="customCheck1checkbox" />
	<label class="custom-control-label" for="customCheck1toggle2"></label>
</div></script></code></pre>
						</div>
					</div>
					<div class="customform-control custom-checkbox custom-control-inlinegroup row">
						<input<label typefor="checkboxinputKey" class="customcol-controllg-input" id="customCheck2" checked>
	<label class="custom-control-label" for="customCheck2"></label>
</div>
2 col-form-label col-form-label-sm">Disabled</label>
						<div class="customcol-control custom-checkbox lg-4">
							<div class="custom-control custom-toggle custom-control-inline">
								<input type="checkbox" class="custom-controlcheckbox-input indeterminatetoggle" id="customCheck3toggle3"> 	<label classtype="custom-control-label"checkbox" disabled checked /> <label for="customCheck3toggle3"></label>
</div></script></code></pre>
							</div>
					</div>
					<div class="form-group rowcustom-control custom-toggle custom-control-inline">
								<label for<input class="custom-checkbox-toggle" id="inputKeytoggle4" classtype="checkbox"col-lg-2 col-form-label col-form-label-sm">Disabled</label> disabled /> <label for="toggle4"></label>
							</div>
						</div>
						<div class="col-lg-46">
							<div<pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-checkboxtoggle custom-control-inline">
								<input type="checkbox" class="custom-controlcheckbox-inputtoggle" id="customCheck4toggle3" disabled> <label classtype="custom-control-label"checkbox" disabled checked />
	<label for="customCheck4toggle3"></label>
							</div>
							<div class="custom-control custom-checkboxtoggle custom-control-inline">
								<input type<input class="custom-checkbox-toggle" classid="custom-control-inputtoggle4" idtype="customCheck5checkbox" disabled checked>/>
<label class="custom-control-label"	<label for="customCheck5toggle4"></label>
	
</div></script></code></pre>
						</div>
					</div>
					<div class="customform-control custom-checkbox custom-control-inlinegroup row">
								<input<label typefor="checkboxinputKey" class="customcol-controllg-input indeterminate" id="customCheck6" disabled> <label class="custom-control-label" for="customCheck6"><2 col-form-label col-form-label-sm">Error</label>
							</div>
						</div>
						<div class=<div class="col-lg-64">
							<pre class="language-html"><code><script type="prism-html-markup"><div<div class="custom-control custom-checkboxtoggle custom-control-inline">
								<input type="checkbox" class="custom-controlcheckbox-input" toggle is-invalid" id="customCheck4toggle5" disabled>
	<label classtype="custom-control-label"checkbox" checked /> <label for="customCheck4toggle5"></label>
							</div>
							<div class="custom-control custom-checkboxtoggle custom-control-inline">
								<input type="checkbox" class="custom-controlcheckbox-input" toggle is-invalid" id="customCheck5toggle6" disabled checked>
	<label class="custom-control-label"type="checkbox" /> <label for="customCheck5toggle6"></label>
							</div>
						</div>
						<div class="customcol-control custom-checkbox custom-control-inlinelg-6">
	<input						<pre class="language-html"><code><script type="checkboxprism-html-markup"><div class="custom-control custom-input indeterminate" id="customCheck6" disabled>
	<labeltoggle custom-control-inline">
	<input class="custom-checkbox-controltoggle is-labelinvalid" forid="customCheck6toggle5"></label>
</div></script></code></pre>
						</div>
					 type="checkbox" checked />
	<label for="toggle5"></label>
</div>
					<div class="form-group rowcustom-control custom-toggle custom-control-inline">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
		<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="customform-control custom-checkbox custom-control-inlinegroup row">
								<input<label typefor="checkboxinputKey" class="customcol-controllg-input2 is-invalid" id="customCheck7"> <label class="custom-control-label" for="customCheck7"><col-form-label col-form-label-sm">Error</label>
							</div><div class="col-lg-4">
							<div class="custom-control custom-checkboxtoggle custom-control-inline">
								<input class="custom-checkbox-toggle is-invalid" id="toggle17" type="checkbox" checked /> <label for="toggle17"><span class="on"><i class="custom-control-input is-invalid" id="customCheck8" checked> <label class="custom-control-label" for="customCheck8"><icon-check"></i></span><span class="off"><i
										class="icon-remove"></i></</span></label>
							</div>
							<div class="custom-control custom-checkboxtoggle custom-control-inline">
								<input type="checkbox" class="custom-controlcheckbox-inputtoggle is-invalid" indeterminateid="toggle18" idtype="customCheck9checkbox" /> <label for="toggle18"><span class="on"><i class="custom-control-label" for="customCheck9"><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-checkbox custom-control-inline">
	<input type="checkbox"	<div class="customcol-control-input is-invalid" id="customCheck7lg-6">
	<label							<pre class="customlanguage-control-labelhtml"><code><script fortype="customCheck7"></label>
</div>
<divprism-html-markup"><div class="custom-control custom-checkboxtoggle custom-control-inline">
	<input type="checkbox" class="custom-controlcheckbox-inputtoggle is-invalid" id="toggle17" type="customCheck8checkbox" checked checked>/>
	<label for="toggle17"><span class="on"><i class="custom-control-label" for="customCheck8"><icon-check"></i></span><span class="off"><i class="icon-remove"></i></</span></label>
</div>
<div class="custom-control custom-checkboxtoggle custom-control-inline">
	<input type="checkbox" class="custom-controlcheckbox-inputtoggle is-invalid" indeterminateid="toggle18" idtype="customCheck9checkbox" />
	<label for="toggle18"><span class="on"><i class="custom-control-label" for="customCheck9"><icon-check"></i></span><span class="off"><i class="icon-remove"></i></span></label>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

...