Table of Contents

Description

Check boxes Checkboxes are used where the user has the option to select or deselect one or more options. It can be used:

for a list where the user can select multiple options, including all, some, or none.
as a single check box checkbox which the user can check or uncheck, for example to show an agreement.

Image Modified

The check box checkbox control allows 3 modes:

Image Modified	Checked (Selected)
Image Modified	Unchecked (Unselected)
Image Modified	Partially selected - this option is used when the

check box

checkbox contains a sub-list of selections, of which some are selected and some are not.

Usage & Behaviour

General guidelines

Structure

A check box checkbox consists of:

A label describing the option.
A corresponding check boxcheckbox.

Check boxes Checkbox patterns:

A single check box checkbox - an individual choice.

...

Independent choices (zero or more) - users can select any combination of options in a group of check boxescheckboxes.

...

Master type check boxcheckbox, which controls the state of all the other check boxes checkboxes in a group.

...

States

For each of the three modes, the different states below can apply:

State	Unchecked	Checked	Partially selected
Regular	Image Modified	Image Modified	Image Modified
Hover	Image Modified	Image Modified	Image Modified
Active	Image Modified	Image Modified	Image Modified
Disabled	Image Modified	Image Modified	Image Modified
Focused	Image Modified	Image Modified	Image Modified
Focused, Hover	Image Modified	Image Modified	Image Modified
Focused, Active	Image Modified	Image Modified	Image Modified
Focused, Disabled	Image Modified	Image Modified	Image Modified

Interaction

Clicking a check box checkbox toggles between the ‘checked' and ‘unchecked’ modes.
For check boxes checkboxes in the partially selected state, clicking them will move them to the 'checked' state and check all of its child check boxescheckboxes. An additional click will uncheck the master check box checkbox and all its child check boxescheckboxes.
Within a group of check boxescheckboxes, each check box checkbox can be checked or unchecked independently. The user can check multiple options.
The check box checkbox can be selected by clicking on either the check box checkbox or the label.
The check box checkbox will have a hovered state when hovering over either the check box checkbox or the label.
The check box checkbox will have an active state during the action of clicking either the check box checkbox or the label.
The partially selected state is visual only. This state can’t be achieved by a direct user interaction on the check box checkbox itself.

Validation and Errors

Please refer to Field validation page for more information.

Image Modified

Best practices

Use:

when the user needs to select or deselect one or more options.
when the options needs to be visible.

Do not use a single check box checkbox if:

the resulting action is immediately applied, but not shown on the page (e.g. when something is activated) → use a Switch button.

Do not use a check box checkbox group if:

the user needs to select a single mutually exclusive choice within a group → use Radio Buttons.
space is constrained or if the user needs to choose multiple options from a large list → consider using a Multi-select Drop-down Menu instead.

...

The default state of a group of check boxes checkboxes is having no option selected.
If the number of check boxes checkboxes is large, consider grouping them into smaller logical groups.
Check boxes Checkboxes should be listed in a logical order, such as
- grouping highly related options together, or
- placing most common options first, or
- following some other natural progression.
Alphabetical ordering isn't recommended because it is language dependent, and therefore not localizable.
It’s recommended to align check boxes checkboxes vertically, not horizontally.
Write the label as a short phrase or an imperative sentence. Do not use ending punctuation.
Use positive and active wording for check box checkbox labels. Avoid negative statements.

Focus management

Keyboard	Description
Tab	Navigates to the next component.
Shift + Tab	Navigates to the previous component.
Space	Applies or Removes the check ✓.
Enter	N/A
Esc	N/A
Arrows	N/A

Design

Zeplin Link	Thumbnail
https://zpl.io/2jGkQWV	Image Modified

Code

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/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/accessibility.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">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>

...

Version	Old Version 66	New Version 67
Changes made by	Asaf Ben-Oved	Carlie Bradshaw
Saved on	May 05, 2021	Mar 16, 2022

Content Comparison

Versions Compared

Key