What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

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.

Note: there is now a CSS-only, Non-JS implementation of this component. Please refer to the UIF Storybook documentation for more information.

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