Results filter

This component provides search results filtering, allowing users to reduce search results into more manageable categories for scanning.

Design and usage

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.
Not an alternative to tabbed content.
Must not be used on dark accent colours.

Note: This is not an in-page tab solution and will require technical build to filter results.

Examples

Interactive example

Code example

Filter using links

<ul class="a-list-plain a-results-filter">
	<li class="a-results-filter__item"><a class="a-results-filter__label is-selected" href="...">...</a></li>
	<li class="a-results-filter__item"><a class="a-results-filter__label" href="...">...</a></li>
</ul>

Filter using radio inputs

<fieldset class="form-row">
	<legend>...</legend>
	<ul class="a-list-plain a-results-filter">
		<li class="a-results-filter__item">
			<input class="a-results-filter__input" type="radio" id="..." name="..." value="..." />
			<label for="..." class="a-results-filter__label">...</label>
		</li>
		...
	</ul>
</fieldset>

Development and test

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.

Extension component

This component forms part of the 'forms-extended-b' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/forms-extended-b-unmq.css" rel="stylesheet" />
<![endif]-->

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.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to
`.a-results-filter`	Base style for the filter list	Yes	`ul.a-list-plain`
`.a-results-filter__item`	Base style for each list item within the filter	Yes	`.a-results-filter li`
`.a-results-filter__input`	Base style for each filter input	Yes	`.a-results-filter_item input`
`.a-results-filter__label`	Base style for each filter link	Yes	`.a-results-filter_item label`, `.a-results-filter_item a`
`.is-selected`	Modifier for the currently selected filter		`a.a-results-filter__label`

Keyboard operations

TAB: Tabbing to an filter option should make the option clearly visually different so that the focus point on the page is obvious to the user.
SPACE or ENTER: With focus on a filter option, pressing SPACE or ENTER will apply the filter.

Component releases

Added on: v3.0.0 (15/09/17)
Removed on: v5.0.0 (05/10/20)

Latest update:

Component removed.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team