Filters

Help users narrow down long lists of information by letting them filter out items that don't meet their chosen criteria.

Overview

There are four variations of the filter component:

Filter summary

A summary of the filtered results on a page, which update as you apply filters from the filter panel. It shows how many results have been returned in total and on that page and allows you to remove filters and sort the returned data.

Example: filter summary

Filter panel with filter group

A filter panel can contain a filter group with filter options to select

Example: filter panel with filter group

Filter panel with filter by input

A filter panel can contain a filter group with a filter by input

Example: filter panel with filter by input

Filter panel with multiple filters

A filter panel can contain a filter group with filter options to select, and/or a filter by input

Example: filter panl with multiple filters

When to use filters

Use filters on long lists of item or results which introduce complexity. For example search results and the guidance list page.

When not use filters

Don't use filters on content pages, if these pages are complex or contain a lot of information, simplify the content or split up across pages.

How to use

Filter summary

This component should be positioned directly above the results.

Showing results 1 to 10 of 1209

GuidanceRemove Guidance filter
PathwayRemove Pathway filter

React

HTML

<FilterSummary
	activeFilters={[
		{
			label: "Guidance"
		},
		{
			label: "Pathway"
		}
	]}
>
	Showing results 1 to 10 of 1209
</FilterSummary>

Filter panel with a filter group

For the filter group, you can indicate the selected filters.

React

HTML

<FilterPanel heading="A filter panel">
	<FilterGroup heading="Type">
		<FilterOption
			isSelected={true}
			value="This is an example"
			onChanged={() => console.log("Changed!")}
		>
			This is an example
		</FilterOption>
		<FilterOption
			isSelected={false}
			value="Another example"
			onChanged={() => console.log("Changed!")}
		>
			Another example
		</FilterOption>
	</FilterGroup>
</FilterPanel>

Filter panel with filter by input

You can use any standard input; it will default to a text input.

You can use variants on our input components, such as an error message or hint text.

React

HTML

<FilterPanel heading="A filter panel">
	<FilterByInput label="test" name="test"></FilterByInput>
</FilterPanel>

Content

Avoid lengthy text for the filter options. Option text should be as simple as possible, one or two words.

If you change the text on the filter by the input button, ensure it is clear what that button does.

Accessibility

Component meets WCAG AA guidelines for accessibility on:

Text contrast - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 )1.4.3).
UI contrast - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Accessible use of colour - Colour is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Tap target meets minimum size requirements (44 x 44 pixels).

Research and evidence

No research done on the component at this time.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.

If you work for NICE, ask us a question in our Teams channel
If you work outside of NICE, you can get in touch with us via Github discussions