` element.
**Viewport Props:**
| Prop | Type | Default | Description |
| :-------- | :---------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | `React.ReactNode` | - | The content to render inside the transition container. |
| className | `string \| ((state: MenuViewportState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuViewportState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: MenuViewportState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### Viewport.Props
Re-export of [Viewport](/react/components/filter-menu.md) props.
### Viewport.State
```typescript
type FilterMenuViewportState = {
/** The activation direction of the transitioned content. */
activationDirection: string | undefined;
/** Whether the viewport is currently transitioning between contents. */
transitioning: boolean;
/** Present if animations should be instant. */
instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
};
```
### Group
**Group Props:**
| Prop | Type | Default | Description |
| :-------- | :------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | `React.ReactNode` | - | The content of the component. |
| className | `string \| ((state: MenuGroupState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuGroupState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: MenuGroupState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### Group.Props
Re-export of [Group](/react/components/filter-menu.md) props.
### Group.State
```typescript
type FilterMenuGroupState = {};
```
### GroupLabel
An accessible label that is automatically associated with its parent group.
Renders a `
` element.
**GroupLabel Props:**
| Prop | Type | Default | Description |
| :-------- | :-------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: FilterMenu.GroupLabel.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: FilterMenu.GroupLabel.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: FilterMenu.GroupLabel.State) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### GroupLabel.Props
Re-export of [GroupLabel](/react/components/filter-menu.md) props.
### GroupLabel.State
```typescript
type FilterMenuGroupLabelState = {};
```
### Separator
A separator element accessible to screen readers.
Renders a `
` element.
**Separator Props:**
| Prop | Type | Default | Description |
| :---------- | :------------------------------------------------------------------------------------- | :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| orientation | `Orientation` | `'horizontal'` | The orientation of the separator. |
| className | `string \| ((state: SeparatorState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: SeparatorState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: SeparatorState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### Separator.Props
Re-export of [Separator](/react/components/filter-menu.md) props.
### Separator.State
```typescript
type FilterMenuSeparatorState = {
/** The orientation of the separator. */
orientation: Orientation;
};
```
### Empty
**Empty Props:**
| Prop | Type | Default | Description |
| :-------- | :--------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: FilterMenu.Empty.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: FilterMenu.Empty.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: FilterMenu.Empty.State) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### Empty.Props
Re-export of [Empty](/react/components/filter-menu.md) props.
### Empty.State
```typescript
type FilterMenuEmptyState = {};
```
### SubmenuRoot
**SubmenuRoot Props:**
| Prop | Type | Default | Description |
| :------------------- | :--------------------------------------------------------------------------------------------- | :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultInputValue | `string` | - | The uncontrolled filter query when the submenu is initially rendered.
To render a controlled query, use the `inputValue` prop instead. |
| inputValue | `string` | - | The filter query. Use when controlled.
The query is cleared when the popup closes. |
| onInputValueChange | `((value: string, eventDetails: FilterMenu.SubmenuRoot.InputValueChangeEventDetails) => void)` | - | Event handler called when the filter query changes. |
| defaultOpen | `boolean` | `false` | Whether the submenu is initially open. To render a controlled submenu, use the `open` prop instead. |
| open | `boolean` | - | Whether the submenu is currently open. |
| onOpenChange | `((open: boolean, eventDetails: FilterMenu.SubmenuRoot.ChangeEventDetails) => void)` | - | Event handler called when the submenu is opened or closed. |
| highlightItemOnHover | `boolean` | `true` | Whether moving the pointer over items should highlight them.
Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. |
| actionsRef | `React.RefObject
` | - | A ref to imperative actions. `unmount`: Manually unmounts the menu.
Call this after any externally controlled closing animation finishes.`close`: When specified, the menu can be closed imperatively. |
| closeParentOnEsc | `boolean` | `false` | When in a submenu, determines whether pressing the Escape key
closes the entire menu, or only the current child menu. |
| filter | `FilterDropdownFilter` | - | Replaces the default case-insensitive substring matching for item text.
Receives an item's filter text and the trimmed query. When provided, this function is
authoritative and item keywords are ignored. |
| locale | `Intl.LocalesArgument` | - | Locale used when comparing an item against the query.
Defaults to the runtime's default locale. |
| loopFocus | `boolean` | `true` | Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys. |
| onOpenChangeComplete | `((open: boolean) => void)` | - | Event handler called after any animations complete when the menu is opened or closed. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| orientation | `MenuRoot.Orientation` | `'vertical'` | The visual orientation of the menu.
Controls whether roving focus uses up/down or left/right arrow keys. |
| children | `React.ReactNode` | - | The content of the submenu. |
### SubmenuRoot.Props
Re-export of [SubmenuRoot](/react/components/filter-menu.md) props.
### SubmenuRoot.State
```typescript
type FilterMenuSubmenuRootState = {};
```
### SubmenuRoot.ChangeEventReason
```typescript
type FilterMenuSubmenuRootChangeEventReason =
| 'trigger-hover'
| 'trigger-focus'
| 'trigger-press'
| 'outside-press'
| 'focus-out'
| 'list-navigation'
| 'escape-key'
| 'item-press'
| 'close-press'
| 'sibling-open'
| 'cancel-open'
| 'imperative-action'
| 'none';
```
### SubmenuRoot.ChangeEventDetails
```typescript
type FilterMenuSubmenuRootChangeEventDetails = (
| { reason: 'none'; event: Event }
| { reason: 'trigger-hover'; event: MouseEvent }
| { reason: 'trigger-focus'; event: FocusEvent }
| { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
| { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
| { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
| { reason: 'list-navigation'; event: KeyboardEvent }
| { reason: 'escape-key'; event: KeyboardEvent }
| { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'sibling-open'; event: Event }
| { reason: 'cancel-open'; event: MouseEvent }
| { reason: 'imperative-action'; event: Event }
) & {
/** Cancels Base UI from handling the event. */
cancel: () => void;
/** Allows the event to propagate in cases where Base UI will stop the propagation. */
allowPropagation: () => void;
/** Indicates whether the event has been canceled. */
isCanceled: boolean;
/** Indicates whether the event is allowed to propagate. */
isPropagationAllowed: boolean;
/** The element that triggered the event, if applicable. */
trigger: Element | undefined;
preventUnmountOnClose: preventUnmountOnClose;
};
```
### SubmenuRoot.InputValueChangeEventDetails
```typescript
type FilterMenuSubmenuRootInputValueChangeEventDetails = (
| { reason: 'clear-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'input-change'; event: Event | InputEvent }
| { reason: 'input-clear'; event: Event | FocusEvent | InputEvent }
| { reason: 'popup-close'; event: Event }
) & {
/** Cancels Base UI from handling the event. */
cancel: () => void;
/** Allows the event to propagate in cases where Base UI will stop the propagation. */
allowPropagation: () => void;
/** Indicates whether the event has been canceled. */
isCanceled: boolean;
/** Indicates whether the event is allowed to propagate. */
isPropagationAllowed: boolean;
/** The element that triggered the event, if applicable. */
trigger: Element | undefined;
};
```
### SubmenuRoot.InputValueChangeEventReason
```typescript
type FilterMenuSubmenuRootInputValueChangeEventReason =
'input-change' | 'input-clear' | 'clear-press' | 'popup-close';
```
### SubmenuTrigger
**SubmenuTrigger Props:**
| Prop | Type | Default | Description |
| :----------- | :------------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
| onClick | `((event: BaseUIEvent>) => void)` | - | - |
| keywords | `string[]` | - | - |
| nativeButton | `boolean` | `false` | Whether the component renders a native `` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| openOnHover | `boolean` | - | Whether the menu should also open when the trigger is hovered. |
| delay | `number` | `100` | How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the `openOnHover` prop. |
| closeDelay | `number` | `0` | How long to wait before closing the menu that was opened on hover.
Specified in milliseconds. Requires the `openOnHover` prop. |
| id | `string` | - | - |
| className | `string \| ((state: FilterMenu.SubmenuTrigger.State) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: FilterMenu.SubmenuTrigger.State) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: FilterMenu.SubmenuTrigger.State) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### SubmenuTrigger.Props
Re-export of [SubmenuTrigger](/react/components/filter-menu.md) props.
### SubmenuTrigger.State
```typescript
type FilterMenuSubmenuTriggerState = {
/** Whether the component should ignore user interaction. */
disabled: boolean;
/** Whether the item is highlighted. */
highlighted: boolean;
/** Whether the menu is currently open. */
open: boolean;
};
```
### RadioGroup
**RadioGroup Props:**
| Prop | Type | Default | Description |
| :------------ | :------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultValue | `any` | - | The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the `value` prop instead. |
| value | `any` | - | The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead. |
| onValueChange | `((value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) => void)` | - | Function called when the selected value changes. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| children | `React.ReactNode` | - | The content of the component. |
| className | `string \| ((state: MenuRadioGroupState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuRadioGroupState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: MenuRadioGroupState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### RadioGroup.Props
Re-export of [RadioGroup](/react/components/filter-menu.md) props.
### RadioGroup.State
```typescript
type FilterMenuRadioGroupState = {
/** Whether the component is disabled. */
disabled: boolean;
};
```
### RadioGroup.ChangeEventReason
```typescript
type FilterMenuRadioGroupChangeEventReason =
| 'trigger-hover'
| 'trigger-focus'
| 'trigger-press'
| 'outside-press'
| 'focus-out'
| 'list-navigation'
| 'escape-key'
| 'item-press'
| 'close-press'
| 'sibling-open'
| 'cancel-open'
| 'imperative-action'
| 'none';
```
### RadioGroup.ChangeEventDetails
```typescript
type FilterMenuRadioGroupChangeEventDetails = (
| { reason: 'none'; event: Event }
| { reason: 'trigger-hover'; event: MouseEvent }
| { reason: 'trigger-focus'; event: FocusEvent }
| { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
| { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
| { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
| { reason: 'list-navigation'; event: KeyboardEvent }
| { reason: 'escape-key'; event: KeyboardEvent }
| { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'sibling-open'; event: Event }
| { reason: 'cancel-open'; event: MouseEvent }
| { reason: 'imperative-action'; event: Event }
) & {
/** Cancels Base UI from handling the event. */
cancel: () => void;
/** Allows the event to propagate in cases where Base UI will stop the propagation. */
allowPropagation: () => void;
/** Indicates whether the event has been canceled. */
isCanceled: boolean;
/** Indicates whether the event is allowed to propagate. */
isPropagationAllowed: boolean;
/** The element that triggered the event, if applicable. */
trigger: Element | undefined;
preventUnmountOnClose: preventUnmountOnClose;
};
```
### RadioItem
**RadioItem Props:**
| Prop | Type | Default | Description |
| :----------- | :----------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
| value\* | `any` | - | Value of the radio item.
This is the value that will be set in the MenuRadioGroup when the item is selected. |
| onClick | `((event: BaseUIEvent>) => void)` | - | The click handler for the menu item. |
| closeOnClick | `boolean` | `false` | Whether to close the menu when the item is clicked. |
| keywords | `string[]` | - | - |
| nativeButton | `boolean` | `false` | Whether the component renders a native `` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| className | `string \| ((state: MenuRadioItemState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuRadioItemState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: MenuRadioItemState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### RadioItem.Props
Re-export of [RadioItem](/react/components/filter-menu.md) props.
### RadioItem.State
```typescript
type FilterMenuRadioItemState = {
/** Whether the radio item should ignore user interaction. */
disabled: boolean;
/** Whether the radio item is currently highlighted. */
highlighted: boolean;
/** Whether the radio item is currently selected. */
checked: boolean;
};
```
### RadioItemIndicator
Indicates whether the radio item is selected.
Renders a `` element.
**RadioItemIndicator Props:**
| Prop | Type | Default | Description |
| :---------- | :-------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: MenuRadioItemIndicatorState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuRadioItemIndicatorState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| keepMounted | `boolean` | `false` | Whether to keep the HTML element in the DOM when the radio item is inactive. |
| render | `ReactElement \| ((props: HTMLProps, state: MenuRadioItemIndicatorState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### RadioItemIndicator.Props
Re-export of [RadioItemIndicator](/react/components/filter-menu.md) props.
### RadioItemIndicator.State
```typescript
type FilterMenuRadioItemIndicatorState = {
/** Whether the radio item is currently selected. */
checked: boolean;
/** Whether the component should ignore user interaction. */
disabled: boolean;
/** Whether the item is highlighted. */
highlighted: boolean;
/** The transition status of the component. */
transitionStatus: TransitionStatus;
};
```
### CheckboxItem
**CheckboxItem Props:**
| Prop | Type | Default | Description |
| :-------------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
| defaultChecked | `boolean` | `false` | Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead. |
| checked | `boolean` | - | Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead. |
| onCheckedChange | `((checked: boolean, eventDetails: MenuCheckboxItem.ChangeEventDetails) => void)` | - | Event handler called when the checkbox item is ticked or unticked. |
| onClick | `((event: BaseUIEvent>) => void)` | - | The click handler for the menu item. |
| closeOnClick | `boolean` | `false` | Whether to close the menu when the item is clicked. |
| keywords | `string[]` | - | - |
| nativeButton | `boolean` | `false` | Whether the component renders a native `` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. |
| disabled | `boolean` | `false` | Whether the component should ignore user interaction. |
| className | `string \| ((state: MenuCheckboxItemState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuCheckboxItemState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: HTMLProps, state: MenuCheckboxItemState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### CheckboxItem.Props
Re-export of [CheckboxItem](/react/components/filter-menu.md) props.
### CheckboxItem.State
```typescript
type FilterMenuCheckboxItemState = {
/** Whether the checkbox item should ignore user interaction. */
disabled: boolean;
/** Whether the checkbox item is currently highlighted. */
highlighted: boolean;
/** Whether the checkbox item is currently ticked. */
checked: boolean;
};
```
### CheckboxItem.ChangeEventReason
```typescript
type FilterMenuCheckboxItemChangeEventReason =
| 'trigger-hover'
| 'trigger-focus'
| 'trigger-press'
| 'outside-press'
| 'focus-out'
| 'list-navigation'
| 'escape-key'
| 'item-press'
| 'close-press'
| 'sibling-open'
| 'cancel-open'
| 'imperative-action'
| 'none';
```
### CheckboxItem.ChangeEventDetails
```typescript
type FilterMenuCheckboxItemChangeEventDetails = (
| { reason: 'none'; event: Event }
| { reason: 'trigger-hover'; event: MouseEvent }
| { reason: 'trigger-focus'; event: FocusEvent }
| { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
| { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
| { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
| { reason: 'list-navigation'; event: KeyboardEvent }
| { reason: 'escape-key'; event: KeyboardEvent }
| { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
| { reason: 'sibling-open'; event: Event }
| { reason: 'cancel-open'; event: MouseEvent }
| { reason: 'imperative-action'; event: Event }
) & {
/** Cancels Base UI from handling the event. */
cancel: () => void;
/** Allows the event to propagate in cases where Base UI will stop the propagation. */
allowPropagation: () => void;
/** Indicates whether the event has been canceled. */
isCanceled: boolean;
/** Indicates whether the event is allowed to propagate. */
isPropagationAllowed: boolean;
/** The element that triggered the event, if applicable. */
trigger: Element | undefined;
preventUnmountOnClose: preventUnmountOnClose;
};
```
### CheckboxItemIndicator
Indicates whether the checkbox item is ticked.
Renders a `` element.
**CheckboxItemIndicator Props:**
| Prop | Type | Default | Description |
| :---------- | :----------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: MenuCheckboxItemIndicatorState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuCheckboxItemIndicatorState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| keepMounted | `boolean` | `false` | Whether to keep the HTML element in the DOM when the checkbox item is not checked. |
| render | `ReactElement \| ((props: HTMLProps, state: MenuCheckboxItemIndicatorState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### CheckboxItemIndicator.Props
Re-export of [CheckboxItemIndicator](/react/components/filter-menu.md) props.
### CheckboxItemIndicator.State
```typescript
type FilterMenuCheckboxItemIndicatorState = {
/** Whether the checkbox item is currently ticked. */
checked: boolean;
/** Whether the component should ignore user interaction. */
disabled: boolean;
/** Whether the item is highlighted. */
highlighted: boolean;
/** The transition status of the component. */
transitionStatus: TransitionStatus;
};
```
### createHandle
Creates a new handle to connect a Menu.Root with detached Menu.Trigger components.
**Return Value:**
```tsx
type ReturnValue = FilterMenu.Handle;
```
### FilterMenuFilter
**Parameters:**
| Parameter | Type | Default | Description |
| :----------- | :-------- | :------ | :---------- |
| filterText | `string` | - | - |
| query | `string` | - | - |
| filterValue? | `unknown` | - | - |
**Return Value:**
```tsx
type ReturnValue = boolean;
```
### Handle
Controls a Menu imperatively and associates detached `Menu.Trigger` components with a `Menu.Root`.
Create one with `Menu.createHandle()` and pass it to the `handle` prop of the root and of any
triggers rendered outside of it.
The imperative methods take effect only while a root using this handle is mounted; calls made
before a root attaches (or after it unmounts) are ignored.
**Properties:**
| Property | Type | Modifiers | Description |
| :------- | :-------- | :-------- | :------------------------------------------------------------------------------------------- |
| isOpen | `boolean` | readonly | Whether the menu is currently open. Returns `false` while no root is attached to the handle. |
**Methods:**
```typescript
function open(triggerId: string): void;
```
Opens the menu and associates it with the trigger with the given id.
This method should only be called in an event handler or an effect (not during rendering).
```typescript
function close(): void;
```
Closes the menu.
This method should only be called in an event handler or an effect (not during rendering).
### LinkItem
**LinkItem Props:**
| Prop | Type | Default | Description |
| :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. |
| closeOnClick | `boolean` | `false` | Whether to close the menu when the item is clicked. |
| keywords | `string[]` | - | - |
| className | `string \| ((state: MenuLinkItemState) => string \| undefined)` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. |
| style | `React.CSSProperties \| ((state: MenuLinkItemState) => React.CSSProperties \| undefined)` | - | Style applied to the element, or a function that
returns a style object based on the component's state. |
| render | `ReactElement \| ((props: React.DetailedHTMLProps, HTMLAnchorElement>, state: MenuLinkItemState) => ReactElement)` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### LinkItem.Props
Re-export of [LinkItem](/react/components/filter-menu.md) props.
### LinkItem.State
```typescript
type FilterMenuLinkItemState = {
/** Whether the item is highlighted. */
highlighted: boolean;
};
```
## Additional Types
### FilterMenuRootFilterProps
```typescript
type FilterMenuRootFilterProps = {
/**
* Replaces the default case-insensitive substring matching for item text.
* Receives an item's filter text and the trimmed query. When provided, this function is
* authoritative and item keywords are ignored.
*/
filter?: FilterDropdownFilter;
/**
* Locale used when comparing an item against the query.
* Defaults to the runtime's default locale.
*/
locale?: Intl.LocalesArgument;
/**
* The uncontrolled filter query when the menu is initially rendered.
* To render a controlled query, use the `inputValue` prop instead.
*/
defaultInputValue?: string;
/**
* The filter query. Use when controlled.
* The query is cleared when the popup closes.
*/
inputValue?: string;
/** Event handler called when the filter query changes. */
onInputValueChange?: (
value: string,
eventDetails: FilterMenuRoot.InputValueChangeEventDetails,
) => void;
};
```
## External Types
### Side
```typescript
type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
```
### Align
```typescript
type Align = 'start' | 'center' | 'end';
```
### preventUnmountOnClose
```typescript
type preventUnmountOnClose = () => void;
```
### InteractionType
```typescript
type InteractionType = 'mouse' | 'touch' | 'pen' | 'keyboard' | '';
```
### OffsetFunction
```typescript
type OffsetFunction = (data: {
side: 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
align: 'start' | 'center' | 'end';
anchor: { width: number; height: number };
positioner: { width: number; height: number };
}) => number;
```
### Orientation
```typescript
type Orientation = 'horizontal' | 'vertical';
```
### PayloadChildRenderFunction
```typescript
type PayloadChildRenderFunction = (arg: { payload: unknown | undefined }) => ReactNode;
```
### FilterDropdownFilter
```typescript
type FilterDropdownFilter = (filterText: string, query: string, filterValue?: unknown) => boolean;
```
## Export Groups
- `FilterMenu.Arrow`: `FilterMenu.Arrow`, `FilterMenu.Arrow.State`, `FilterMenu.Arrow.Props`
- `FilterMenu.Backdrop`: `FilterMenu.Backdrop`, `FilterMenu.Backdrop.State`, `FilterMenu.Backdrop.Props`
- `FilterMenu.CheckboxItem`: `FilterMenu.CheckboxItem`, `FilterMenu.CheckboxItem.Props`, `FilterMenu.CheckboxItem.State`, `FilterMenu.CheckboxItem.ChangeEventReason`, `FilterMenu.CheckboxItem.ChangeEventDetails`
- `FilterMenu.CheckboxItemIndicator`: `FilterMenu.CheckboxItemIndicator`, `FilterMenu.CheckboxItemIndicator.Props`, `FilterMenu.CheckboxItemIndicator.State`
- `FilterMenu.Group`: `FilterMenu.Group`, `FilterMenu.Group.Props`, `FilterMenu.Group.State`
- `FilterMenu.GroupLabel`: `FilterMenu.GroupLabel`, `FilterMenu.GroupLabel.Props`, `FilterMenu.GroupLabel.State`
- `FilterMenu.Item`: `FilterMenu.Item`, `FilterMenu.Item.Props`, `FilterMenu.Item.State`
- `FilterMenu.LinkItem`: `FilterMenu.LinkItem`, `FilterMenu.LinkItem.Props`, `FilterMenu.LinkItem.State`
- `FilterMenu.List`: `FilterMenu.List`, `FilterMenu.List.Props`, `FilterMenu.List.State`
- `FilterMenu.Popup`: `FilterMenu.Popup`, `FilterMenu.Popup.Props`, `FilterMenu.Popup.State`
- `FilterMenu.Portal`: `FilterMenu.Portal`, `FilterMenu.Portal.State`, `FilterMenu.Portal.Props`
- `FilterMenu.Positioner`: `FilterMenu.Positioner`, `FilterMenu.Positioner.State`, `FilterMenu.Positioner.Props`
- `FilterMenu.RadioGroup`: `FilterMenu.RadioGroup`, `FilterMenu.RadioGroup.Props`, `FilterMenu.RadioGroup.State`, `FilterMenu.RadioGroup.ChangeEventReason`, `FilterMenu.RadioGroup.ChangeEventDetails`
- `FilterMenu.RadioItem`: `FilterMenu.RadioItem`, `FilterMenu.RadioItem.Props`, `FilterMenu.RadioItem.State`
- `FilterMenu.RadioItemIndicator`: `FilterMenu.RadioItemIndicator`, `FilterMenu.RadioItemIndicator.Props`, `FilterMenu.RadioItemIndicator.State`
- `FilterMenu.Trigger`: `FilterMenu.Trigger`, `FilterMenu.Trigger.Props`, `FilterMenu.Trigger.State`
- `FilterMenu.Viewport`: `FilterMenu.Viewport`, `FilterMenu.Viewport.Props`, `FilterMenu.Viewport.State`
- `FilterMenu.SubmenuTrigger`: `FilterMenu.SubmenuTrigger`, `FilterMenu.SubmenuTrigger.Props`, `FilterMenu.SubmenuTrigger.State`
- `FilterMenu.Separator`: `FilterMenu.Separator`, `FilterMenu.Separator.Props`, `FilterMenu.Separator.State`
- `FilterMenu.Handle`
- `FilterMenu.createHandle`
- `FilterMenu.Root`: `FilterMenu.Root`, `FilterMenu.Root.Props`, `FilterMenu.Root.State`, `FilterMenu.Root.Actions`, `FilterMenu.Root.ChangeEventReason`, `FilterMenu.Root.ChangeEventDetails`, `FilterMenu.Root.InputValueChangeEventReason`, `FilterMenu.Root.InputValueChangeEventDetails`
- `FilterMenu.SubmenuRoot`: `FilterMenu.SubmenuRoot`, `FilterMenu.SubmenuRoot.Props`, `FilterMenu.SubmenuRoot.State`, `FilterMenu.SubmenuRoot.ChangeEventReason`, `FilterMenu.SubmenuRoot.ChangeEventDetails`, `FilterMenu.SubmenuRoot.InputValueChangeEventReason`, `FilterMenu.SubmenuRoot.InputValueChangeEventDetails`
- `FilterMenu.Input`: `FilterMenu.Input`, `FilterMenu.Input.State`, `FilterMenu.Input.Props`
- `FilterMenu.Clear`: `FilterMenu.Clear`, `FilterMenu.Clear.State`, `FilterMenu.Clear.Props`
- `FilterMenu.Empty`: `FilterMenu.Empty`, `FilterMenu.Empty.State`, `FilterMenu.Empty.Props`
- `Default`: `FilterMenuGroupLabelProps`, `FilterMenuGroupLabelState`, `FilterMenuRootFilterProps`, `FilterMenuFilter`, `FilterMenuCheckboxItemProps`, `FilterMenuGroupProps`, `FilterMenuItemProps`, `FilterMenuLinkItemProps`, `FilterMenuListState`, `FilterMenuListProps`, `FilterMenuPopupProps`, `FilterMenuRadioGroupProps`, `FilterMenuRadioItemProps`, `FilterMenuTriggerProps`, `FilterMenuTriggerState`, `FilterMenuSubmenuTriggerProps`, `FilterMenuSubmenuTriggerState`, `FilterMenuInputState`, `FilterMenuInputProps`, `FilterMenuClearState`, `FilterMenuClearProps`, `FilterMenuEmptyState`, `FilterMenuEmptyProps`
## Canonical Types
Maps `Canonical`: `Alias` — Use Canonical when its namespace is already imported; otherwise use Alias.
- `FilterMenu.CheckboxItem.Props`: `FilterMenuCheckboxItemProps`
- `FilterMenu.Group.Props`: `FilterMenuGroupProps`
- `FilterMenu.GroupLabel.Props`: `FilterMenuGroupLabelProps`
- `FilterMenu.GroupLabel.State`: `FilterMenuGroupLabelState`
- `FilterMenu.Item.Props`: `FilterMenuItemProps`
- `FilterMenu.LinkItem.Props`: `FilterMenuLinkItemProps`
- `FilterMenu.List.Props`: `FilterMenuListProps`
- `FilterMenu.List.State`: `FilterMenuListState`
- `FilterMenu.Popup.Props`: `FilterMenuPopupProps`
- `FilterMenu.RadioGroup.Props`: `FilterMenuRadioGroupProps`
- `FilterMenu.RadioItem.Props`: `FilterMenuRadioItemProps`
- `FilterMenu.Trigger.Props`: `FilterMenuTriggerProps`
- `FilterMenu.Trigger.State`: `FilterMenuTriggerState`
- `FilterMenu.SubmenuTrigger.Props`: `FilterMenuSubmenuTriggerProps`
- `FilterMenu.SubmenuTrigger.State`: `FilterMenuSubmenuTriggerState`
- `FilterMenu.Input.State`: `FilterMenuInputState`
- `FilterMenu.Input.Props`: `FilterMenuInputProps`
- `FilterMenu.Clear.State`: `FilterMenuClearState`
- `FilterMenu.Clear.Props`: `FilterMenuClearProps`
- `FilterMenu.Empty.State`: `FilterMenuEmptyState`
- `FilterMenu.Empty.Props`: `FilterMenuEmptyProps`
## createHandle
[//]: # '@exclude-table-of-contents'
### Handle