Checkbox

This component is used when you require users to select multiple items from a list.

Examples

HTML React Web Component
<div class="row">
    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkboxDefault" />
            <label class="form-check-label" for="checkboxDefault">
                Default
            </label>
        </div>
    </div>
    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkboxActive" checked />
            <label class="form-check-label" for="checkboxActive">
                Active
            </label>
        </div>   
    </div>
    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkboxDisabled" disabled />
            <label class="form-check-label" for="checkboxDisabled">
                Disabled
            </label>
        </div>
    </div>
</div>
View on React storybook View on Web component storybook

Anatomy

Checkbox Anatomy
  1. Checkbox: Allows users to select and deselect the checkbox.
  2. Label: Informs the user what the option is for the checkbox.

Spacing

Checkbox Spacing

Within the checkbox
Ensure that there is at least 16px of horizontal spacing between the checkbox and the label.

Usage guidelines

Checkboxes should be used:

  • When you want users to select multiple items from a predetermined list of items.
  • When your users need to see all available options at once.

Checkboxes should not be used:

  • When selecting 1 option from a predetermined list of items. Using radio buttons would be more appropriate.

Usability guidelines

List available options vertically
It is recommended to list options vertically as horizontal listings may confuse users and make it difficult to tell which label belongs to which option.

Use logical labels
Ensure that labels for checkboxes and groups are clear to the user.

Logical ordering
Ensure that options provided are organised in a meaningful way as this would help users to find the options easily.

Ensure there is enough spacing
Space options out and ensure there is adequate space for touch devices or mobile screens.

Checkbox design tokens

$form-check-input-width: 1.125em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width+.5em !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='#{$form-check-input-checked-color}' viewBox='0 0 16 16'><path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
$form-check-input-disabled-opacity: .5 !default;
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;

Last updated 22 November 2023
Home


Latest version 2.2.0