Filtering
Filtering allows a user to add or remove data items from a displayed data set by turning on and off certain predefined attributes.
Overview
Filtering allows users to trim down visible items when working through large data sets. Filters can help a user find something they’re looking for, see available options within a certain set of criteria, and make a decision when faced with a large number of options.
Selection methods
Choosing the right filter selection method will improve usability and user efficiency. Carbon supports several selection methods that are appropriate for different situations. Consider the data your users are looking at, what they are trying to achieve, and how they might intuitively narrow down the data.
| Selection method | Description |
|---|---|
| Single selection | The user can pick only one attribute to modify data results. |
| Multiselection | The user has the option to pick more than one attribute to modify data results. |
| Multiple categories | The user has the option to select attributes across multiple data categories. |
| Multiple filters with batch updates | The user selects multiple filters and then takes an additional action to apply the filters. |
| Multiple filters with instant updates | The data is updated as the user selects each filter. |
Single selection
Use a single-selection filter when the user can pick only one attribute to modify data results. Under the hood, single selection behaves like a radio button. Types of single-selection filters include:
- Basic dropdown
- Inline dropdown
- Radio button set (either standalone or within a menu)
Example of a single selection filter in an inline dropdown
Multiselect
Use a multiselect filter when the user has the option to pick more than one attribute to modify the data results. Under the hood, multiselects behave like checkboxes. Types of multiselect filters include:
- Multiselect dropdown
- Inline multiselect dropdown
- Checkbox set (either standalone or within a menu)
Example of a multiselect filter in a checkbox set
Selecting multiple categories
A category is a set of filter items within the same topic. For example, “size”
is a category and small, medium, large, and extra large are its filter
choices. Multiple filter categories may be applied to the same data set. For
example, the user can filter by size, color, and price range.
Multiple category selection is usually placed vertically on the left side of the page or horizontally at the top of the data set. Multiple categories should never be put within a menu or dropdown.
Example of multiple filter categories