Filter Menu

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

#Example

#Usage

#With icon button

#Guidelines

#When to use it

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

#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	—	ReactNode Menu button and list.

#FilterMenuButton

Button for opening a menu.

Name	Default	Description
children	—	string Button text. If `icon` is provided, it's not rendered and used as an `aria-label` instead.
size	"md"	"sm" | "md" | "lg" Determines the height of the button.

#FilterMenuIconButton

Icon-only button for opening a menu.

Name	Default	Description
aria-label	—	string Button text for screen readers.
icon	—	ComponentType<SVGAttributes<SVGElement>> Icon to render inside of a button.
size	"md"	"sm" | "md" | "lg" Determines the height of the button.

#FilterMenuList

Wrapper for groups.

Name	Default	Description
children	—	ReactNode Groups.

#FilterMenuGroup

Grouping of options.

#children

Type: ReactNode

Options.

#title

Type: string

Group title displayed above options.

#type

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

Type: string | string[]

Selection. When type is "radio", value is always a string. When type is "checkbox", value is always an array of strings.

#onChange

Type: ((value: string) => void) | (value: string[]) => void)

Callback 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.

#FilterMenuOption

Name	Default	Description
isDisabled	—	boolean Determines if option is disabled.
children	—	ReactNode Option text.
value	—	string Option value. Used to identify this option in a selection.