Checkbox

The Checkbox component is an interactive UI element that allows users to select one or more options from a list of choices.

default

checked

disabled

indeterminate

Label LeftLabel LeftLabel LeftLabel LeftLabel RightLabel RightLabel RightLabel Right

Code

<input type="checkbox" checked="checked" class="backoffice-checkbox" />

<!-- Or with label, include the bo-label -->

<label class="bo-label" htmlFor="checkbox">
  Label
  <input type="checkbox" checked="checked" class="backoffice-checkbox" />
</label>

<!-- To disable the checkbox, add the disabled attribute -->
<label class="bo-label backoffice-input-disabled" htmlFor="checkbox">
  Label
  <input type="checkbox" checked="checked" disabled class="backoffice-checkbox" />
</label>

Details

Attribute	Type	Description
.backoffice-checkbox	component	The component for the checkbox
[disabled]	modifier	The disabled state of the checkbox
[checked]	modifier	The checked state of the checkbox
[indeterminate]	modifier	The indeterminate state of the checkbox
[aria-checked="true"]	alternative	The checked state of the checkbox alternative
[aria-checked="mixed"]	alternative	The indeterminate state of the checkbox alternative
.backoffice-checkbox-indeterminate	alternative	The indeterminate state of the checkbox alternative, to be used with the `backoffice-checkbox` class