Filter panel
When to use this component
Use the filter panel component to help users narrow down a large list of results by applying multiple filters.
Use a filter panel when you need to:
- help users narrow down a large list of results
- allow users to filter by multiple criteria at once
- provide sorting options alongside filters
- display the currently applied filters
When not to use this component
Do not use a filter panel:
- when there are only a few items to display (fewer than 10)
- when filtering options are very limited (1-2 options)
- as a replacement for search functionality
- on transactional pages where it might distract from the main task
How it works
The filter panel is typically placed in the left column of a two-column layout, alongside the main content area that displays the filtered results.
The component consists of:
- a collapsible header that shows or hides all filter options
- a selected filters section showing active filters as removable tags
- filter groups, each containing related filter options
- an actions section with apply and clear buttons
Collapsible sections
Both the main panel header and individual filter groups are collapsible. This helps users focus on relevant filters and reduces visual clutter, especially on mobile devices.
The collapsible behaviour uses aria-expanded and aria-controls attributes for accessibility. Screen readers will announce the expanded or collapsed state when users interact with the toggle buttons.
Selected filters
When filters are active, a "Selected filters" section appears showing all applied filters as tags. Users can:
- see at a glance which filters are currently applied
- remove individual filters by clicking on a tag
- clear all filters using the "Clear all filters" link
Each tag includes data attributes (data-filter-group and data-filter-value) that link it to the corresponding checkbox or radio button. When a tag is removed, the JavaScript automatically unchecks the related input.
Filter types
The filter panel supports various input types:
Checkboxes
Use checkboxes when users can select multiple options within a category. This is the most common filter type.
Radio buttons
Use radio buttons when users can only select one option, such as sort order.
Date inputs
Use date inputs for filtering by date ranges, such as "from" and "to" dates.
Search within filters
For filter groups with many options, add a search input to help users find specific values quickly. Place the search input at the top of the filter group, and use the dfe-filter-panel__checkboxes class on the container to enable scrolling when there are many options.
The JavaScript handles the UI interactions (expanding/collapsing, removing tags). You will need to add your own logic to handle the actual filtering of results when the "Apply filters" button is clicked.
HTML example
Copy the HTML from this page directly into your web template. You will need to add JavaScript to handle the filtering logic when users click the "Apply filters" button.
Filter panel
<form method="get" action="">
<div class="dfe-filter-panel" data-module="dfe-filter-panel">
<div class="dfe-filter-panel__header">
<button id="filter-button" class="dfe-filter-panel__button govuk-link" aria-expanded="false" aria-controls="filter-panel-content">
<span class="dfe-filter-panel__button-inner">Filter and sort</span>
</button>
<h2 class="dfe-filter-panel__count">24 results</h2>
</div>
<div class="dfe-filter-panel__content" id="filter-panel-content" role="region" aria-labelledby="filter-button" hidden>
<!-- Sort by section -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">Sort by</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-visually-hidden">
<span class="govuk-fieldset__heading">Sort order</span>
</legend>
<div class="govuk-radios govuk-radios--small">
<div class="govuk-radios__item">
<input type="radio" name="order" id="sort-relevance" value="relevance" class="govuk-radios__input" checked>
<label for="sort-relevance" class="govuk-label govuk-radios__label">Relevance</label>
</div>
<div class="govuk-radios__item">
<input type="radio" name="order" id="sort-newest" value="updated-newest" class="govuk-radios__input">
<label for="sort-newest" class="govuk-label govuk-radios__label">Updated (newest)</label>
</div>
<div class="govuk-radios__item">
<input type="radio" name="order" id="sort-oldest" value="updated-oldest" class="govuk-radios__input">
<label for="sort-oldest" class="govuk-label govuk-radios__label">Updated (oldest)</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Date section -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Date
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" role="group" aria-describedby="date-from-hint">
<legend class="govuk-fieldset__legend">Updated after</legend>
<div id="date-from-hint" class="govuk-hint govuk-!-margin-bottom-2">For example, 28 2 2024</div>
<div class="govuk-date-input" id="date-from">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-from-day" class="govuk-label">Day</label>
<input class="govuk-input govuk-input--width-2" id="date-from-day" name="date_from[day]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-from-month" class="govuk-label">Month</label>
<input class="govuk-input govuk-input--width-2" id="date-from-month" name="date_from[month]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-from-year" class="govuk-label">Year</label>
<input class="govuk-input govuk-input--width-4" id="date-from-year" name="date_from[year]" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" role="group" aria-describedby="date-to-hint">
<legend class="govuk-fieldset__legend">Updated before</legend>
<div id="date-to-hint" class="govuk-hint govuk-!-margin-bottom-2">For example, 13 12 2025</div>
<div class="govuk-date-input" id="date-to">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-to-day" class="govuk-label">Day</label>
<input class="govuk-input govuk-input--width-2" id="date-to-day" name="date_to[day]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-to-month" class="govuk-label">Month</label>
<input class="govuk-input govuk-input--width-2" id="date-to-month" name="date_to[month]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-to-year" class="govuk-label">Year</label>
<input class="govuk-input govuk-input--width-4" id="date-to-year" name="date_to[year]" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Topic section (select) -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Topic
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group">
<label for="topic" class="govuk-label">Topic</label>
<select name="topic" id="topic" class="govuk-select govuk-!-width-full">
<option value="">All topics</option>
<option value="business">Business and industry</option>
<option value="education">Education, training and skills</option>
<option value="health">Health and social care</option>
<option value="money">Money</option>
<option value="transport">Transport</option>
</select>
</div>
<div class="govuk-form-group">
<label for="subtopic" class="govuk-label">Subtopic</label>
<select name="subtopic" id="subtopic" class="govuk-select govuk-!-width-full" disabled>
<option value="">All subtopics</option>
</select>
</div>
</div>
</details>
<!-- Status section (checkboxes) -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Status
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-visually-hidden">Status</legend>
<div class="govuk-checkboxes govuk-checkboxes--small">
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-active" value="active" class="govuk-checkboxes__input">
<label for="status-active" class="govuk-label govuk-checkboxes__label">Active</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-pending" value="pending" class="govuk-checkboxes__input">
<label for="status-pending" class="govuk-label govuk-checkboxes__label">Pending review</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-closed" value="closed" class="govuk-checkboxes__input">
<label for="status-closed" class="govuk-label govuk-checkboxes__label">Closed</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-archived" value="archived" class="govuk-checkboxes__input">
<label for="status-archived" class="govuk-label govuk-checkboxes__label">Archived</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Type section (checkboxes) -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Type
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-visually-hidden">Type</legend>
<div class="govuk-checkboxes govuk-checkboxes--small">
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-services" value="services" class="govuk-checkboxes__input">
<label for="type-services" class="govuk-label govuk-checkboxes__label">Services</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-guidance" value="guidance_and_regulation" class="govuk-checkboxes__input">
<label for="type-guidance" class="govuk-label govuk-checkboxes__label">Guidance and regulation</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-news" value="news_and_communications" class="govuk-checkboxes__input">
<label for="type-news" class="govuk-label govuk-checkboxes__label">News and communications</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-research" value="research_and_statistics" class="govuk-checkboxes__input">
<label for="type-research" class="govuk-label govuk-checkboxes__label">Research and statistics</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-policy" value="policy_and_engagement" class="govuk-checkboxes__input">
<label for="type-policy" class="govuk-label govuk-checkboxes__label">Policy papers and consultations</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-transparency" value="transparency" class="govuk-checkboxes__input">
<label for="type-transparency" class="govuk-label govuk-checkboxes__label">Transparency and FOI releases</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Actions -->
<div class="dfe-filter-panel__actions">
<input type="submit" value="Apply" class="govuk-button dfe-filter-panel__action dfe-filter-panel__action--submit">
</div>
</div>
</div>
</form>
Warning
This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<form method="get" action="">
<div class="dfe-filter-panel" data-module="dfe-filter-panel">
<div class="dfe-filter-panel__header">
<button id="filter-button" class="dfe-filter-panel__button govuk-link" aria-expanded="false" aria-controls="filter-panel-content">
<span class="dfe-filter-panel__button-inner">Filter and sort</span>
</button>
<h2 class="dfe-filter-panel__count">24 results</h2>
</div>
<div class="dfe-filter-panel__content" id="filter-panel-content" role="region" aria-labelledby="filter-button" hidden>
<!-- Sort by section -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">Sort by</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-visually-hidden">
<span class="govuk-fieldset__heading">Sort order</span>
</legend>
<div class="govuk-radios govuk-radios--small">
<div class="govuk-radios__item">
<input type="radio" name="order" id="sort-relevance" value="relevance" class="govuk-radios__input" checked>
<label for="sort-relevance" class="govuk-label govuk-radios__label">Relevance</label>
</div>
<div class="govuk-radios__item">
<input type="radio" name="order" id="sort-newest" value="updated-newest" class="govuk-radios__input">
<label for="sort-newest" class="govuk-label govuk-radios__label">Updated (newest)</label>
</div>
<div class="govuk-radios__item">
<input type="radio" name="order" id="sort-oldest" value="updated-oldest" class="govuk-radios__input">
<label for="sort-oldest" class="govuk-label govuk-radios__label">Updated (oldest)</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Date section -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Date
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" role="group" aria-describedby="date-from-hint">
<legend class="govuk-fieldset__legend">Updated after</legend>
<div id="date-from-hint" class="govuk-hint govuk-!-margin-bottom-2">For example, 28 2 2024</div>
<div class="govuk-date-input" id="date-from">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-from-day" class="govuk-label">Day</label>
<input class="govuk-input govuk-input--width-2" id="date-from-day" name="date_from[day]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-from-month" class="govuk-label">Month</label>
<input class="govuk-input govuk-input--width-2" id="date-from-month" name="date_from[month]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-from-year" class="govuk-label">Year</label>
<input class="govuk-input govuk-input--width-4" id="date-from-year" name="date_from[year]" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" role="group" aria-describedby="date-to-hint">
<legend class="govuk-fieldset__legend">Updated before</legend>
<div id="date-to-hint" class="govuk-hint govuk-!-margin-bottom-2">For example, 13 12 2025</div>
<div class="govuk-date-input" id="date-to">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-to-day" class="govuk-label">Day</label>
<input class="govuk-input govuk-input--width-2" id="date-to-day" name="date_to[day]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-to-month" class="govuk-label">Month</label>
<input class="govuk-input govuk-input--width-2" id="date-to-month" name="date_to[month]" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label for="date-to-year" class="govuk-label">Year</label>
<input class="govuk-input govuk-input--width-4" id="date-to-year" name="date_to[year]" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Topic section (select) -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Topic
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group">
<label for="topic" class="govuk-label">Topic</label>
<select name="topic" id="topic" class="govuk-select govuk-!-width-full">
<option value="">All topics</option>
<option value="business">Business and industry</option>
<option value="education">Education, training and skills</option>
<option value="health">Health and social care</option>
<option value="money">Money</option>
<option value="transport">Transport</option>
</select>
</div>
<div class="govuk-form-group">
<label for="subtopic" class="govuk-label">Subtopic</label>
<select name="subtopic" id="subtopic" class="govuk-select govuk-!-width-full" disabled>
<option value="">All subtopics</option>
</select>
</div>
</div>
</details>
<!-- Status section (checkboxes) -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Status
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-visually-hidden">Status</legend>
<div class="govuk-checkboxes govuk-checkboxes--small">
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-active" value="active" class="govuk-checkboxes__input">
<label for="status-active" class="govuk-label govuk-checkboxes__label">Active</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-pending" value="pending" class="govuk-checkboxes__input">
<label for="status-pending" class="govuk-label govuk-checkboxes__label">Pending review</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-closed" value="closed" class="govuk-checkboxes__input">
<label for="status-closed" class="govuk-label govuk-checkboxes__label">Closed</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="status[]" id="status-archived" value="archived" class="govuk-checkboxes__input">
<label for="status-archived" class="govuk-label govuk-checkboxes__label">Archived</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Type section (checkboxes) -->
<details class="dfe-filter-section">
<summary class="dfe-filter-section__summary">
<h2 class="dfe-filter-section__summary-heading">
<span class="govuk-visually-hidden">Filter by </span>Type
</h2>
</summary>
<div class="dfe-filter-section__content">
<div class="govuk-form-group govuk-!-margin-bottom-2">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-visually-hidden">Type</legend>
<div class="govuk-checkboxes govuk-checkboxes--small">
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-services" value="services" class="govuk-checkboxes__input">
<label for="type-services" class="govuk-label govuk-checkboxes__label">Services</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-guidance" value="guidance_and_regulation" class="govuk-checkboxes__input">
<label for="type-guidance" class="govuk-label govuk-checkboxes__label">Guidance and regulation</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-news" value="news_and_communications" class="govuk-checkboxes__input">
<label for="type-news" class="govuk-label govuk-checkboxes__label">News and communications</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-research" value="research_and_statistics" class="govuk-checkboxes__input">
<label for="type-research" class="govuk-label govuk-checkboxes__label">Research and statistics</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-policy" value="policy_and_engagement" class="govuk-checkboxes__input">
<label for="type-policy" class="govuk-label govuk-checkboxes__label">Policy papers and consultations</label>
</div>
<div class="govuk-checkboxes__item">
<input type="checkbox" name="type[]" id="type-transparency" value="transparency" class="govuk-checkboxes__input">
<label for="type-transparency" class="govuk-label govuk-checkboxes__label">Transparency and FOI releases</label>
</div>
</div>
</fieldset>
</div>
</div>
</details>
<!-- Actions -->
<div class="dfe-filter-panel__actions">
<input type="submit" value="Apply" class="govuk-button dfe-filter-panel__action dfe-filter-panel__action--submit">
</div>
</div>
</div>
</form>
{% endblock %}If you would like any additional advice or guidance with using this example on Power Pages, please contact the Solutions Delivery Team.