Filter a list

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>

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>