Components Multi select

Last updated: 8 January 2021

<table class="govuk-table" data-module="moj-multi-select" data-multi-select-checkbox="#select-all">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col" id="select-all"></th>
      <th class="govuk-table__header" scope="col">Name</th>
      <th class="govuk-table__header" scope="col">Elevation</th>
      <th class="govuk-table__header" scope="col">Continent</th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">First summit</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row govuk-table__row--selected">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-aconcagua">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-aconcagua">
            <span class="govuk-visually-hidden">Select Aconcagua</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Aconcagua</td>
      <td class="govuk-table__cell">6,961 meters</td>
      <td class="govuk-table__cell">South America</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1897</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-denali" value="denali">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-denali">
            <span class="govuk-visually-hidden">Select Denali</span>
          </label>
        </div>
      </td>
      </td>
      <td class="govuk-table__cell">Denali</td>
      <td class="govuk-table__cell">6,194 meters</td>
      <td class="govuk-table__cell">North America</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1913</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-elbrus" value="elbrus">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-elbrus">
            <span class="govuk-visually-hidden">Select Elbrus</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Elbrus</td>
      <td class="govuk-table__cell">5,642 meters</td>
      <td class="govuk-table__cell">Europe</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1874</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-everest" value="everest">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-everest">
            <span class="govuk-visually-hidden">Select Everest</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Everest</td>
      <td class="govuk-table__cell">8,850 meters</td>
      <td class="govuk-table__cell">Asia</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1953</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-kilimanjaro" value="kilimanjaro">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-kilimanjaro">
            <span class="govuk-visually-hidden">Select Kilimanjaro</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Kilimanjaro</td>
      <td class="govuk-table__cell">5,895 meters</td>
      <td class="govuk-table__cell">Africa</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1889</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-puncak-jaya" value="puncak-jaya">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-puncak-jaya">
            <span class="govuk-visually-hidden">Select Puncak Jaya</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Puncak Jaya</td>
      <td class="govuk-table__cell">4,884 meters</td>
      <td class="govuk-table__cell">Australia</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1962</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-vinson" value="vinson">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-vinson">
            <span class="govuk-visually-hidden">Select Vinson</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Vinson</td>
      <td class="govuk-table__cell">4,897 meters</td>
      <td class="govuk-table__cell">Antarctica</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1966</td>
    </tr>
  </tbody>
</table>


<table class="govuk-table" data-module="moj-multi-select" data-multi-select-checkbox="#select-all">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col" id="select-all"></th>
      <th class="govuk-table__header" scope="col">Name</th>
      <th class="govuk-table__header" scope="col">Elevation</th>
      <th class="govuk-table__header" scope="col">Continent</th>
      <th class="govuk-table__header govuk-table__header--numeric" scope="col">First summit</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row govuk-table__row--selected">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-aconcagua">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-aconcagua">
            <span class="govuk-visually-hidden">Select Aconcagua</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Aconcagua</td>
      <td class="govuk-table__cell">6,961 meters</td>
      <td class="govuk-table__cell">South America</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1897</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-denali" value="denali">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-denali">
            <span class="govuk-visually-hidden">Select Denali</span>
          </label>
        </div>
      </td>
      </td>
      <td class="govuk-table__cell">Denali</td>
      <td class="govuk-table__cell">6,194 meters</td>
      <td class="govuk-table__cell">North America</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1913</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-elbrus" value="elbrus">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-elbrus">
            <span class="govuk-visually-hidden">Select Elbrus</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Elbrus</td>
      <td class="govuk-table__cell">5,642 meters</td>
      <td class="govuk-table__cell">Europe</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1874</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-everest" value="everest">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-everest">
            <span class="govuk-visually-hidden">Select Everest</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Everest</td>
      <td class="govuk-table__cell">8,850 meters</td>
      <td class="govuk-table__cell">Asia</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1953</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-kilimanjaro" value="kilimanjaro">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-kilimanjaro">
            <span class="govuk-visually-hidden">Select Kilimanjaro</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Kilimanjaro</td>
      <td class="govuk-table__cell">5,895 meters</td>
      <td class="govuk-table__cell">Africa</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1889</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-puncak-jaya" value="puncak-jaya">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-puncak-jaya">
            <span class="govuk-visually-hidden">Select Puncak Jaya</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Puncak Jaya</td>
      <td class="govuk-table__cell">4,884 meters</td>
      <td class="govuk-table__cell">Australia</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1962</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-vinson" value="vinson">
          <label class="govuk-label govuk-checkboxes__label" for="mountain-vinson">
            <span class="govuk-visually-hidden">Select Vinson</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Vinson</td>
      <td class="govuk-table__cell">4,897 meters</td>
      <td class="govuk-table__cell">Antarctica</td>
      <td class="govuk-table__cell govuk-table__cell--numeric">1966</td>
    </tr>
  </tbody>
</table>

When to use

Use the multi select component to let users select multiple items in a list.

How to use

If you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks table macro.

Contribute

Discuss multi select on GitHub