Multi select

Open this example in a new window

Contents

    <div class="govuk-form-group govuk-!-margin-bottom-3">
    
      <fieldset class="govuk-fieldset" aria-label="filters.multiselect checkboxes">
    
        <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>
    

    {% 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 in a new window

Contents

    <div class="govuk-form-group govuk-!-margin-bottom-3">
    
      <fieldset class="govuk-fieldset" aria-label="filters.multiselect checkboxes">
    
        <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>
    

    {% 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 in a new window

Contents

    <div class="govuk-form-group govuk-!-margin-bottom-3">
    
      <fieldset class="govuk-fieldset" aria-label="filters.multiselect checkboxes">
    
        <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>
    

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