Filter Menu

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

#

#

#

#

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

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

#

#

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

#

  • Use sentence case.

#

#

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

NameDefaultDescription
children

ReactNode

Menu button and list.

#

Button for opening a menu.

NameDefaultDescription
children

string

Button text. If `icon` is provided, it's not rendered and used as an `aria-label` instead.

isDisabled

boolean

Toggles the disabled state.

size"md""sm" | "md" | "lg"

Determines the height of the button.

#

Icon-only button for opening a menu.

NameDefaultDescription
aria-label

string

Button text for screen readers.

icon

ComponentType<SVGAttributes<SVGElement>>

Icon to render inside of a button.

isDisabled

boolean

Toggles the disabled state.

size"md""sm" | "md" | "lg"

Determines the height of the button.

#

Wrapper for groups.

NameDefaultDescription
children

ReactNode

Groups.

#

Grouping of options.

#

Type: ReactNode

Options.

#

Type: string

Group title displayed above options.

#

Type: "radio" | "checkbox"

Selection type. Use radio to allow a single option to be selected. Use checkbox to allow multiple options to be selected.

#

Type: string | string[]

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

#

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.

#

NameDefaultDescription
isDisabled

boolean

Determines if option is disabled.

children

ReactNode

Option text.

value

string

Option value. Used to identify this option in a selection.

On this page

  • Example
  • Usage
  • With icon button
  • Disabled
  • Guidelines
  • When to use it
  • Content
  • Props
  • FilterMenu
  • FilterMenuButton
  • FilterMenuIconButton
  • FilterMenuList
  • FilterMenuGroup
  • FilterMenuOption