Command (Search)

Fast, composable, unstyled command menu for React.

Usage

Filters large lists to selectable options based on the matching query.

import { 
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut, } from "@momo-webplatform/mobase";

CommandInput handle onChange event with props :

Change value input onValueChange(currentValue: string) => void
Clear value input onClickClear

CommandItem use function onSelect for selection value :

onSelect(currentValue: string) => void
isActive: (true | false) appear iconCheck

API Reference

Command component extends cmdk (opens in a new tab) component and supports all of its props.

Command

Prop	Type	Default	Required
`defaultValue`	enumstring \| (readonly string[] & string)	--	false
`label`	string	--	false
`shouldFilter`	enumboolean	--	false
`filter`	(value: string, search: string) => number	--	false
`value`	string	--	false
`onValueChange`	(value: string) => void	--	false
`loop`	enumboolean	--	false
`vimBindings`	enumboolean	--	false

CommandDialog

Prop	Type	Default	Required
`open`	enumboolean	--	false
`defaultOpen`	enumboolean	--	false
`onOpenChange`	(open: boolean) => void	--	false
`modal`	enumboolean	--	false

CommandInput

Prop	Type	Default	Required
`value`	string	--	false
`onValueChange`	(search: string) => void	--	false
`onClickClear`	(value: string) => void	--	false

CommandList

Prop

Type

Default

Required

CommandEmpty

Prop

Type

Default

Required

CommandGroup

Prop	Type	Default	Required
`value`	string	--	false
`heading`	enumReactNode	--	false
`forceMount`	enumboolean	--	false

CommandItem

Prop	Type	Default	Required
`onSelect`	(value: string) => void	--	false
`value`	string	--	false
`disabled`	enumboolean	--	false
`forceMount`	enumboolean	--	false
`isActive`	enumboolean	--	false

CommandShortcut

Prop

Type

Default

Required

CommandSeparator

Prop	Type	Default	Required
`alwaysRender`	enumboolean	--	false

Combobox Date Picker