{{#extend "layout-docs"}}

  {{#replace "pageTitle"}}Checkbox select all{{/replace}}

  {{#replace "main"}}
    <section id="blocks-select-all-checkbox" class="grid--fluid row-spacer">
      {{#each checkbox-select-all}}
        <h2>{{description}}</h2>
        {{> checkbox-select-all}}
        <pre class="code--debug"><code class="language-html">{{> checkbox-select-all-src}}</code></pre>
      {{/each}}
    </section>

    <section id="blocks-select-all-checkbox-documentation" class="grid--fluid row-spacer">
      <h2>Introduction</h2>
      <p>
        The select all checkbox must be contained within a table and contain one or more <code>input[type="checkbox"]</code> elements. The <code>data-js=checkbox-select-all</code> 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 <code>data-js=input-checkbox</code> <a href="#blocks-input-checkbox">helper</a>.
      </p>
      <h2>Usage</h2>
      <div class="table-scroll-x">
        <table class="table--debug">
          <tr>
            <th>Class name</th>
            <th>Effect</th>
            <th>Remarks</th>
          </tr>

          <tr>
            <td><code>[data-js="checkbox-select-all"]</code></td>
            <td>Placed directly on the <code>input[type="checkbox"]</code> element.</td>
            <td>Required.</td>
          </tr>
        </table>
      </div>
    </section>
  {{/replace}}

{{/extend}}