Filter Menu

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

#Example

#Usage

#With icon button

#Disabled

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

You can also disable individual filter menu options instead of the entire 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

#FilterMenuIconButton

Icon-only button for opening a menu.

Name	Default	Description

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