Checkboxes
Purpose
Checkboxes allow users to select any number of choices, or none, within a list of independent options. They’re used, for example, to allow customers to set preferences or accept terms and conditions.
Usage
Customers should be able to tap on or click on either the text label or the checkbox to select or deselect an option. Checkboxes that are listed vertically are easier to read than those that are listed horizontally.
Requirements
The DLS Indeterminate Checkbox Groups require both dls.css and dls.js due to the complexities involved with their logic, functionality, and animations.
Specs - Checkboxes
Checkbox = 22x22px
Stroke = 1px inside, Gray 03 (default, disabled), Bright Blue (hover), Status - Warning (error)
Fill = White (default, error), Gray 01 (disabled), Gray 03 (selected disabled), Bright Blue (selected, indeterminate)
Label = Body 3, Gray 06 (default, hover, selected, indeterminate, error), Gray 04 (disabled, selected disabled)
Class Name = .checkbox
<fieldset>
<legend class="label-1 margin-b dls-example-title">Example - Checkbox States</legend>
<div class="checkbox">
<input id="demo-checkbox-1" type="checkbox" name="example-checkbox" value="1" />
<label for="demo-checkbox-1">Default</label>
</div>
<div class="checkbox">
<input id="demo-checkbox-2" aria-checked="mixed" type="checkbox" name="example-checkbox-checked" value="1" checked/>
<label for="demo-checkbox-2">Indeterminate</label>
</div>
<div class="checkbox">
<input id="demo-checkbox-3" type="checkbox" name="example-checkbox-b" value="1" checked/>
<label for="demo-checkbox-3">Selected</label>
</div>
<div class="checkbox">
<input id="demo-checkbox-4" type="checkbox" name="example-checkbox-c" value="1" disabled="true"/>
<label for="demo-checkbox-4">Disabled</label>
</div>
<div class="checkbox">
<input id="demo-checkbox-5" type="checkbox" name="example-checkbox-d" value="1" disabled="true" checked/>
<label for="demo-checkbox-5">Selected Disabled</label>
</div>
<div class="checkbox margin-0">
<input id="demo-checkbox-6" type="checkbox" name="example-checkbox" value="1" required title="Error" aria-describedby="checkboxAlert" aria-invalid="true"/>
<label for="demo-checkbox-6">Error</label>
</div>
<div id="checkboxAlert" class="alert alert-dismissible dls-color-warning pad-1-lr" role="alert">
<i class="icon" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
<span>Error text</span>
</div>
</fieldset><fieldset class="checkbox-group" data-toggle="checkboxgroup">
<legend class="label-1 margin-b"> Example - Indeterminate Checkbox Group</legend>
<ul role="none">
<li role="none">
<div class="checkbox">
<input id="demo-checkbox-ind1" data-indeterminate type="checkbox" name="example-checkbox-c" value="1"
aria-checked="mixed"/>
<label for="demo-checkbox-ind1">Select All</label>
</div>
<ul>
<li>
<div class="checkbox">
<input id="demo-checkbox-ind2" type="checkbox" name="example-checkbox-d" value="1" checked/>
<label for="demo-checkbox-ind2">Example 1</label>
</div>
</li>
<li>
<div class="checkbox">
<input id="demo-checkbox-ind3" type="checkbox" name="example-checkbox-d" value="1"/>
<label for="demo-checkbox-ind3">Example 2</label>
</div>
</li>
<li>
<div class="checkbox">
<input id="demo-checkbox-ind4" type="checkbox" name="example-checkbox-d" value="1" checked/>
<label for="demo-checkbox-ind4">Example 3</label>
</div>
</li>
<li>
<div class="checkbox">
<input id="demo-checkbox-ind5" type="checkbox" name="example-checkbox-d" value="1" checked/>
<label for="demo-checkbox-ind5">Example 4</label>
</div>
</li>
</ul>
</li>
</ul>
</fieldset>Functionality - Indeterminate Checkbox Group
If you are using dls.js, reference the attributes below for functionality.
Please note that there shouldn’t be any nested disabled options and they should be excluded or removed from the list.
| Attribute Name | Options | Description | Required |
|---|---|---|---|
data-toggle |
checkboxgroup |
Creates a checkboxgroup object; required for dls.js functionality. | yes |
data-indeterminate |
true |
Marks a checkbox as an indeterminate parent | yes |
disabled |
true/false |
If the indeterminate checkbox is set to disabled, all its children are disabled as well. Functions enabled and disabled are available to set the indeterminate checkbox and its children to disabled=false/true |
yes |
Specs - Error with Notification
An error state includes an alert message that communicates to the customer the reason for the error and how to fix it. If more than one checkbox entry exists within a group, place the alert message at the top of the input group, not directly under the individual entry.
Icon = Small (default), Status - Warning (error)
Text = Body 3, Status - Warning (error)
Example - Error with Notification
<fieldset>
<div class="checkbox">
<input id="demo-checkbox-7" type="checkbox" name="example-checkbox" value="1" required title="Please read the terms and conditions" aria-describedby="alert-error" aria-invalid="true" onclick="toggleCheckboxAria(this);"/>
<label for="demo-checkbox-7">I agree to the <a href="#example">Terms and Conditions</a>.</label>
</div>
<div id="alert-error" class="alert alert-dismissible dls-color-warning pad-1-lr" role="alert">
<i class="icon" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
<span>Review and agree to the Terms and Conditions to continue</span>
</div>
</fieldset>
<script>
function toggleCheckboxAria(t) {
if(t.getAttribute("aria-invalid") === "true") {
t.removeAttribute("aria-describedby");
t.setAttribute("aria-invalid","false");
document.getElementById("alert-error").classList.add("invisible")
} else {
t.setAttribute("aria-describedby","alert-error");
t.setAttribute("aria-invalid","true");
document.getElementById("alert-error").classList.remove("invisible")
}
}
</script>