Table of Contents

Status

colour	Yellow
title	Ongoing

Description

Check boxes 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 which the user can check or uncheck it, for example to show agreement.

...

A check box has 3 modes: unselected, selected, and partially selected. The partially selected state comes into play when the check box contains a sub-list of selections, some of which are selected, and some unselected.

Example:

...

Usage & Behaviour

General guidelines

Structure

A check box consists of:

A label describing the option.
A corresponding check box.

Check boxes patterns:

A single check box - an individual choice.

...

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

...

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

...

States

The check box control allows 3 modes:

...

Checked (Selected)

...

Unchecked (Unselected)

...

Partially selected - this option is used when the check box contains a sub-list of selections, of which some are selected and some are not.

...

Description

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 checkbox which the user can check or uncheck, for example to show an agreement.

...

The checkbox control allows 3 modes:

Image Added	Checked (Selected)
Image Added	Unchecked (Unselected)
Image Added	Partially selected - this option is used when the checkbox contains a sub-list of selections, of which some are selected and some are not.

Usage & Behaviour

General guidelines

Structure

A checkbox consists of:

A label describing the option.
A corresponding checkbox.

Checkbox patterns:

A single checkbox - an individual choice.

...

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

...

Master type checkbox, which controls the state of all the other checkboxes in a group.

...

States

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

State	Unchecked	Checked	Partially selected
Regular

Image Removed

Image Added

Image Removed

Image Added

Image Removed

Image Added

Hover

Image Removed

Active

Image Removed

Disabled

Image Removed

Focused

Image Removed

Focused, Hover

Image Removed

Focused, Active

Image Removed

Focused, Disabled

Image Removed

Interaction

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

Validation and Errors

Please refer to Field validation page for more information.

...

Best practices

...

	Image Added	Image Added	Image Added
Active	Image Added	Image Added	Image Added
Disabled	Image Added	Image Added	Image Added
Read-Only	Image Added	Image Added	Image Added
Focused	Image Added	Image Added	Image Added
Focused, Hover	Image Added	Image Added	Image Added
Focused, Active	Image Added	Image Added	Image Added
Focused, Disabled	Image Added	Image Added	Image Added

Interaction

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

Validation and Errors

Please refer to Field validation page for more information.

...

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

General

The default state of a group of checkboxes is having no option selected.
If the number of checkboxes is large, consider grouping them into smaller logical groups.
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 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 labels. Avoid negative statements.
The default state of a group of check boxes is having no option selected.
Do not use a check box (or a check box group) if:
- The user needs to select a single mutually exclusive choice within a group → use Radio Buttons.
- Space is constrained → use a Drop Down menu.
- The user may need to enter a choice that is not pre-defined → use a Combo Box.
- The user needs to select from a range of values → use a Slider.
- The user needs to choose multiple options from a large list → consider using a Multi select searchable dropdown instead.
- The resulting action will be instantaneously applied, without the need for further confirmation → use a Toggle button.

Future Version (TBD)

Add to structure - dependent choices where at least 1 option must be selected (future TBD)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 checkbox labels. Avoid negative statements.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

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 61	New Version Current
Changes made by	Femi	Hasitha Jayarathne
Saved on	Jul 30, 2020	Apr 04, 2024

Content Comparison

Versions Compared

Key

Description

Usage & Behaviour

General guidelines

Structure

States

Description

Usage & Behaviour

General guidelines

Structure

States

Interaction

Validation and Errors

Best practices

Interaction

Validation and Errors

Best practices

Future Version (TBD)

Accessibility Compliance

Focus management

Design

Code