When the main, or only, task on a page is to narrow a collection of items or manipulate a pre-filtered collection, use a filter bar or tabs to support the filtering tasks.

Dedicated full-page lists can appear on list pages or in tabs on record pages.

Persistent inline filters

When users only need one or two simple filters and containers have room to display the filter controls above the lists, use persistent inline filters. Persistent inline filters are always visible, so users can apply them directly to lists without invoking a button. They are especially useful for controls that users will use frequently or that have significant impact.

Persistent inline filters appear in a toolbar above lists and are applied immediately after users make selections.

Expandable inline filters

When users need up to four simple filters for lists that appear within containers, such as boxes, on pages or modals, use expandable inline filters. Filter controls are hidden by default and accessed through a Filter button, so they are especially useful for filters that users don't need frequently or that don't have significant impact.

If users need more filters or more complex filtering, use a dedicated list view with a filter bar instead.

• Users need regular access to a small number of lists.
• One list in a small group of lists needs priority or will be used most frequently.
• A small number of lists have different tasks for users to complete.

• Users need to access a large number of lists.
• Users don't need to access lists regularly.
• Pre-filtered lists already exist in the system. Use call-to-action patterns, such as notifications or needs attention items in action hubs, instead.

• Users need to adjust preset filter values or add additional filters to refine lists.
• Users access lists through calls to action and need to further narrow the lists before taking action.

When a list requires many filters to give users multiple ways to narrow the collection of items, include a filter choose to let users select the filters to include in the filter bar.

Within filter choosers, organize filters alphabetically.

If some filters will be used in most of the time, include them directly in the filter bar by default instead of the filter chooser.

When users may require the ability to apply logic to filtering criteria, enable logical operators. In the filter chooser dropdown, users can select to display logical operators in the filter bar, and then they can apply operators as necessary to narrow the list.

When users select Clear all values, confirm their intention before removing the filter values to avoid losing their work by mistake.

For combination filters that aggregate filters in a filter button but don't display the filter values, use a popover to progressively disclose the values on focus and hover. This keeps users in context and avoids extra effort to obtain the information.

When filters or search criteria are applied to a list, update the list count and summary details to reflect the filtered list. Add “match” to the list count label to reflect the list is in a filtered state.