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