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