Components Filter

experimental

Use the Filter component to filter a large set of results.

<div class="hmcts-filter">

<div class="hmcts-filter__header">

<div class="hmcts-filter__header-title">
  <h2 class="govuk-heading-m">Filter</h2>
</div>

<div class="hmcts-filter__header-action">

</div>

</div>

<div class="hmcts-filter__content">

<div class="hmcts-filter__selected">

  <div class="hmcts-filter__selected-heading">

    <div class="hmcts-filter__heading-title">
      <h2 class="govuk-heading-m">Selected filters</h2>
    </div>

    <div class="hmcts-filter__heading-action">
      <p><a class="govuk-link govuk-link--no-visited-state" href="">Clear filters</a></p>
    </div>

  </div>

  <h3 class="govuk-heading-s govuk-!-margin-bottom-0">Type</h3>

  <ul class="hmcts-filter-tags">

    <li><a class="hmcts-filter__tag" href="/path/to/remove/this"><span class="govuk-visually-hidden">Remove this filter</span> Divorce</a></li>

    <li><a class="hmcts-filter__tag" href="/path/to/remove/this"><span class="govuk-visually-hidden">Remove this filter</span> Financial remedy</a></li>

  </ul>

  <h3 class="govuk-heading-s govuk-!-margin-bottom-0">Status</h3>

  <ul class="hmcts-filter-tags">

    <li><a class="hmcts-filter__tag" href="/path/to/remove/this"><span class="govuk-visually-hidden">Remove this filter</span> Application drafted</a></li>

  </ul>

</div>

<div class="hmcts-filter__options">

  <button type="submit" class="govuk-button" data-module="govuk-button">
    Apply filters
  </button>

  <div class="govuk-form-group">
    <label class="govuk-label govuk-label--m" for="keywords">
      Keywords
    </label>

    <input class="govuk-input" id="keywords" name="keywords" type="text">
  </div>

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

    <fieldset class="govuk-fieldset">

      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">

        Type

      </legend>

      <div class="govuk-checkboxes govuk-checkboxes--small">

        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="type" name="type" type="checkbox" value="1" checked>
          <label class="govuk-label govuk-checkboxes__label" for="type">
            Divorce (18)
          </label>

        </div>

        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="type-2" name="type" type="checkbox" value="2" checked>
          <label class="govuk-label govuk-checkboxes__label" for="type-2">
            Financial Remedy (5)
          </label>

        </div>

        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="type-3" name="type" type="checkbox" value="3">
          <label class="govuk-label govuk-checkboxes__label" for="type-3">
            Probate (2)
          </label>

        </div>

      </div>
    </fieldset>

  </div>

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

    <fieldset class="govuk-fieldset">

      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">

        Status

      </legend>

      <div class="govuk-checkboxes govuk-checkboxes--small">

        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="status" name="status" type="checkbox" value="1" checked>
          <label class="govuk-label govuk-checkboxes__label" for="status">
            Application drafted
          </label>

        </div>

        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="status-2" name="status" type="checkbox" value="2">
          <label class="govuk-label govuk-checkboxes__label" for="status-2">
            Awaiting payment
          </label>

        </div>

        <div class="govuk-checkboxes__item">
          <input class="govuk-checkboxes__input" id="status-3" name="status" type="checkbox" value="magistrate">
          <label class="govuk-label govuk-checkboxes__label" for="status-3">
            Petition paid
          </label>

        </div>

      </div>
    </fieldset>

  </div>

</div>

</div>

</div> 
{% from "hmcts-filter/macro.njk" import hmctsFilter %}
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{% from "input/macro.njk" import govukInput %}

{% set filterOptionsHtml %}

{{ govukInput({
id: 'keywords',
name: 'keywords',
label: {
  text: 'Keywords',
  classes: 'govuk-label--m'
}
}) }}

{{ govukCheckboxes({
idPrefix: 'type',
name: 'type',
classes: "govuk-checkboxes--small",
fieldset: {
  legend: {
    text: 'Type',
    classes: 'govuk-fieldset__legend--m'
  }
},
items: [
  {
    value: '1',
    text: 'Divorce (18)',
    checked: true
  },
  {
    value: '2',
    text: 'Financial Remedy (5)',
    checked: true
  },
  {
    value: '3',
    text: 'Probate (2)'
  }
]
}) }}

{{ govukCheckboxes({
idPrefix: 'status',
name: 'status',
classes: "govuk-checkboxes--small",
fieldset: {
  legend: {
    text: 'Status',
    classes: 'govuk-fieldset__legend--m'
  }
},
items: [
  {
    value: '1',
    text: 'Application drafted',
    checked: true
  },
  {
    value: '2',
    text: 'Awaiting payment'
  },
  {
    value: 'magistrate',
    text: 'Petition paid',
    checked: false
  }
]
}) }}
{% endset %}



{{ hmctsFilter({
heading: {
text: 'Filter'
},
selectedFilters: {

heading: {
  text: 'Selected filters'
},

clearLink: {
  text: 'Clear filters'
},

categories: [
  {
    heading: {
      text: 'Type'
    },
    items: [{
      href: '/path/to/remove/this',
      text: 'Divorce'
    }, {
      href: '/path/to/remove/this',
      text: 'Financial remedy'
    }]
  },
  {
    heading: {
      text: 'Status'
    },
    items: [{
      href: '/path/to/remove/this',
      text: 'Application drafted'
    }]
  }
]
},
optionsHtml: filterOptionsHtml
}) }} 

You can configure this component using the Nunjucks macro arguments

When to use this component

Use this component to help users find a particular item in a large collection according to their own preferences and mental models.

How it works

The filter component can take any set of GOV.UK form fields such as radio buttons, checkboxes, memorable date inputs and text boxes.

The filters should reflect attributes about the items in the list of results. For example, if you have a case list with status as a column, then you can have status as a filter.

Users submit the form with one or more filters and the results are filtered accordingly with the filters marked as selected at the top of the filter.

Clicking on a selected filter removes the filter from the results.

Research on this component

This component has been through a number of internal crits. We’ll add to this section once we have tested this component with users.

Get in touch

If you’ve got a question, idea or suggestion share it in #design-system channel on Slack or email the Design System team on design-sytem@hmcts.net