The application of attributes to find matching items from a data set.
Filters can be “and” or “or” operators:
Sometimes a mix of “and” and “or” can be used. For example, product filtering is commonly a mix of both operators.
Filter controls conform to space available on any given device. Horizontal rows of several filters is possible on tablet (medium) and desktop (large) but less practical on phone (small). On phone, filters are typically stacked vertically.
On smaller breakpoints, filtering is done via an off canvas. In Dell.com Support and other scenarios, if there are more than 5 dropdown filters or ten selectable filters, the experience should likewise use an off canvas.
The off canvas experience provides an always-visible button to “Apply” filters, which helps users easily transition to results.
A filter collection is more practical on larger breakpoints. On smaller breakpoints, it takes up space that's more useful for showing filtered results, and is therefore not shown.
Filtering components based upon dropdown buttons come in two styles:
Filtering makes use of many existing patterns that work in combination, such as dropdown buttons, mini buttons, accordions and inputs
For those filtering components that are button-based, see the usage details for buttons.
For those filtering components that are accordion-based, see the usage details for accordions.
For those filtering components that are input-based, see the usage details for inputs.
Keyword filtering presents the possibility of returning zero results. If this occurs, provide a message at the top of the results area indicating that no results matched the filter.
The default sort order, and the order of the options within the dropdown, should reflect the most popular choices for users of the current site segment.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
You may also refer to this article about creating accessible forms from WebAIM.
Ensure users with screen readers can identify the overall purpose of the filters and the high-level categories of filter options. Avoid vague labels like “Select”.
Enable users to skip ahead to the next category without listening to each filter option in the category.
To ensure multi-select checkboxes aren’t appearing as links, include an ARIA-expanded (state) or code as combo checkboxes.
See the accessibility content for buttons.
Please refer to the accessibility guidelines for checkboxes.
See the accessibility content for inputs.
See the accessibility content for accordions.
See also the accessibility content for radio buttons.
See the accessibility content for selects.