Multi select

Open this example (Multi-select (example)) in a new window

Contents 

    <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>
    
      <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: "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" ] 
    }) }}

Overview

The DPR multiselect component is composite of the GOV design system checkbox component.

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

Open this example (Multi-select (example)) in a new window

Contents 

    <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>
    
      <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: "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" ] 
    }) }}

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

Open this example (Multi-select (example)) in a new window

Contents 

    <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" ] 
    }) }}