Filter
What is this?
Filter triggers allow merchants to find relevant information by choosing criteria and refining results.
Composition
Filters are built using combined components. There are components that allow the creation of simple filters, multiple selection filters, simple filters with search and multiple selection filters with search:
Component | Description |
---|---|
FilterDisclosure | Component for the buttons that trigger the menu. |
FilterPopover | Popover component, which is always a parent component. |
FilterListbox | Component for the option list. |
FilterFooter | Component for the footer with clear and apply buttons. |
FilterOptionCheckbox | Checkbox option component, this should be used only on multiple selection filters. |
FilterOptionRadio | Radio option component, this should be used only on single selection filters. |
FilterSearchbox | Search box component that should be used only when building searchable filters. |
FilterGroup | A grouping component that displays the disclosures as cohesive bar. |
FilterControl | A filter for toggling visibility of optional filters. Should be used when some of the filters are optional. |
FilterOptional | Wrapper component that mounts and unmounts a filter, making it optional. Controlled by FilterControl . |
Filter
Filter with multiple selection
Filter with search
Filter with multiple selection and search
Allows user to search and to select more than one option.
Filter group
Group with additional hidden filters
Error status
Other status
Examples
This section presents a series of examples that may be useful.
Internationalization
Filter supports internationalization of its native messages.
Filter with async data fetching
When fetching the option list asynchronously you just need to render your obtained list with a map.
Providing values for id
and label
. You can control the status (loading/ready) with setStatus.
Filter with async searching
When performing searches asynchronously you need to render the search result list with a map.
You can control the status with setStatus, to indicate the search is loading use the loading
prop on FilterSearchbox.