Components Multi select

Open this example in a new window

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

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

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.

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

how you have used this component in your service
any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the multi select discussion on Github.

Cookies on MoJ Design System