Versions Compared

Version Old Version 17 New Version 18
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
 

Use checkboxes to allow people to select a number of options. 

Expand
titleExpand for more info
orderupdate

This includes no options, a single option or multiple.
Each checkbox is independent of all other checkboxes in the list, and checking one box doesn't uncheck the others.

Related items:

    • Lorem ipsum dolor si

Behavior

If it is disabled, the cursor will indicate that the selection cannot be made.
Checkboxes require the use of a button to apply the settings once they are selected.

Content guidelines 

Use positive and active wording for checkbox labels, so that it's clear what will happen if the box is checked. Avoid negative statements such as "Don't send me more emails", which would mean that the user would have to check the box in order for something not to happen.

Current appearances in our products


Expand
titleExpand to view products and screenshots
orderupdate


system management | enterprise | associations 

Recording management | data sources | settings




New LUX design 


Html macro
sanitizefalse
<link rel="stylesheet" href="httphttps://bfs-eng-de-03.kana-testux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="httphttps://bfs-eng-de-03.kana-testux.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="httphttps://bfs-eng-de-03.kana-testux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> 
<script src="httphttps://bfs-eng-de-03.kana-testux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script> 
<link rel="stylesheet" href="httphttps://bfs-eng-de-03.kana-testux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/other/prism-hide.js"></script>

<div class="card">
			<div class="card-header">Check Box <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-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1"></label>
							</div>
							<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input" id="customCheck2" checked> <label class="custom-control-label" for="customCheck2"></label>
							</div>
							<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input indeterminate" id="customCheck3"> <label class="custom-control-label" for="customCheck3"></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" class="custom-control-input" id="customCheck1">
	<label class="custom-control-label" for="customCheck1"></label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input type="checkbox" class="custom-control-input" id="customCheck2" checked>
	<label class="custom-control-label" for="customCheck2"></label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input type="checkbox" class="custom-control-input indeterminate" id="customCheck3">
	<label class="custom-control-label" for="customCheck3"></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-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input" id="customCheck4" disabled> <label class="custom-control-label" for="customCheck4"></label>
							</div>
							<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input" id="customCheck5" disabled checked> <label class="custom-control-label" for="customCheck5"></label>
							</div>
							<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input indeterminate" id="customCheck6" disabled> <label class="custom-control-label" for="customCheck6"></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" class="custom-control-input" id="customCheck4" disabled>
	<label class="custom-control-label" for="customCheck4"></label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input type="checkbox" class="custom-control-input" id="customCheck5" disabled checked>
	<label class="custom-control-label" for="customCheck5"></label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input type="checkbox" class="custom-control-input indeterminate" id="customCheck6" disabled>
	<label class="custom-control-label" for="customCheck6"></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-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input is-invalid" id="customCheck7"> <label class="custom-control-label" for="customCheck7"></label>
							</div>
							<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input is-invalid" id="customCheck8" checked> <label class="custom-control-label" for="customCheck8"></label>
							</div>
							<div class="custom-control custom-checkbox custom-control-inline">
								<input type="checkbox" class="custom-control-input is-invalid indeterminate" id="customCheck9"> <label class="custom-control-label" for="customCheck9"></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" class="custom-control-input is-invalid" id="customCheck7">
	<label class="custom-control-label" for="customCheck7"></label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input type="checkbox" class="custom-control-input is-invalid" id="customCheck8" checked>
	<label class="custom-control-label" for="customCheck8"></label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input type="checkbox" class="custom-control-input is-invalid indeterminate" id="customCheck9">
	<label class="custom-control-label" for="customCheck9"></label>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

...