Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Filter a list

The form should submit with params, so the page can be reloaded/shared with the current state, also history can be preserved per pageload.

Open this example in a new tab: filter-a list

<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>  
<h2>Your search has returned X results</h2>  
<table class="asp-table" id="filter-list">  
<thead class="asp-table__head">  
<tr class="asp-table__row asp-table__row--head">  
<th class="asp-table__header">  
SmartSTORM reference  
</th>  
<th class="asp-table__header">  
Incident type  
</th>  
<th class="asp-table__header">  
Source  
</th>  
<th class="asp-table__header">  
Response grading  
</th>  
<th class="asp-table__header">  
Date and time  
</th>  
<th class="asp-table__header asp-table__header--numeric">  
Call length  
</th>  
</tr>  
</thead>  
<tbody class="asp-table__body">  
<tr class="asp-table__row asp-table__row--link">  
<td class="asp-table__cell"><span class="asp-table__icon asp-table__icon--unread"></span><span class="asp-table__responsive-heading" aria-hidden="true">SmartSTORM reference </span><a class="asp-table__link" href="#">AS-20241120-XXXX</a></td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Incident type </span>PUBLIC ORDER</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Source </span>999</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Response grading </span>Routine</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Date and time </span>20 November 2024 17:30</td>  
<td class="asp-table__cell asp-table__cell--numeric"><span class="asp-table__responsive-heading" aria-hidden="true">Call length </span>11:18</td>  
</tr>  
<tr class="asp-table__row asp-table__row--link">  
<td class="asp-table__cell"><span class="asp-table__icon asp-table__icon--unread"></span><span class="asp-table__responsive-heading" aria-hidden="true">SmartSTORM reference </span><a class="asp-table__link" href="#">AS-20241120-XXXX</a></td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Incident type </span>CONCERN FOR WELFARE</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Source </span>999</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Response grading </span>Res without deploy</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Date and time </span>20 November 2024 15:20</td>  
<td class="asp-table__cell asp-table__cell--numeric"><span class="asp-table__responsive-heading" aria-hidden="true">Call length </span>09:57</td>  
</tr>  
<tr class="asp-table__row asp-table__row--link">  
<td class="asp-table__cell"><span class="asp-table__icon asp-table__icon--unread"></span><span class="asp-table__responsive-heading" aria-hidden="true">SmartSTORM reference </span><a class="asp-table__link" href="#">AS-20241120-XXXX</a></td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Incident type </span>THEFT FROM VEHICLE</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Source </span>101</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Response grading </span>Res without deploy</td>  
<td class="asp-table__cell"><span class="asp-table__responsive-heading" aria-hidden="true">Date and time </span>10 November 2024 08:25</td>  
<td class="asp-table__cell asp-table__cell--numeric"><span class="asp-table__responsive-heading" aria-hidden="true">Call length </span>08:46</td>  
</tr>  
</tbody>  
</table>

SmartSTORM reference	Incident type	Source	Response grading	Date and time	Call length
AS-20241120-XXXX	PUBLIC ORDER	999	Routine	20 November 2024 17:30	11:18
AS-20241120-XXXX	CONCERN FOR WELFARE	999	Res without deploy	20 November 2024 15:20	09:57
AS-20241120-XXXX	THEFT FROM VEHICLE	101	Res without deploy	10 November 2024 08:25	08:46

Filter with no results

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 “There are no results matching your search”. If it is not explanatory (unlikely) an optional additional sentence “Try [widening your search by…] adjusting or reset the filters to see available results.” Results can be substituted for a more specific term.

Preview
HTML

Open this example in a new tab: filter-a list

<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>  
<h2>Your search has returned 0 results</h2>  
<p>There are no results matching your search</p>

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)

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.

Published 24 January 2025
Last updated 31 July 2026