Skip to main content Skip to main content
Components

Multi select

Status: To be reviewed

Documentation updated in June 2026.

How to use ‘to be reviewed’ components
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.
Use the multi select component to let users select all the items in a table.

Contents

Open this example (Multi select (example)) in a new window 
<table class="govuk-table" data-module="moj-multi-select" data-id-prefix="cases-">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col" id="cases-select-all"></th>
      <th class="govuk-table__header" scope="col">Name</th>
      <th class="govuk-table__header" scope="col">Case ID</th>
      <th class="govuk-table__header" scope="col">Caseworker</th>
      <th class="govuk-table__header" scope="col">Date opened</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="case-sam-smith">
          <label class="govuk-label govuk-checkboxes__label" for="case-sam-smith">
            <span class="govuk-visually-hidden">Select Sam Smith</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Sam Smith</td>
      <td class="govuk-table__cell">PC-8944-4900</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">8 Jan 2026</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="case-sara-williams" value="sara-williams">
          <label class="govuk-label govuk-checkboxes__label" for="sara-williams">
            <span class="govuk-visually-hidden">Select Sara Williams</span>
          </label>
        </div>
      </td>
      </td>
      <td class="govuk-table__cell">Sara Williams</td>
      <td class="govuk-table__cell">PC-2876-1190</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">9 Feb 2026</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="case-alex-shepherd" value="alex-shepherd">
          <label class="govuk-label govuk-checkboxes__label" for="alex-shepherd">
            <span class="govuk-visually-hidden">Select Alex Shepherd</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Alex Shepherd</td>
      <td class="govuk-table__cell">PC-2006-1783</td>
      <td class="govuk-table__cell">Martin Williams</td>
      <td class="govuk-table__cell">14 March 2025</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="case-manjit-singh" value="manjit-singh">
          <label class="govuk-label govuk-checkboxes__label" for="case-manjit-singh">
            <span class="govuk-visually-hidden">Select Manjit Singh</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Manjit Singh</td>
      <td class="govuk-table__cell">PC-2006-1783</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">13 Dec 2025</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="case-george-jones" value="george-jones">
          <label class="govuk-label govuk-checkboxes__label" for="case-george-jones">
            <span class="govuk-visually-hidden">Select George Jones</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">George Jones</td>
      <td class="govuk-table__cell">PC-8009-1564</td>
      <td class="govuk-table__cell">Martin Williams</td>
      <td class="govuk-table__cell">4 May 2026</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="case-ali-mohammed" value="ali-mohammed">
          <label class="govuk-label govuk-checkboxes__label" for="case-ali-mohammed">
            <span class="govuk-visually-hidden">Select Ali Mohammed</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Ali Mohammed</td>
      <td class="govuk-table__cell">PC-8009-1500</td>
      <td class="govuk-table__cell">Alice Watson</td>
      <td class="govuk-table__cell">3 May 2026</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="case-tom-edwards" value="tom-edwards">
          <label class="govuk-label govuk-checkboxes__label" for="case-tom-edwards">
            <span class="govuk-visually-hidden">Select Tom Edwards</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Tom Edwards</td>
      <td class="govuk-table__cell">PC-8011-1437</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">1 Feb 2026</td>
    </tr>
  </tbody>
</table>


