Filter

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.

Package: @terreno/ui
Categories: Component
Props interface: FilterProps
Story source: demo/stories/Filter.stories.tsx

Live demo

Live preview from the Terreno component demoOpen in playground ↗

Props

Prop	Type	Required	Description
children	ReactNode	Yes	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
isOpen	boolean		Controlled open state. Omit to use
label	string		Trigger button label.
onApply	reflection		Called when Apply is pressed. The dropdown then closes.
onCancel	reflection		Called when Cancel or a click-outside closes the dropdown.
onClear	reflection		Called when Clear is pressed. The dropdown then closes.
onOpenChange	reflection		Called whenever the dropdown opens or closes.
showActionButtons	boolean		Master toggle for the Apply/Clear/Cancel footer.
showApplyButton	boolean		Show the Apply button in the footer.
showCancelButton	boolean		Show the Cancel button in the footer.
showClearButton	boolean		Show the Clear hyperlink in the footer.
testID	string		Root test id for the primary interactive element or container.
variant	union		Primary theming for the trigger and Apply button.
width	number		Panel width in pixels. Defaults to 320 per the design spec.