Checkbox

Examples

<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>

Anatomy

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

Spacing

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

Usage guidelines

Best practices:

1. Checkboxes and radio buttons are not interchangeable. A set of checkboxes should be used to select as many options as desired (or none). A set of radio buttons should be used to select only a single option from a list of mutually exclusive options.
2. Users should be able to select either the text label or the checkbox to select an option.
3. Standalone checkboxes should only be used in situations where the context is clear without an associated text label.

Checkboxes should be used when:

1. You want users to select multiple items from a predetermined list of items.
2. Users need to see all available options at once.
3. Turning checkbox input on or off to indicate whether you agree to the terms.

Checkboxes should not be used when:

1. It is for selecting one 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.

Behaviour
In hover and keyboard focus states, a border should display. Selected checkbox fills should be the same as button border colour. In the disabled state, border and text colour should display as the disabled colour.

Accessibility guidelines

Aria attributes

1. Use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.
2. The button has an aria-controls property set to the unique id of the panel it controls.

Keyboard accessibility

1. Tab or Shift-Tab to navigate between checkboxes.
2. Space to trigger a state change while checkbox input has focus.

Focus indicator

1. Ensure that checkboxes are included in the natural tab order of the page and can be focused using the Tab key.
2. Provide a clear visual indication of focus for checkboxes. This can include an outline, border, or background colour change.
3. When multiple checkboxes are present, ensure that users can navigate between checkboxes using the Tab key and that the focus indicator clearly indicates which checkbox is currently focused.
4. Tab order should follow a logical sequence that is consistent with the visual layout of the checkboxes.

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;