Components Multi select

Last updated: 11 October 2022

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

To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.

View component in MoJ Figma Kit

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