Data & ChartsPro

Filter Menu

A filter button that opens a checklist of options with counts, an all-row and Clear filter — for table and list filters.

Usage

Filter Menu comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx

import { FilterMenu, FilterMenuOption, FilterMenuProps } from "@wunderui/react"

sm, md and lg follow the button scale, so the trigger lines up with the controls next to it.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Every option checked means no filter; unchecking narrows the rows, and an empty result says so.

Invoices5 of 5

The parts the component is made of. Each one renders a you can target from CSS.

FilterMenu

Trigger

All row

Option rowoptional

Checkbox squareoptional

Clear filter

data-slot="filter-menu"
A multi-select filter: a trigger button and a menu of checkbox rows. lists the checked options, and every option checked means no filter.
data-slot="filter-menu-trigger"
The plain button with the sliders icon. It shows the count () and takes the link colour while the list is filtered.
data-slot="filter-menu-all"
The first row. It checks or clears every option and shows checked, mixed or empty, depending on how many options are on.
data-slot="filter-menu-item"Optional
One option with a checkbox and an optional on the right. Ticking it keeps the menu open.
data-slot="filter-menu-box"Optional
The visual checkbox at the start of a row. It is decorative; the row itself carries the checked state.
data-slot="filter-menu-clear"
Resets to every option checked and then calls . It is disabled while no filter is active.

When to use
Use a FilterMenu to narrow a list or table by one attribute with several values, such as status or owner. For choosing a single value, use a select.
Do
Start with every option in . Checked means shown, so the full list is the unfiltered state and the trigger stays in its plain look.
Do
Pass for each option when you have it. People see how many rows a choice leaves before they tick it.
Do
Use to reset the dependent state, such as the page number. selects all options itself and then calls it.
Don’t
Don't hold an empty as the idle state. Nothing checked reads as a filter that shows nothing, and the trigger turns active.
Don’t
Don't change the per selection. The trigger adds the count itself, and its accessible name reads .

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.