Checkboxes

Checkboxes create an on/off boolean switch that can be built into array.

Icon for component-checkbox

Default Checkbox

The Default Checkbox description from Figma goes here

1<div class="form-check m-1"> 2 <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> 3 <label class="form-check-label" for="flexCheckDefault"> 4 Checkbox Label 5 </label> 6</div>
Icon for copy

Disabled Checkbox

The Disabled Checkbox description from Figma goes here

1<div class="form-check form-check-disabled m-1"> 2 <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled> 3 <label class="form-check-label" for="flexCheckDisabled"> 4 Checkbox Label 5 </label> 6</div> 7<div class="form-check form-check-disabled m-1"> 8 <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled> 9 <label class="form-check-label" for="flexCheckCheckedDisabled"> 10 Checkbox Label 11 </label> 12</div>
Icon for copy

Accessibility

Make it clear what this checkboxes does for the user.

DO

  • What to do with checkboxes

DON'T

  • What not to do with checkboxes


Classes

Complete list of all CSS classes for the component.

NameClass
Default Checkboxcheckbox checkbox-default
Disabled Checkboxcheckbox checkbox-disabled