Components
Multi select
Status: To be reviewedHow ‘to be reviewed’ components work
Components with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently.
Read about all the Design System statuses.
<table class="govuk-table" data-module="moj-multi-select" data-multi-select-checkbox="#select-all" data-multi-select-idprefix="mountains-">
<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" data-multi-select-idprefix="mountains-">
<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.
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.