CommandMenu API

API documentation for CommandMenu component

CommandMenuRoot#

Props#

Defines valid properties in CommandMenu component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CommandMenuRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CommandMenuRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CommandMenuRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CommandMenuRootInstance) => ReactNode)	null	The children to render.
jump	number	null	The number of items to jump by.
selected	string	null	The selected value.
defaultSelected	string	null	The default selected value.
onSelectedChange	(value: string) => void	null	Callback function that is called when the selected value changes.
selectOnHover	boolean	null	Whether to select on hover.
filter	(value: string, search: string, keywords?: string[]) => number	null	Callback function that is called to filter the items.
filterable	boolean	null	Whether the items are filterable.
loop	boolean	null	Whether to loop the items.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CommandMenu component.

name	type	default	description
useCommandMenuStore	(selector: (state: useCommandMenuStoreState) => T) => T	null	Selector function to access the store.
store	useCommandMenuStore	null	The store of the useCommandMenu.
listRef	RefObject<HTMLDivElement>	null	The ref to the list element.
handleItemPointerMove	(e: PointerEvent<HTMLDivElement>) => void	null	Handles the pointer move event.
handleItemClick	(e: MouseEvent<HTMLDivElement>, onSelect?: (value?: string) => void) => void	null	Handles the item click event.
handleKeyDown	(e: KeyboardEvent) => void	null	Handles the key down event.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CommandMenu component.

name	type	default	description
root	CommandMenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
list	CommandMenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the list's DOM element.
group	CommandMenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the group's DOM element.
groupHeading	CommandMenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the group heading's DOM element.
item	CommandMenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the item's DOM element.
empty	CommandMenuRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the empty's DOM element.
input	CommandMenuRootPassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.

Types#

Instance

Instance of CommandMenu component.

values
ComponentInstance<CommandMenuRootProps, CommandMenuRootState, CommandMenuRootExposes>

CommandMenuInput#

Props#

Defines valid properties in CommandMenuInput component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CommandMenuInputInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CommandMenuInputInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CommandMenuInputPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CommandMenuInputInstance) => ReactNode)	null	The children to render.
value	string	null	Value of the input.
onValueChange	(value: string) => void	null	Callback function that is called when the value changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CommandMenuInput component.

name	type	default	description
commandmenu	CommandMenuRootInstance	null	The CommandMenu component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CommandMenuInput component.

name	type	default	description
root	CommandMenuInputPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CommandMenuInput component.

values
ComponentInstance<CommandMenuInputProps, CommandMenuInputState, CommandMenuInputExposes>

CommandMenuEmpty#

Props#

Defines valid properties in CommandMenuEmpty component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CommandMenuEmptyInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CommandMenuEmptyInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CommandMenuEmptyPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CommandMenuEmptyInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CommandMenuEmpty component.

name	type	default	description
commandmenu	CommandMenuRootInstance	null	The CommandMenu component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CommandMenuEmpty component.

name	type	default	description
root	CommandMenuEmptyPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CommandMenuEmpty component.

values
ComponentInstance<CommandMenuEmptyProps, CommandMenuEmptyState, CommandMenuEmptyExposes>

CommandMenuItem#

Props#

Defines valid properties in CommandMenuItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CommandMenuItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CommandMenuItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CommandMenuItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CommandMenuItemInstance) => ReactNode)	null	The children to render.
value	string	null	Value of the item.
keywords	string[]	null	Keywords of the item.
disabled	boolean	false	When present, it specifies that the item is disabled.
onSelect	(value?: string) => void	null	Callback function that is called when the item is selected.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CommandMenuItem component.

name	type	default	description
commandmenu	CommandMenuRootInstance	null	The CommandMenu component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CommandPaletteItem component.

name	type	default	description
root	CommandMenuItemPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CommandMenuItem component.

values
ComponentInstance<CommandMenuItemProps, CommandMenuItemState, CommandMenuItemExposes>

CommandMenuGroup#

Props#

Defines valid properties in CommandMenuGroup component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CommandMenuGroupInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CommandMenuGroupInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CommandMenuGroupPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CommandMenuGroupInstance) => ReactNode)	null	The children to render.
value	string	null	Value of the group.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CommandMenuGroup component.

name	type	default	description
commandmenu	CommandMenuRootInstance	null	The CommandMenu component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CommandMenuGroup component.

name	type	default	description
root	CommandMenuGroupPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CommandMenuGroup component.

values
ComponentInstance<CommandMenuGroupProps, CommandMenuGroupState, CommandMenuGroupExposes>

CommandMenuGroupHeading#

Props#

Defines valid properties in CommandMenuGroupHeading component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CommandMenuGroupHeadingInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CommandMenuGroupHeadingInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CommandMenuGroupHeadingPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CommandMenuGroupHeadingInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CommandMenuGroupHeading component.

name	type	default	description
commandmenu	CommandMenuRootInstance	null	The CommandMenu component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CommandMenuGroupHeading component.

name	type	default	description
root	CommandMenuGroupHeadingPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CommandMenuGroupHeading component.

values
ComponentInstance<CommandMenuGroupHeadingProps, CommandMenuGroupHeadingState, CommandMenuGroupHeadingExposes>

CommandMenuList#

Props#

Defines valid properties in CommandMenuList component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CommandMenuListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CommandMenuListInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CommandMenuListPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CommandMenuListInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CommandMenuList component.

name	type	default	description
commandmenu	CommandMenuRootInstance	null	The CommandMenu component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CommandMenuList component.

name	type	default	description
root	CommandMenuListPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CommandMenuList component.

values
ComponentInstance<CommandMenuListProps, CommandMenuListState, CommandMenuListExposes>

CommandMenu API

CommandMenuRoot#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

CommandMenuInput#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

CommandMenuEmpty#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

CommandMenuItem#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

CommandMenuGroup#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

CommandMenuGroupHeading#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

CommandMenuList#

Props#

State#

Exposes#

Interfaces#

PassThroughOptions

Types#

Instance

useCommandMenu#

Props#

State#

Exposes#

Events#

Types#