A checkbox is a form component used to select or deselect item(s) in a list. The list can be a single item with checkbox or multiple items, each with their own checkbox. Checkboxes have three visual states (checked, unchecked, and indeterminate).

Use a checkbox to select or deselect item(s) in a list. Use a single checkbox by itself in a toggle scenario (ex. "remember me" in a login scenario). Use within a group for multi-select scenarios, where a user chooses one or more items from a group of choices that are NOT mutually exclusive.

Checkbox Styles

To use sme checkbox styling you must encapsulate the checkbox in a container with the .sme-checkbox class. Note that indeterminate checkboxes require custom management of the checkbox state using the indeterminate property.

Unselected

<div class="sme-checkbox sme-documentation-example"> <label> <input aria-label="Control label" type="checkbox" aria-checked="false"> <span aria-hidden="true">Control label</span> </label> </div>

Selected

<div class="sme-checkbox sme-documentation-example"> <label> <input aria-label="Control label" type="checkbox" checked="checked" aria-checked="true"> <span aria-hidden="true">Control label</span> </label> </div>

Intermediate

<div class="sme-checkbox sme-documentation-example"> <label> <input aria-label="Control label" type="checkbox" [indeterminate]="true" aria-checked="false"> <span aria-hidden="true">Control label</span> </label> </div>

Disabled

<div class="sme-checkbox sme-documentation-example"> <label> <input aria-label="Control label" type="checkbox" disabled="disabled" aria-checked="false"> <span aria-hidden="true">Control label</span> </label> </div>

Disabled and Selected

<div class="sme-checkbox sme-documentation-example"> <label> <input aria-label="Control label" type="checkbox" checked="checked" disabled="disabled" aria-checked="true"> <span aria-hidden="true">Control label</span> </label> </div>

Disabled and Intermediate

<div class="sme-checkbox sme-documentation-example"> <label> <input aria-label="Control label" type="checkbox" [indeterminate]="true" disabled="disabled" aria-checked="false"> <span aria-hidden="true">Control label</span> </label> </div>