Taxonomic name: A-FILTER-LINKS / A-FILTER-RADIO
Beta v.1.0.0 - Updated 25/08/16.
Search results filtering allows users to filter down search results into more manageable categories for scanning.
- Users may select a single filter link to view a smaller section of results. Please contact the Framework team if you have a requirement for multiple simultaneous filters.
- Use the 'All' option to allow users to remove filters and view all results.
- Filter category titles stack where they cannot be accommodated on a single line.
- Must not be used on dark accent colours.
Notes for developers
Must not be used on dark accent colours.
Some devices/browsers will not display the bottom border full width when the options wrap onto more than one line.
Notes for testers
Ensure that filter options can be accessed via the mouse as well as via tabbing using the keyboard.
Use a screen reader to confirm that the filter options are understandable as to where they will be going when listed out of context of the page.
Ensure that when hovering over a filter option the style changes noticeably.
Ensure that when a filter option has focus the style changes noticeably.
There should be a clear visual distinction between the selected and non-selected filters.
Filters wrap as required at any screen size depending on the number and length of the filters.
Filter using links
<ul class="plain-list filter"> <li class="filter__item"><a class="filter__label is-selected" href="...">...</a></li> <li class="filter__item"><a class="filter__label" href="...">...</a></li> </ul>
Filter using radio inputs
<fieldset class="form-row"> <legend>...</legend> <ul class="plain-list filter"> <li class="filter__item"> <input class="filter__input" type="radio" id="..." name="..." value="..." /> <label for="..." class="filter__label">...</label> </li> ... </ul> </fieldset>
The following table gives you a quick overview of the CSS classes that can be applied.
||Base style for the filter list||Yes||
||Base style for each list item within the filter||Yes||
||Base style for each filter input||Yes||
||Base style for each filter link||Yes||
||Modifier for the currently selected filter||