Report components Interactive Filters
Contents
<div class='dpr-interactive-filters-section'>
<div class='dpr-selected-filters-container'>
<div class='dpr-selected-filters'>
<p class="govuk-body"><strong>Filters:</strong></p>
<a href="#" class="govuk-link govuk-body interactive-remove-filter-button" data-query-param-key=["radio"] data-query-param-value='[["Two"]]' data-query-constraint-values=''>
Radio filter: Two
</a>
<a href="#" class="govuk-link govuk-body interactive-remove-filter-button" data-query-param-key=["filters.multiselect"] data-query-param-value='["value8.2","value8.3"]' data-query-constraint-values=''>
Multiselect: Value 8.2, Value 8.3
</a>
</div>
</div>
<details class="govuk-details" id="dpr-interactive-filters-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Update filters
</span>
</summary>
<div class="govuk-details__text">
<div class='dpr-interactive-filters'>
<div data-dpr-module="interactive-filters" class="dpr-filters sync-filters-form--hidden">
<form id="interactive-filters-form">
<div id="query-error-summary" class="query-error-summary query-error-summary--hidden">
<div class="govuk-error-summary" data-module="govuk-error-summary">
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
</div>
</div>
</div>
</div>
<div class="filter-form-container">
<div class="filter-container">
<div class="dpr-filter-item ">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="filters.field1-hint">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Radio filter
</legend>
<div id="filters.field1-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-radios govuk-radios--small" display-name="Radio filter" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1" name="filters.field1" type="radio" value="one">
<label class="govuk-label govuk-radios__label" for="filters.field1">
One
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1-2" name="filters.field1" type="radio" value="two" checked>
<label class="govuk-label govuk-radios__label" for="filters.field1-2">
Two
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="dpr-filter-item ">
<div class="govuk-form-group">
<label class="govuk-label govuk-label govuk-!-font-weight-bold" for="filters.select">
Select filter
</label>
<div id="filters.select-hint" class="govuk-hint">
(Optional)
</div>
<select class="govuk-select" id="filters.select" name="filters.select" aria-describedby="filters.select-hint" display-name="Select filter">
<option value="" selected disabled>Select your option</option>
<option value="no-filter">None</option>
<option value="value2.1">Value 2.1</option>
<option value="value2.2">Value 2.2</option>
<option value="value2.3">Value 2.3</option>
</select>
</div>
</div>
<div class="dpr-filter-item ">
<div class="dpr-autocomplete-text-input" data-dpr-module="autocomplete-text-input">
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold dpr-inline-label" for="filters.autocomplete">
Autocomplete
</label>
<div id="filters.autocomplete-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-input__wrapper">
<input class="govuk-input autocomplete-text-input-box govuk-input--width-20" id="filters.autocomplete" name="filters.autocomplete" type="search" aria-describedby="filters.autocomplete-hint" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-owns="filtersautocomplete-list" haspopup="true" data-minimum-length="3" data-resource-endpoint="" placeholder="Search" role="combobox" pattern=".+" display-name="Autocomplete">
<div class="govuk-input__suffix" aria-hidden="true">🔍</div>
</div>
</div>
<div id="filtersautocomplete-list" class="autocomplete-text-input-list">
<ul role="listbox" aria-label="Autocomplete options">
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Fezzick">
Fezzick
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="inigo-montoya">
Inigo Montoya
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Prince Humperdink">
Prince Humperdink
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="PrBu">
Princess Buttercup
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Westley">
Westley
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="dpr-filter-item ">
<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">
Multiselect
</legend>
<div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select" display-name="Multiselect" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect" name="filters.multiselect" type="checkbox" value="value8.1">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect">
Value 8.1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-2" name="filters.multiselect" type="checkbox" value="value8.2" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-2">
Value 8.2
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-3" name="filters.multiselect" type="checkbox" value="value8.3" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-3">
Value 8.3
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-4" name="filters.multiselect" type="checkbox" value="value8.4">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-4">
Value 8.4
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="dpr-filter-item dpr-filter-item__span-2 ">
<div class="govuk-form-group">
<div class="dpr-date-range" data-dpr-module="date-range-input">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Daterange
</legend>
<div id='dpr-date-range' data-field-name='daterange'>
<div class="dpr-daterange__start-end-date-wrapper">
<div class="dpr-daterange__start-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Start date" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.start">
Start
</label>
<div id="filters.daterange.start-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.start" name="filters.daterange.start" type="text" value="01/02/2003" aria-describedby="filters.daterange.start-hint" autocomplete="off">
</div>
</div>
<a class="govuk-body-s daterange-set-to-minmax" data-set-to-input='filters.daterange.start' data-set-min-max-value=01/02/2003 data-set-min-max-trigger='true' href="#">
set to min (01/02/2003)
</a>
</div>
</div>
<div class="dpr-daterange__end-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="End date" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.end">
End
</label>
<div id="filters.daterange.end-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.end" name="filters.daterange.end" type="text" value="04/05/2006" aria-describedby="filters.daterange.end-hint" autocomplete="off">
</div>
</div>
<a class="govuk-body-s daterange-set-to-minmax" data-set-to-input='filters.daterange.end' data-set-min-max-value=04/05/2007 data-set-min-max-trigger='true' href="#">
set to max (04/05/2007)
</a>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="dpr-filter-item ">
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label govuk-!-font-weight-bold" for="filters.text">
Text
</label>
<p id="filters.text-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span>
</p>
<input class="govuk-input govuk-input--width-20 govuk-input--error" id="filters.text" name="filters.text" type="text" aria-describedby="filters.text-error" pattern=".+" required="true" display-name="Text">
</div>
</div>
</div>
<div class="filter-actions">
<div class="govuk-button-group">
<button type="submit" class="govuk-button govuk-button--primary" data-module="govuk-button" id="interactive-apply-filters-button">
Apply Filters
</button>
<a id="interactive-reset-filters-button" class="govuk-link govuk-link--no-visited-state dpr-reset-columns-button" href="#" defaultQuery="?filters.field1=one&filters.field7=value8.2&filters.field7=value8.3&filters.daterange.start=2003-02-01&filters.daterange.end=2006-05-04&filters.field7=value8.1&filters.field7=value8.4&filters.select=value2.1&filters.text=Hello">Reset filters</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</details>
</div>
{% from "dpr/components/_filters/filters-interactive/view.njk" import dprInteractiveFilters %}
{% set filterData = {
selectedFilters: [
{
text: "Radio filter: Two",
key: '["radio"]',
value: '["Two"]',
disabled: false,
classes: 'interactive-remove-filter-button',
attributes: {
'aria-label': 'Selected Filter: Radio filter: Two. Click to clear this filter'
}
},
{
text: "Multiselect: Value 8.2, Value 8.3",
key: "[\"filters.multiselect\"]",
value: [
"\"value8.2\"",
"\"value8.3\""
],
disabled: false,
classes: "interactive-remove-filter-button",
attributes: {
"aria-label": "Selected Filter: Multiselect: Value 8.2, Value 8.3. Click to clear this filter"
}
}
],
filters: [
{
text: "Radio filter",
name: 'field1',
id: "radio",
type: "Radio",
options: [
{ value: "one", text: "One" },
{ value: "two", text: "Two" }
],
value: "two"
},
{
text: 'Select filter',
name: 'select',
type: 'Select',
mandatory: false,
options: [
{ value: '', text: 'Select your option', disabled: true, selected: true },
{ disabled: false, text: 'None', value: 'no-filter'},
{value: 'value2.1', text: 'Value 2.1' },
{ value: 'value2.2',text: 'Value 2.2' },
{ value: 'value2.3', text: 'Value 2.3' }
]
},
{
text: 'Autocomplete',
name: 'autocomplete',
type: 'autocomplete',
mandatory: false,
minimumLength: 3,
options: [
{ value: 'Fezzick', text: 'Fezzick' },
{ value: 'inigo-montoya', text: 'Inigo Montoya' },
{ value: 'Prince Humperdink', text: 'Prince Humperdink' },
{ value: 'PrBu', text: 'Princess Buttercup' },
{ value: 'Westley', text: 'Westley' }
]
},
{
mandatory: false,
name: 'multiselect',
options: [
{ text: 'Value 8.1', value: 'value8.1' },
{ text: 'Value 8.2', value: 'value8.2' },
{ text: 'Value 8.3', value: 'value8.3' },
{ text: 'Value 8.4',value: 'value8.4' }
],
text: 'Multiselect',
type: 'multiselect',
value: 'value8.2,value8.3',
values: ['value8.2', 'value8.3']
},
{
text: 'Daterange',
name: 'daterange',
type: 'daterange',
value: {
start: '2003-02-01',
end: '2006-05-04'
},
min: '2003-02-01',
max: '2007-05-04'
},
{
text: 'Text',
name: 'text',
type: 'text',
value: null,
mandatory: true
}
]
} %}
{% set defaultQuery = '?filters.field1=one&filters.field7=value8.2&filters.field7=value8.3&filters.daterange.start=2003-02-01&filters.daterange.end=2006-05-04&filters.field7=value8.1&filters.field7=value8.4&filters.select=value2.1&filters.text=Hello' %}
{{ dprInteractiveFilters(filterData, defaultQuery, 'filters.', true) }}
Overview
The filters component is a collection of filter inputs, whose values contribute the query parameters of the URL.
- Updating a filter input will update the relevant query parameter in the URL.
- Clicking
Apply filterswill submit the URL by refreshing the URL. - Clicking
Reset filterswill restore the the input values to their defaults, and update the URL query params accordingly. - Selected filters are displayed and can be individually removed.
When to use
If you have simple filtering requirements (Radio, Select, Date range), then this component is a good way to reduce code complexity.
When not to use
If you have a requirement for more complex filter options, or options that are not supported by this component, then the MoJ filter component may be more suitable.
How to use
Basic filters
Contents
<div class='dpr-interactive-filters-section'>
<div class='dpr-selected-filters-container'>
<div class='dpr-selected-filters'>
<p class="govuk-body"><strong>Filters:</strong></p>
<a href="#" class="govuk-link govuk-body interactive-remove-filter-button" data-query-param-key=["radio"] data-query-param-value='[["Two"]]' data-query-constraint-values=''>
Radio filter: Two
</a>
<a href="#" class="govuk-link govuk-body interactive-remove-filter-button" data-query-param-key=["filters.multiselect"] data-query-param-value='["value8.2","value8.3"]' data-query-constraint-values=''>
Multiselect: Value 8.2, Value 8.3
</a>
</div>
</div>
<details class="govuk-details" id="dpr-interactive-filters-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Update filters
</span>
</summary>
<div class="govuk-details__text">
<div class='dpr-interactive-filters'>
<div data-dpr-module="interactive-filters" class="dpr-filters sync-filters-form--hidden">
<form id="interactive-filters-form">
<div id="query-error-summary" class="query-error-summary query-error-summary--hidden">
<div class="govuk-error-summary" data-module="govuk-error-summary">
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
</div>
</div>
</div>
</div>
<div class="filter-form-container">
<div class="filter-container">
<div class="dpr-filter-item ">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="filters.field1-hint">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Radio filter
</legend>
<div id="filters.field1-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-radios govuk-radios--small" display-name="Radio filter" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1" name="filters.field1" type="radio" value="one">
<label class="govuk-label govuk-radios__label" for="filters.field1">
One
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="filters.field1-2" name="filters.field1" type="radio" value="two" checked>
<label class="govuk-label govuk-radios__label" for="filters.field1-2">
Two
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="dpr-filter-item ">
<div class="govuk-form-group">
<label class="govuk-label govuk-label govuk-!-font-weight-bold" for="filters.select">
Select filter
</label>
<div id="filters.select-hint" class="govuk-hint">
(Optional)
</div>
<select class="govuk-select" id="filters.select" name="filters.select" aria-describedby="filters.select-hint" display-name="Select filter">
<option value="" selected disabled>Select your option</option>
<option value="no-filter">None</option>
<option value="value2.1">Value 2.1</option>
<option value="value2.2">Value 2.2</option>
<option value="value2.3">Value 2.3</option>
</select>
</div>
</div>
<div class="dpr-filter-item ">
<div class="dpr-autocomplete-text-input" data-dpr-module="autocomplete-text-input">
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold dpr-inline-label" for="filters.autocomplete">
Autocomplete
</label>
<div id="filters.autocomplete-hint" class="govuk-hint">
(Optional)
</div>
<div class="govuk-input__wrapper">
<input class="govuk-input autocomplete-text-input-box govuk-input--width-20" id="filters.autocomplete" name="filters.autocomplete" type="search" aria-describedby="filters.autocomplete-hint" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-owns="filtersautocomplete-list" haspopup="true" data-minimum-length="3" data-resource-endpoint="" placeholder="Search" role="combobox" pattern=".+" display-name="Autocomplete">
<div class="govuk-input__suffix" aria-hidden="true">🔍</div>
</div>
</div>
<div id="filtersautocomplete-list" class="autocomplete-text-input-list">
<ul role="listbox" aria-label="Autocomplete options">
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Fezzick">
Fezzick
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="inigo-montoya">
Inigo Montoya
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Prince Humperdink">
Prince Humperdink
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="PrBu">
Princess Buttercup
</button>
</li>
<li class="autocomplete-text-input-item-hide">
<button type="submit" class="govuk-button govuk-button--inverse autocomplete-text-input-list-button" data-module="govuk-button" data-parent-input="filters.autocomplete" data-static-option-name-value="Westley">
Westley
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="dpr-filter-item ">
<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">
Multiselect
</legend>
<div class="govuk-checkboxes govuk-checkboxes--small dpr-multi-select" display-name="Multiselect" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect" name="filters.multiselect" type="checkbox" value="value8.1">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect">
Value 8.1
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-2" name="filters.multiselect" type="checkbox" value="value8.2" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-2">
Value 8.2
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-3" name="filters.multiselect" type="checkbox" value="value8.3" checked>
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-3">
Value 8.3
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="filters.multiselect-4" name="filters.multiselect" type="checkbox" value="value8.4">
<label class="govuk-label govuk-checkboxes__label" for="filters.multiselect-4">
Value 8.4
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="dpr-filter-item dpr-filter-item__span-2 ">
<div class="govuk-form-group">
<div class="dpr-date-range" data-dpr-module="date-range-input">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-label govuk-!-font-weight-bold">
Daterange
</legend>
<div id='dpr-date-range' data-field-name='daterange'>
<div class="dpr-daterange__start-end-date-wrapper">
<div class="dpr-daterange__start-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="Start date" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.start">
Start
</label>
<div id="filters.daterange.start-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.start" name="filters.daterange.start" type="text" value="01/02/2003" aria-describedby="filters.daterange.start-hint" autocomplete="off">
</div>
</div>
<a class="govuk-body-s daterange-set-to-minmax" data-set-to-input='filters.daterange.start' data-set-min-max-value=01/02/2003 data-set-min-max-trigger='true' href="#">
set to min (01/02/2003)
</a>
</div>
</div>
<div class="dpr-daterange__end-date">
<div class="dpr-date" data-dpr-module="date-input" data-required="false" data-display-name="End date" data-pattern="\d{1,2}\/\d{1,2}\/\d{2,4}" data-min="2003-02-01" data-max="2007-05-04" data-pattern-hint="DD/MM/YYYY">
<div class="moj-datepicker" data-module="moj-date-picker" data-min-date="01/02/2003" data-max-date="04/05/2007">
<div class="govuk-form-group">
<label class="govuk-label" for="filters.daterange.end">
End
</label>
<div id="filters.daterange.end-hint" class="govuk-hint">
For example 17/05/2024.
</div>
<input class="govuk-input moj-js-datepicker-input " id="filters.daterange.end" name="filters.daterange.end" type="text" value="04/05/2006" aria-describedby="filters.daterange.end-hint" autocomplete="off">
</div>
</div>
<a class="govuk-body-s daterange-set-to-minmax" data-set-to-input='filters.daterange.end' data-set-min-max-value=04/05/2007 data-set-min-max-trigger='true' href="#">
set to max (04/05/2007)
</a>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="dpr-filter-item ">
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label govuk-!-font-weight-bold" for="filters.text">
Text
</label>
<p id="filters.text-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span>
</p>
<input class="govuk-input govuk-input--width-20 govuk-input--error" id="filters.text" name="filters.text" type="text" aria-describedby="filters.text-error" pattern=".+" required="true" display-name="Text">
</div>
</div>
</div>
<div class="filter-actions">
<div class="govuk-button-group">
<button type="submit" class="govuk-button govuk-button--primary" data-module="govuk-button" id="interactive-apply-filters-button">
Apply Filters
</button>
<a id="interactive-reset-filters-button" class="govuk-link govuk-link--no-visited-state dpr-reset-columns-button" href="#" defaultQuery="?filters.field1=one&filters.field7=value8.2&filters.field7=value8.3&filters.daterange.start=2003-02-01&filters.daterange.end=2006-05-04&filters.field7=value8.1&filters.field7=value8.4&filters.select=value2.1&filters.text=Hello">Reset filters</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</details>
</div>
{% from "dpr/components/_filters/filters-interactive/view.njk" import dprInteractiveFilters %}
{% set filterData = {
selectedFilters: [
{
text: "Radio filter: Two",
key: '["radio"]',
value: '["Two"]',
disabled: false,
classes: 'interactive-remove-filter-button',
attributes: {
'aria-label': 'Selected Filter: Radio filter: Two. Click to clear this filter'
}
},
{
text: "Multiselect: Value 8.2, Value 8.3",
key: "[\"filters.multiselect\"]",
value: [
"\"value8.2\"",
"\"value8.3\""
],
disabled: false,
classes: "interactive-remove-filter-button",
attributes: {
"aria-label": "Selected Filter: Multiselect: Value 8.2, Value 8.3. Click to clear this filter"
}
}
],
filters: [
{
text: "Radio filter",
name: 'field1',
id: "radio",
type: "Radio",
options: [
{ value: "one", text: "One" },
{ value: "two", text: "Two" }
],
value: "two"
},
{
text: 'Select filter',
name: 'select',
type: 'Select',
mandatory: false,
options: [
{ value: '', text: 'Select your option', disabled: true, selected: true },
{ disabled: false, text: 'None', value: 'no-filter'},
{value: 'value2.1', text: 'Value 2.1' },
{ value: 'value2.2',text: 'Value 2.2' },
{ value: 'value2.3', text: 'Value 2.3' }
]
},
{
text: 'Autocomplete',
name: 'autocomplete',
type: 'autocomplete',
mandatory: false,
minimumLength: 3,
options: [
{ value: 'Fezzick', text: 'Fezzick' },
{ value: 'inigo-montoya', text: 'Inigo Montoya' },
{ value: 'Prince Humperdink', text: 'Prince Humperdink' },
{ value: 'PrBu', text: 'Princess Buttercup' },
{ value: 'Westley', text: 'Westley' }
]
},
{
mandatory: false,
name: 'multiselect',
options: [
{ text: 'Value 8.1', value: 'value8.1' },
{ text: 'Value 8.2', value: 'value8.2' },
{ text: 'Value 8.3', value: 'value8.3' },
{ text: 'Value 8.4',value: 'value8.4' }
],
text: 'Multiselect',
type: 'multiselect',
value: 'value8.2,value8.3',
values: ['value8.2', 'value8.3']
},
{
text: 'Daterange',
name: 'daterange',
type: 'daterange',
value: {
start: '2003-02-01',
end: '2006-05-04'
},
min: '2003-02-01',
max: '2007-05-04'
},
{
text: 'Text',
name: 'text',
type: 'text',
value: null,
mandatory: true
}
]
} %}
{% set defaultQuery = '?filters.field1=one&filters.field7=value8.2&filters.field7=value8.3&filters.daterange.start=2003-02-01&filters.daterange.end=2006-05-04&filters.field7=value8.1&filters.field7=value8.4&filters.select=value2.1&filters.text=Hello' %}
{{ dprInteractiveFilters(filterData, defaultQuery, 'filters.', true) }}