Filters

Filters allow users to dynamically filter data and/or content. Through filtering, users can reduce the amount of information being displayed.

Import

Filter Icon Button

Loading preview
Open in Storybook

Single Select, Single Filter

Loading preview
Open in Storybook

Single-Filter, Multi-Select

Loading preview
Open in Storybook

Single Select, Multi Filter

Loading preview
Open in Storybook

Multi-Group, Multi-Select

Loading preview
Open in Storybook

Props

FilterMenu Props

NameDescriptionDefault
filtersAppliedCount

The total number of filters selected across all categories

number
-
showMenu

Boolean to control visibility of menu (controlled)

boolean
-
defaultShowMenu

Boolean to control the initial visibility of menu (uncontrolled)

boolean
-
onFilterButtonClick

Callback function that's called when filter IconButton is clicked

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
-
onMenuClose

Callback function that's called when the filter menu is closed

(() => void)
-
iconButtonOtherProps

Props to pass to icon button

IconButtonOtherProps
-
badgeProps

Props to pass to the badge on the filter icon button

BadgeOtherProps
-
onCloseButtonClick

Callback function that's called when close button is clicked

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
-
closeButtonRef

Ref for the close button.

MutableRefObject<HTMLButtonElement | null>
-
closeButtonProps

Props to pass to the close IconButton

IconButtonOtherProps
-
id*

Id for the filter menu

string
-
onResetButtonClick

Callback function that's called when reset button is clicked

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
-
onApplyButtonClick

Callback function that's called when apply button is clicked

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
-
showResetButton

Boolean to control visibility of reset button

boolean
-
showApplyButton

Boolean to control visibility of apply button

boolean
-
menuStyles

CSS style object to pass to filter menu

CSSProperties
-
resetButtonProps

Props to pass to the reset Button

ButtonOtherProps
-
applyButtonProps

Props to pass to the apply Button

ButtonOtherProps
-
labelOverrides

Overrides for labels that have been defaulted in the component.

DefaultFilterLabelOverrides
-

FilterPersistent Props

NameDescriptionDefault
closeButton

@ignore Only display closeButton for non-persistent filter menus. FilterMenu parent component will handle passing the closeButton prop to FilterPersistent

ReactElement<any, string | JSXElementConstructor<any>>
-
id*

Id for the filter menu

string
-
onResetButtonClick

Callback function that's called when reset button is clicked

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
-
onApplyButtonClick

Callback function that's called when apply button is clicked

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)
-
showResetButton

Boolean to control visibility of reset button

boolean
-
showApplyButton

Boolean to control visibility of apply button

boolean
-
menuStyles

CSS style object to pass to filter menu

CSSProperties
-
resetButtonProps

Props to pass to the reset Button

ButtonOtherProps
-
applyButtonProps

Props to pass to the apply Button

ButtonOtherProps
-
labelOverrides

Overrides for labels that have been defaulted in the component.

Omit<DefaultFilterLabelOverrides, "closeButtonScreenReaderLabel">
-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.