Checkbox

Introduction

The custom checkbox we use must be wrapped in a input-checkbox element.

The data-js=input-checkbox has been deprecated and will be removed in v2.0, in favour of the pure CSS implementation, to be more in-line with how the radio buttons are used.

Checkbox input (CSS-only)

<div class="input-checkbox" >
  <input type="checkbox" id="input-checkbox-css-example" name="input-checkbox-css-example" class="" value="test">
  <label for="input-checkbox-css-example">Checkbox label</label>
</div>

Checkbox input (unchecked)

<div class="input-checkbox" data-js="input-checkbox">
  <input type="checkbox" id="input-checkbox-example" name="input-checkbox-example" class="" value="test">
  <label for="input-checkbox-example">Checkbox label</label>
</div>

Checkbox input (checked)

<div class="input-checkbox" data-js="input-checkbox">
  <input type="checkbox" id="input-checkbox-example-2" name="input-checkbox-example-2" class="" value="test" checked>
  <label for="input-checkbox-example-2">Checkbox label</label>
</div>

Checkbox input (hidden label)

<div class="input-checkbox input-checkbox--hiddenlabel" data-js="input-checkbox">
  <input type="checkbox" id="input-checkbox-example-3" name="input-checkbox-example-3" class=" input-checkbox--hiddenlabel" value="test" checked>
  <label for="input-checkbox-example-3">Checkbox label</label>
</div>

Disabled (unchecked)

<div class="input-checkbox" data-js="input-checkbox">
  <input type="checkbox" id="input-checkbox-example-4" name="input-checkbox-example-4" class="" value="test" disabled>
  <label for="input-checkbox-example-4">Checkbox label</label>
</div>

Disabled (checked)

<div class="input-checkbox" data-js="input-checkbox">
  <input type="checkbox" id="input-checkbox-example-5" name="input-checkbox-example-5" class="" value="test" disabled checked>
  <label for="input-checkbox-example-5">Checkbox label</label>
</div>

Usage

Class name Effect Remarks
.input-checkbox Placed on a wrapper around the checkbox input and label. Adds custom styling to the checkbox and label as per the UIF Required.
[data-js="input-checkbox"] Placed on the input-checkbox element. In the event that the input and label aren't direct siblings, this JS hook will handle whether a checkbox is checked or not. Required if input and label are not direct siblings.
Deprecated — will be removed in v2.0
.input-checkbox--hiddenlabel Placed on the input-checkbox element. Will visually hide the text of the label. The text will still be readable by screenreaders. Optional