A compositional filter dropdown for data-heavy views. Combine the select menu, boolean, and accordion sub-components inside the parent, with an optional Apply/Clear/Cancel footer. Desktop web only.
Usage Guidelines
Do
Compose the select menu, boolean, and accordion sub-components to build a filter.
Enable the 'Show Changes' badge on a control when its value differs from the default.
Toggle the Apply/Clear/Cancel footer on or off to match the flow.
Don't
Do not use on mobile native — this pattern is desktop web only.
Do not hardcode colors or spacing; the components use design system tokens.
Accessibility
The trigger button opens and closes the dropdown; clicking outside closes it.
Tab key navigation moves through the dropdown content.
Each sub-component's click zone follows the design spec (select menu: the select only; boolean and accordion: the entire row).
Props
Name
Type
Required
Description
children
ReactNode
Required
Composed filter controls rendered inside the dropdown panel.
applyButtonText
string
cancelButtonText
string
clearButtonText
string
defaultOpen
boolean
Initial open state when uncontrolled.
iconName
IconName
Trigger button icon. Defaults to the built-in
iconOnly
boolean
Render the trigger as a compact
isOpen
boolean
Controlled open state. Omit to use
label
string
Trigger button label.
onApply
Called when Apply is pressed. The dropdown then closes.
onCancel
Called when Cancel or a click-outside closes the dropdown.
onClear
Called when Clear is pressed. The dropdown then closes.