<table class="govuk-table" data-module="moj-multi-select" data-id-prefix="cases-">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col" id="cases-select-all"></th>
      <th class="govuk-table__header" scope="col">Name</th>
      <th class="govuk-table__header" scope="col">Case ID</th>
      <th class="govuk-table__header" scope="col">Caseworker</th>
      <th class="govuk-table__header" scope="col">Date opened</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="case-sam-smith">
          <label class="govuk-label govuk-checkboxes__label" for="case-sam-smith">
            <span class="govuk-visually-hidden">Select Sam Smith</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Sam Smith</td>
      <td class="govuk-table__cell">PC-8944-4900</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">8 Jan 2026</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="case-sara-williams" value="sara-williams">
          <label class="govuk-label govuk-checkboxes__label" for="sara-williams">
            <span class="govuk-visually-hidden">Select Sara Williams</span>
          </label>
        </div>
      </td>
      </td>
      <td class="govuk-table__cell">Sara Williams</td>
      <td class="govuk-table__cell">PC-2876-1190</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">9 Feb 2026</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="case-alex-shepherd" value="alex-shepherd">
          <label class="govuk-label govuk-checkboxes__label" for="alex-shepherd">
            <span class="govuk-visually-hidden">Select Alex Shepherd</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Alex Shepherd</td>
      <td class="govuk-table__cell">PC-2006-1783</td>
      <td class="govuk-table__cell">Martin Williams</td>
      <td class="govuk-table__cell">14 March 2025</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="case-manjit-singh" value="manjit-singh">
          <label class="govuk-label govuk-checkboxes__label" for="case-manjit-singh">
            <span class="govuk-visually-hidden">Select Manjit Singh</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Manjit Singh</td>
      <td class="govuk-table__cell">PC-2006-1783</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">13 Dec 2025</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="case-george-jones" value="george-jones">
          <label class="govuk-label govuk-checkboxes__label" for="case-george-jones">
            <span class="govuk-visually-hidden">Select George Jones</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">George Jones</td>
      <td class="govuk-table__cell">PC-8009-1564</td>
      <td class="govuk-table__cell">Martin Williams</td>
      <td class="govuk-table__cell">4 May 2026</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="case-ali-mohammed" value="ali-mohammed">
          <label class="govuk-label govuk-checkboxes__label" for="case-ali-mohammed">
            <span class="govuk-visually-hidden">Select Ali Mohammed</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Ali Mohammed</td>
      <td class="govuk-table__cell">PC-8009-1500</td>
      <td class="govuk-table__cell">Alice Watson</td>
      <td class="govuk-table__cell">3 May 2026</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="case-tom-edwards" value="tom-edwards">
          <label class="govuk-label govuk-checkboxes__label" for="case-tom-edwards">
            <span class="govuk-visually-hidden">Select Tom Edwards</span>
          </label>
        </div>
      </td>
      <td class="govuk-table__cell">Tom Edwards</td>
      <td class="govuk-table__cell">PC-8011-1437</td>
      <td class="govuk-table__cell">Annabel Crangle</td>
      <td class="govuk-table__cell">1 Feb 2026</td>
    </tr>
  </tbody>
</table>

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

If you work for MOJ, you can view this component in the MOJ Figma Kit.

If you work outside MOJ, read the guidance on setting up Figma prototypes for non-MOJ staff.

Overview

The multi select component helps users select (and deselect) all the items in a table. It uses a GOV.UK checkbox in the header of the first column.

The items could be cases, applications, referrals or accommodation.

When to use

Use the multi select component to help users save time when they’re applying an action to 2 or more items in a table, for example a case list.

These actions could be ‘assign’, ‘delete’, ‘mark as read’ or ‘edit’.

You can use this component with the sortable table component but if the table is paginated, items will only be selected on the first page.

This component does not prevent the user selecting (and deselecting) individual rows.

When not to use

Do not use the multi select component outside of a table.

Similar or linked components

There’s also the:

How to use

Use the multi select component with a table, for example the GOV.UK table component.

Helping users carry out the action

Combine the multi select component with other building blocks to enable users to apply an action to multiple items. For example, the GOV.UK button component or button menu component.

Destructive actions

If the user is applying a destructive action to items (for example deleting, withdrawing or archiving), add an extra step in the journey for them to confirm they want to do this.

Error messages

If the user selects a bulk action button without selecting any items, show an error message.

Error state Error message
No item has been selected from the table Select an item for this task

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.

div>

Support links

All content is available under the Open Government Licence v3.0, except where otherwise stated