Filter group

Use this component when you have a wide table users will need to scroll horizontally.

Open example in new window
HTML 

<div class="govuk-form-group">

<details class="dl-filter-group"  data-module="selected-counter">
    <summary class="dl-filter-group__summary"><h3 class="govuk-heading-s dl-filter-group__heading">Location</h3><svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="dl-filter-group__icon dl-filter-group__icon--up"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"></path></svg>
        <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="dl-filter-group__icon dl-filter-group__icon--down"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"></path></svg>
    </summary>
    <fieldset class="govuk-fieldset dl-filter-group__fieldset">
        <legend class="govuk-fieldset__legend govuk-fieldset__legend--m govuk-visually-hidden">
          <h1 class="govuk-fieldset__heading">
            Location
          </h1>
        </legend>

    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="investigation-yes" name="investigation" type="radio" value="true">
        <label class="govuk-label govuk-radios__label" for="investigation-yes">
        UK
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="investigation-no" name="investigation" type="radio" value="false">
        <label class="govuk-label govuk-radios__label" for="investigation-no">
        Rest of World
        </label>
      </div>
    </div>

    </fieldset>
</details>

</div>
Jinja 
{%- from "digital-land-frontend/components/filter-group/macro.jinja" import dlFilterGroup %}
<div class="govuk-form-group">
    {% call dlFilterGroup({
      "title": "Location",
      "is_open": False,
      "selected": 0
    }) %}
    <div class="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="investigation-yes" name="investigation" type="radio" value="true">
        <label class="govuk-label govuk-radios__label" for="investigation-yes">
        UK
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="investigation-no" name="investigation" type="radio" value="false">
        <label class="govuk-label govuk-radios__label" for="investigation-no">
        Rest of World
        </label>
      </div>
    </div>
    {% endcall %}
</div>

Initialise JS module

The dlFilterGroup component can be progressively enhanced.

When progressively enhanced it will show (and update) a count of the number of items selected in the group.

<script>
    var $filters = document.querySelectorAll('[data-module="selected-counter"]')
    $filters.forEach(filter => {
        new window.DLFrontend.SelectedCounter(filter).init()
    })

    var $filterCheckboxes = document.querySelectorAll('[data-module="filter-checkboxes"]')
    $filterCheckboxes.forEach(el => {
        new window.DLFrontend.FilterCheckboxes(el).init()
    })
</script>