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

Select all checkboxes

 
<table class="table">
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1" class="" data-js="checkbox-select-all">
          <label for="select-all-1">Select all Checkbox</label>
        </div>
      </td>
    </tr>
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1-1" class="">
          <label for="select-all-1-1">Checkbox 1</label>
        </div>
      </td>
    </tr>
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1-2" class="">
          <label for="select-all-1-2">Checkbox 2</label>
        </div>
      </td>
    </tr>
    <tr class="table__tr">
      <td class="table__td">
        <div class="input-checkbox" data-js="input-checkbox">
          <input type="checkbox" id="select-all-1-3" class="">
          <label for="select-all-1-3">Checkbox 3</label>
        </div>
      </td>
    </tr>
</table>

Introduction

The select all checkbox must be contained within a table and contain one or more input[type="checkbox"] elements. The data-js=checkbox-select-all attribute should be added to the element that is to trigger the bulk toggle. This behaviour will function correctly on both unstyled checkboxes and checkboxes styled with the data-js=input-checkbox helper.

Usage

Class name Effect Remarks
[data-js="checkbox-select-all"] Placed directly on the input[type="checkbox"] element. Required.