Multi select

Open this example in a new window

Contents

    
      <div class="govuk-form-group govuk-!-margin-bottom-2">
    
        <fieldset class="govuk-fieldset">
    
          <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
            Multi-select
    
          </legend>
    
          <div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select" display-name="Multi-select" data-module="govuk-checkboxes">
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect" name="filters.multiselect" type="checkbox" value="value1">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect">
                Value 1
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-2" name="filters.multiselect" type="checkbox" value="value2" checked>
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-2">
                Value 2
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-3" name="filters.multiselect" type="checkbox" value="value3" checked>
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-3">
                Value 3
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-4" name="filters.multiselect" type="checkbox" value="value4">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-4">
                Value 4
              </label>
    
            </div>
    
          </div>
    
        </fieldset>
    
      </div>
    
    </div>

    {% from "dpr/components/_inputs/multi-select/view.njk" import dprMultiSelect %}
    
    {{
      dprMultiSelect({
        text: "Multi-select",
        name: "multiselect",
        type: "multiselect",
        value: "value2,value3",
        options: [
          { value: "value1", text: "Value 1" },
          { value: "value2", text: "Value 2" },
          { value: "value3", text: "Value 3" },
          { value: "value4", text: "Value 4" }
        ],
        values: [ "value2", "value3" ]
      })
    }}```
  
  </div>
    
  

</div>

</div>


## Overview

The DPR multiselect component is composite of the [GOV design system checkbox component](https://design-system.service.gov.uk/components/checkboxes/).

### When to use

Use the multiselect component when you need to help users:

- select multiple options from a list
- toggle a single option on or off

### When not to use

Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the Radios component.

## How to use

### Default



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/inputs/multiselect/default" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Multi-select (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="300" src="/examples/inputs/multiselect/default" title="Multi-select (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmldefault1">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksdefault1">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmldefault1">
  
```html <div class="multiselect-container govuk-!-margin-bottom-6" data-dpr-module="multiselect-input" data-filter-id="filters.multiselect">
    
      <div class="govuk-form-group govuk-!-margin-bottom-2">
    
        <fieldset class="govuk-fieldset">
    
          <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
            Multi-select
    
          </legend>
    
          <div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select" display-name="Multi-select" data-module="govuk-checkboxes">
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect" name="filters.multiselect" type="checkbox" value="value1">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect">
                Value 1
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-2" name="filters.multiselect" type="checkbox" value="value2" checked>
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-2">
                Value 2
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-3" name="filters.multiselect" type="checkbox" value="value3" checked>
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-3">
                Value 3
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-4" name="filters.multiselect" type="checkbox" value="value4">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-4">
                Value 4
              </label>
    
            </div>
    
          </div>
    
        </fieldset>
    
      </div>
    
    </div>

    {% from "dpr/components/_inputs/multi-select/view.njk" import dprMultiSelect %}
    
    {{
      dprMultiSelect({
        text: "Multi-select",
        name: "multiselect",
        type: "multiselect",
        value: "value2,value3",
        options: [
          { value: "value1", text: "Value 1" },
          { value: "value2", text: "Value 2" },
          { value: "value3", text: "Value 3" },
          { value: "value4", text: "Value 4" }
        ],
        values: [ "value2", "value3" ]
      })
    }}```
  
  </div>
    
  

</div>

</div>


### Long list of select options

When a lost list of select options is provided to the component, the multiselect container with show a sub-section of list items and provide a scroll bar to reveal the remaining options



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/inputs/multiselect/scroll" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Multi-select (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="400" src="/examples/inputs/multiselect/scroll" title="Multi-select (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmlscroll">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksscroll">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmlscroll">
  
```html <div class="multiselect-container govuk-!-margin-bottom-6" data-dpr-module="multiselect-input" data-filter-id="filters.multiselect">
    
      <div class="govuk-form-group govuk-!-margin-bottom-2">
    
        <fieldset class="govuk-fieldset">
    
          <legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
    
            Multi-select
    
          </legend>
    
          <div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select dpr-multi-select-scroll" display-name="Multi-select" data-module="govuk-checkboxes">
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect" name="filters.multiselect" type="checkbox" value="value1">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect">
                Value 1
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-2" name="filters.multiselect" type="checkbox" value="value2">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-2">
                Value 2
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-3" name="filters.multiselect" type="checkbox" value="value3" checked>
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-3">
                Value 3
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-4" name="filters.multiselect" type="checkbox" value="value4">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-4">
                Value 4
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-5" name="filters.multiselect" type="checkbox" value="value5">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-5">
                Value 5
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-6" name="filters.multiselect" type="checkbox" value="value6">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-6">
                Value 6
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-7" name="filters.multiselect" type="checkbox" value="value7">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-7">
                Value 7
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-8" name="filters.multiselect" type="checkbox" value="value8" checked>
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-8">
                Value 8
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-9" name="filters.multiselect" type="checkbox" value="value9">
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-9">
                Value 9
              </label>
    
            </div>
    
            <div class="govuk-checkboxes__item">
              <input class="govuk-checkboxes__input" id="filters.multiselect-10" name="filters.multiselect" type="checkbox" value="value10" checked>
              <label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-10">
                Value 10
              </label>
    
            </div>
    
          </div>
    
        </fieldset>
    
      </div>
    
      <a href="#" class="govuk-link govuk-link--no-visited-state govuk-body-s dpr-multiselect-action__view-all">View full list</a>
      <a href="#" class="govuk-link govuk-link--no-visited-state govuk-body-s dpr-multiselect-action__hide-all dpr-multiselect-action--hide">Hide full list</a>
    
    </div>

    {% from "dpr/components/_inputs/multi-select/view.njk" import dprMultiSelect %}
    
    {{
      dprMultiSelect({
        text: "Multi-select",
        name: "multiselect",
        type: "multiselect",
        value: "value3,value8,value10",
        options: [
          { value: "value1", text: "Value 1" },
          { value: "value2", text: "Value 2" },
          { value: "value3", text: "Value 3" },
          { value: "value4", text: "Value 4" },
          { value: "value5", text: "Value 5" },
          { value: "value6", text: "Value 6" },
          { value: "value7", text: "Value 7" },
          { value: "value8", text: "Value 8" },
          { value: "value9", text: "Value 9" },
          { value: "value10", text: "Value 10" }
        ],
        values: [ "value3", "value8", "value10" ]
      })
    }}```
  
  </div>
    
  

</div>

</div>