The form should submit with params, so the page can be reloaded/shared with the current state, also history can be preserved per pageload.
{{ aspExample({ code: "<!– should go to #filter-options if filters blank –>
<form action=\"#filter-list\">
<button class=\"asp-button asp-button–toggle asp-button–toggleable asp-js-toggle-button\" type=\"button\" aria-expanded=\"false\" data-toggle-element=\".asp-toggle-content\" style=\"display:none\">
<span class=\"asp-button–toggle__function\">Filter options</span>
<span aria-hidden=\"true\">
<span class=\"asp-button–toggleable__chevron asp-button–toggleable__text–hide\">Hide </span>
<span class=\"asp-button–toggleable__chevron asp-button–toggleable__text–show\">Show </span>
</span>
</button>
<div class=\"asp-toggle-content\">
<noscript>
<h2>Filter by:</h2>
</noscript>
<div class=\"asp-table__order-by form__group\">
<label class=\"form__label\" for=\"incidentType-select\">Incident type:</label>
<select class=\"form__input\" id=\"incidentType-select\" name=\"incidentType\">
<option value=\"select\">Filter by incident type</option>
<option value=\"value-1\">Public Order</option>
<option value=\"value-2\">Concern for welfare</option>
<option value=\"value-3\">Theft from vehicle</option>
</select>
</div>
<fieldset class=\"form__group\">
<legend class=\"form__label\">Source (select all that apply)</legend>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-1\" type=\"checkbox\" name=\"source\" value=\"value-1\">
<label class=\"form__label-choices\" for=\"source-value-1\">999</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-2\" type=\"checkbox\" name=\"source\" value=\"value-2\">
<label class=\"form__label-choices\" for=\"source-value-2\">101</label>
</div>
<div class=\"form__item–choices\">
<input class=\"form__input-choices form__input-choices–checkbox\" id=\"source-value-3\" type=\"checkbox\" name=\"source\" value=\"value-3\">
<label class=\"form__label-choices\" for=\"source-value-3\">callback</label>
</div>
</fieldset>
<div class=\"asp-grid asp-button-container\">
<!– should go to #filter-options if filters blank –>
<button class=\"asp-grid__item asp-grid__item–auto asp-button asp-button–start\" type=\"submit\">Apply filters</button>
<!– should go to #filter-options –>
<button class=\"asp-grid__item asp-grid__item–auto asp-button asp-button–secondary\" type=\"reset\">Reset filters</button>
</div>
</div>
</form>", nunjucks: "", json: "", title: "", example: "", id: "679350efe011b" }) }}
WIP – After filtering the named anchor should be results table, if no results are returned there should be a message in place of the table, that reads “0 results available. Adjust or reset the filters to see available results.” Results can be substituted for a more specific term.
WIP — This toggle functionality uses JavaScript. If JavaScript is enabled, the button is hidden, on page load JavaScript checks for the corresponding content. If the corresponding content is found, the button is unhidden and the content is either shown or hidden, depending upon the aria-expanded attribute set on the button. If JavaScript is disabled, the button remains hidden and content visible. (Same as Help and Steps. Header – not yet documented, will utilise the same JavaScript functionality with an addition data attribute to hide other content when a button is pressed. See also tabs)
When to use this component
Use the filter component to help users filter a list of items, such as a list of cases or search results.
You should only provide users with filters they really need.
How to use this component
You should use this component with the filter a list pattern to allow the component to be shown with a list.
Users can select 1 or more filters. When the user clicks ‘Apply filters’ the page refreshes to show the items that match the filters.
Types of filters
You can use form elements such as radios and checkboxes to let users filter the list.
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
|
Development criteria
WCAG 2.2 compliant
|
Status
Not started
|
|
Development criteria
WCAG 2.1 compliant
|
Status
Completed
|
|
Development criteria
HTML / Nunjucks version
|
Status
Completed
|
|
Development criteria
Figma version
|
Status
Not started
|
|
Development criteria
M365 versions
|
Status
Not started
|
|
Development criteria
Documentation
|
Status
In progress
|
Make a change to the Design System
Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.