Filters is a composite component that filters the items of a list or table.
Merchants use filters to:
- view different subsets of items in a list or table
- filter by typing into a text field
- filter by selecting filters or promoted filters
The way that merchants interact with filters depends on the components that you decide to incorporate. In its simplest form, filters includes a text field and a set of filters, which can be displayed in different ways. For example, you could show promoted filters and a More button that opens a sheet containing more filters. What the filters are and how they’re exposed to merchants is flexible.
The filters component relies on the accessibility features of multiple other components:
Maintain accessibility with custom features
Since custom HTML can be passed to the component for additional actions, ensure that the filtering system you build is accessible as a whole.
All merchants must:
- be able to identify and understand labels for all controls
- be notified of state changes
- be able to complete all actions with the keyboard
The filters component should:
- help reduce merchant effort by promoting the filtering categories that are most commonly used
- include no more than 2 or 3 promoted filters
- consider small screen sizes when designing the interface for each filter and the total number filters to include
- use children only for content that’s related or relevant to filtering
The text field should be clearly labeled so it’s obvious to merchants what they should enter into the field.
- Filter orders
- Enter text here
Use the name of the filter if the purpose of the name is clear on its own. For example, when you see a filter badge that reads Fulfilled, it’s intuitive that it falls under the Fulfillment status category.
- Fulfilled, Unfulfilled
- Fulfillment: Fulfilled, Unfulfilled
If the filter name is ambiguous on its own, add a descriptive word related to the status. For example, Low doesn’t make sense out of context. Add the word “risk” so that merchants know it’s from the Risk category.
- High risk, Low risk
- High, Low
Group tags from the same category together.
- (Unfulfilled, Fulfilled)
- (Unfulfilled) (fulfilled)
If all tag pills selected: truncate in the middle
- Paid, par… unpaid
- All payment status filters selected, Paid, unpa…