Skip to content
ASP Digital Design System

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

Filter a table

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>  
<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>

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 “0 results available. Adjust or reset the filters to see available results.” Results can be substituted for a more specific term.

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>  
<p>0 results. Adjust or reset the filters to see results.</p>

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 24 January 2025