Description

ONGOING

Checkboxes are used for a list of options where the user may select multiple options, including all, some or none.

It has 3 modes: unselected, selected and indeterminate.

The indeterminate state comes into play when the checkbox contains a sub-list of selections, some of which are selected, and some unselected.

Example:

Verint LUX Design System > Checkbox > image2019-10-6_16-49-36.png

The component may be used as a single checkbox in which the user can check/uncheck it or it may be used s a group of joined checkboxes that can be selected at the same time.

Usage & Behavior

General guidelines

List check boxes 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.
Align check boxes vertically, not horizontally. Horizontal alignment is harder to read.
Label every check box.
Write the label as a phrase or an imperative sentence, and use no ending punctuation.
The default view of a set of checkboxes is having no option selected.

Structure

Checkboxes patterns:

A single checkbox - an individual choice
independent choices (zero or more) - users can select any combination of options in a group of checkboxes
Dependent choices where at least 1 option must be selected
Hierarchy structure in which the parent has an indeterminate state

States

The checkbox control allows 3 modes:

Selected
Unselected
Indeterminate - this option is used when the checkbox contains a sub-list of selections, of which some are selected and some are not. This is only a visual state and can’t be achieved by a direct user interaction.

For each if the modes, you can find the different states below:

Verint LUX Design System > Checkbox > image2019-10-6_14-0-17.png

Interaction

Clicking a checkbox toggles between the states of the checkbox.

Within a group of checkboxes, each checkbox can be checked or unchecked. The user can check multiple options.

Users should be able to select the checkbox by clicking on the box directly or by clicking on its label. The touchable area for toggling the checkbox ends where the text ends.

The default view of a set of checkboxes is having no option selected is this so?.

The checkbox will have an hovered/active state when hovering/clicking either the checkbox or the label describing it.

Checkboxes generally represent one input in a larger flow which requires a final confirmation step.

Validation and Errors

Verint LUX Design System > Checkbox > image2019-9-18_14-23-55.png

Verint LUX Design System > Checkbox > image2019-9-18_14-24-16.png

Verint LUX Design System > Checkbox > image2019-9-18_14-24-58.png

Best practices

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.
Do not use a checkbox (or a checkbox group) if:
- Space is constrained → use a DropDown menu.
- The user needs to select a single mutually exclusive choice within a group → use Radio Buttons.
- 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.
- If the user needs to choose multiple options from a large list → consider using a multi combo box instead.
- The resulting action will be instantaneously applied, without the need for further confirmation → use a toggle button.

Design

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

Current appearances in our products

system management | enterprise | associations

Verint LUX Design System > Checkbox > image2018-10-8_11-53-11.png

Recording management | data sources | settings

Verint LUX Design System > Checkbox > image2018-10-8_12-42-58.png

WFM Calendar

Verint LUX Design System > Checkbox > image2019-9-3_13-30-1.png

Assignment Manager:

Verint LUX Design System > Checkbox > image2019-10-6_13-22-33.png

A single checkbox:

Verint LUX Design System > Checkbox > image2020-4-22_11-0-15.png

New LUX design

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