Standard Life Digital Framework

Checkbox

full screen new window example HTML markup

A Checkbox is a form element that allow a user to select and unselect values for submission in a form.

Usage

Place the checkbox within a form element. If a group of checkboxes are needed, wrap the group with a role of group

To disable the checkbox whilst keeping it visible, add the disabled attribute to the form control.

Accessible attributes

Accessible attribute	Description
`role="group"`	Container for a group of checkboxes
`aria-checked="false"`	Identifies checkboxes which are not checked.
`aria-checked="true"`	Identifies checkboxes which are checked.

Modifier selectors

Modifier selector	Description
`slb-form__control`	Default form checkboxes.
`slb-form__control-block`	Block form checkboxes.

.slb-form__control - Default form control checkbox.

.slb-form__control-block - Block form control checkbox.

Markup: forms\checkbox-input.hbs

Copy

<form>
    <fieldset role="group" aria-label="Checkbox Example Group">
        <legend class="sr-only">Checkbox Example Group</legend>
        <div class="slb-form__group">
            <input class="[modifier class]" type="checkbox" id="exampleCheckbox-[modifier class]-1" aria-checked="true" checked="checked">
            <label class="slb-form__label" for="exampleCheckbox-[modifier class]-1">
                Checkbox
            </label>
        </div>
        <div class="slb-form__group">
            <input class="[modifier class]" type="checkbox" id="exampleCheckbox-[modifier class]-2" aria-checked="false">
            <label class="slb-form__label" for="exampleCheckbox-[modifier class]-2">
                Checkbox
            </label>
        </div>
        <div class="slb-form__group">
            <input class="[modifier class]" type="checkbox" id="exampleCheckbox-[modifier class]-3" aria-checked="true" disabled checked>
            <label class="slb-form__label" for="exampleCheckbox-[modifier class]-3">
                Checkbox
            </label>
        </div>
        <div class="slb-form__group">
            <input class="[modifier class]" type="checkbox" id="exampleCheckbox-[modifier class]-4" aria-checked="false" disabled>
            <label class="slb-form__label" for="exampleCheckbox-[modifier class]-4">
                Checkbox
            </label>
        </div>
    </fieldset>
</form>

Source: components/forms/_form-control-input.scss