Filter menu

Filter menu allows user to filter the data in a table or a list.

Use a menu when items trigger one-shot actions — a filter menu holds selections and stays open across them.

#Example

#Usage

#With icon button

#Groups

A FilterMenuGroup with type="radio" holds one choice (value is a string); type="checkbox" holds many (value is an array). The list stays open across selections, so several filters adjust in one visit — give each group a title when the list holds more than one.

#Disabled

The filter menu button (and icon button) can be disabled.

You can also disable individual filter menu options instead of the entire button.

#Combinations

The pressed treatment belongs to the open state — Chakra's menu trigger drives data-active and the aria-expanded ring itself when the list opens, so it can't render in a static grid.

#FilterMenuButton

#FilterMenuIconButton

#Guidelines

#When to use

• When user should be able to customize the data displayed in a table or a list.

#When not to use

• If the dropdown triggers one-shot actions rather than holding a selection, use a menu instead.
• Filter triggers stay quiet — FilterMenuButton on secondary (the default) or tertiary, FilterMenuIconButton on tertiary (the default) or secondary; the emphasis belongs on the data being filtered.

#Content

• Use sentence case.

#Props

#FilterMenu

Root-level component for adding a menu. All menu-related components must be children of FilterMenu.

Name	Default	Description
children	—	ReactNodeMenu button and list.

#FilterMenuButton

Button for opening a menu.

Name	Default	Description
isLoading	—	booleanToggles the loading state.
isDisabled	—	booleanToggles the disabled state.
isJustified	—	booleanTake up an entire available container width.
children	—	ReactNodeButton text.
variant	"secondary"	"primary" | "secondary" | "tertiary" | "danger" | "warning" | "link"Button variant, which determines the purpose the button is used for and its appearance.
size	—	"sm" | "md" | "lg" | "xl"Determines the height of the button.
shape	"default"	"default" | "circle"Determines the shape of the button.
icon	—	ComponentType<SVGAttributes<SVGElement>>Primary icon that's displayed on the left. Only icon or imageUrl can be set at the same time.
directionIcon	—	ComponentType<SVGAttributes<SVGElement>>Icon for indicating the direction, displayed on the right side of the button. Used for icons like "arrow right" or "caret down".
directionIconSize	—	IconProps["boxSize"]Override the default direction icon size. Use only when absolutely necessary, for components like Menu and FilterMenu.
imageUrl	—	stringURL to an image to display on the left. Only icon or imageUrl can be set at the same time.

#FilterMenuIconButton

Icon-only button for opening a menu.

Name	Default	Description
isLoading	false	booleanToggles the loading state.
isDisabled	false	booleanToggles the disabled state.
aria-label	—	stringButton's meaning for screen readers.
icon	—	ComponentType<SVGAttributes<SVGElement>>Button icon.
size	"md"	"2xs" | "xs" | "sm" | "md" | "lg"Determines the height of the button.
shape	"default"	"default" | "circle"Determines the shape of the button
variant	"tertiary"	"primary" | "secondary" | "tertiary" | "danger"Button variant.

#FilterMenuList

Wrapper for groups.

Name	Default	Description
children	—	ReactNodeGroups.
color	—	ColorThe CSS color property.
textColor	—	ColorThe CSS color property.
fill	—	ColorThe CSS fill property for icon SVGs and paths.
stroke	—	ColorThe CSS stroke property for icon SVGs and paths.
bg	—	ColorThe CSS background property.
bgColor	—	ColorThe CSS background-color property.
background	—	ColorThe CSS background property.
backgroundColor	—	ColorThe CSS background-color property.
borderColor	—	ColorThe CSS border-color property.
borderTopColor	—	ColorThe CSS border-top-color property.
borderBlockStartColor	—	ColorThe CSS border-block-start-color property.
borderBottomColor	—	ColorThe CSS border-bottom-color property.
borderBlockEndColor	—	ColorThe CSS border-block-end-color property.
borderLeftColor	—	ColorThe CSS border-left-color property.
borderInlineStartColor	—	ColorThe CSS border-inline-start-color property.
borderRightColor	—	ColorThe CSS border-right-color property.
borderInlineEndColor	—	ColorThe CSS border-inline-end-color property.
surface	—	SurfaceExplicitly set the surface theme advertised to descendant form elements. Useful when bg is a value the surface resolver doesn't recognise – e.g. responsive object syntax, an arbitrary hex, or a token applied via sx instead of bg.

#FilterMenuGroup

Name	Default	Description
type	—	"radio" | "checkbox"Selection type. Use radio to allow a single option to be selected. Use checkbox to allow multiple options to be selected.
value	—	string | string[]Selection. When type is "radio", value is always a string. When type is "checkbox", value is always an array of strings.
onChange	—	(value: string) => void | (value: string[]) => voidCallback for when user selects a single or multiple options, depending on the type prop. When type is "radio", value is always a string. When type is "checkbox", value is always an array of strings.
title	—	stringGroup title.
children	—	ReactNodeMenu items.

#FilterMenuOption

Name	Default	Description
isDisabled	—	booleanDetermines if option is disabled.
children	—	ReactNodeOption text.
value	—	stringOption value. Used to identify this option in a selection.