...
The checkbox control allows 3 modes:
 | Checked (Selected) |
 | Unchecked (Unselected) |
 | 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
...
For each of the three modes, the different states below can apply:
State | Unchecked | Checked | Partially selected |
|---|---|---|---|
Regular | | | |
Hover |  |  |  |
Active |  |  |  |
Disabled |  |  |  |
Read-Only |
|
|
|
Focused |  |  |  |
Focused, Hover |  |  |  |
Focused, Active |  |  | |
Focused, Disabled |  |  |  |
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.
...
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 |
|---|---|
 |
Code
| Html macro | ||
|---|---|---|
| ||
<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> |
...