Filtering
Quick filter allows to quickly narrow down large datasets or content lists using a small set of predefined filter options. They are designed for efficiency and ease of use, offering one-click access to commonly used filters without opening an advanced filter panel.
Title sets the heading of the section.
Chips container holds all the quick filter chips organized in one or more rows for LG and MD, and a single scrollable row for SM and Default. It will contain a maximum of 12 chips.
Chips represent the each filter. They will be unselected as their default state.
Variation | Purpose | Components | Form of Display | Size |
|---|---|---|---|---|
Quick filter | Represents a small grout of predefined filters that the user can select with one click. | Title, chips (top chips) | Section with one or more rows of chips, section with a single scrollable row. | LG, MD, SM, Default |
Container
Spacing
Ensure that proper space is given between each item in the container.
LG and MD Viewport
By default, for LG and MD viewports, quick filters display in a single horizontal row. If the number of filter chips exceeds the available width of the container, the component automatically wraps to a new line, creating multiple rows as needed.
The height of the container will expand dynamically based on the number of rows displayed.
SM and Default Viewport
For SM and Default viewports, quick filters switch to a single-row layout with horizontal scrolling. This prevents the component from taking up excessive vertical space while maintaining easy access to all filter options on small screens.
A maximum number of visible items is recommended before truncating the list into a scrollable area (showing up to 12 filters by default). Additional filters remain accessible via horizontal scroll indicators or touch gestures.
