NavigationInteractive playground

Command

An action list that filters as you type.

Preparing the playground…

Text and Markdown example

Command · Example

1<Command style={{width:360}}><CommandInput placeholder="Search for an action…" /><CommandList><CommandEmpty>No results.</CommandEmpty><CommandGroup heading="Actions"><CommandItem value="proyecto">Create project</CommandItem><CommandItem value="equipo">Invite to team</CommandItem></CommandGroup></CommandList></Command>

Read documentation in Markdown

How to use it

Set value on each action and handle onSelect. CommandDialog displays the search interface in a dialog.

Import

React / Next.js

1import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut } from "@kivora/nextjs";

Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.

API reference 0.2.0

Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.

Property	Type	Description
`aria-label`	`string`	Accessible name of the control.
`asChild`	`boolean`	Apply props and behavior to a single compatible child element.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| (readonly string[] & string)`	Initial value when the component manages its own state.
`disablePointerSelection`	`boolean`	Optionally set to `true` to disable selection via pointer events.
`filter`	`CommandFilter`	Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the `command-score` library.
`id`	`string`	Element identifier; associates labels and descriptions.
`label`	`string`	Text or accessible label.
`loop`	`boolean`	Optionally set to `true` to turn on looping around when using the arrow keys.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	Change event. Check the type: some controls return an object, others a DOM event.
`onClick`	`MouseEventHandler<HTMLDivElement>`	Action performed when the element is activated.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	Form submission event.
`onValueChange`	`((value: string) => void)`	Receives the value after an interaction.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`shouldFilter`	`boolean`	Optionally set to `false` to turn off the automatic filtering and sorting. If `false`, you must conditionally render valid items based on the search query yourself.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.
`value`	`string`	Controlled value. Update it from the change callback.
`vimBindings`	`boolean`	Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.

Subcomponents and composition

Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.

Command22 properties

Command · TypeScript

1Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>

CommandDialog10 properties

Property	Type	Description
`children`	`ReactNode`	Content or child elements of the component.
`commandClassName`	`string`	CSS classes for the specified element.
`contentClassName`	`string`	CSS classes for the specified element.
`defaultOpen`	`boolean`	Whether it starts open in uncontrolled mode.
`modal`	`boolean`	Configures modal. The type describes the supported values and structure.
`onOpenChange`	`((open: boolean) => void)`	Receives the new open state.
`open`	`boolean`	Controlled open state.
`shortcut`	`boolean`	Configures shortcut. The type describes the supported values and structure.
`shortcutKey`	`string`	Configures shortcutKey. The type describes the supported values and structure.
`trigger`	`ReactNode`	Configures trigger. The type describes the supported values and structure.

CommandDialog · TypeScript

1declare function CommandDialog({ children, commandClassName, contentClassName, defaultOpen, onOpenChange, open, shortcut, shortcutKey, trigger, ...props }: CommandDialogProps): React.JSX.Element;

CommandInput27 properties

Property	Type	Description
`alt`	`string`	Alternative text for the image.
`aria-label`	`string`	Accessible name of the control.
`asChild`	`boolean`	Apply props and behavior to a single compatible child element.
`autoComplete`	`HTMLInputAutoCompleteAttribute`	Tell the browser which autocomplete type to use.
`checked`	`boolean`	Controlled selection state.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| number \| readonly string[]`	Initial value when the component manages its own state.
`disabled`	`boolean`	Disable interaction with the control.
`id`	`string`	Element identifier; associates labels and descriptions.
`max`	`string \| number`	Maximum allowed value.
`maxLength`	`number`	Maximum number of characters.
`min`	`string \| number`	Minimum allowed value.
`name`	`string`	Name used to identify the control in forms.
`onClick`	`MouseEventHandler<HTMLInputElement>`	Action performed when the element is activated.
`onSubmit`	`SubmitEventHandler<HTMLInputElement>`	Form submission event.
`onValueChange`	`((search: string) => void)`	Receives the value after an interaction.
`placeholder`	`string`	Short hint displayed when there is no value.
`required`	`boolean`	Indicates that a value is required.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`src`	`string`	Resource path or URL.
`step`	`string \| number`	Increment between values.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.
`value`	`string`	Controlled value. Update it from the change callback.

CommandInput · TypeScript

1CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>

CommandList15 properties

Property	Type	Description
`aria-label`	`string`	Accessible name of the control.
`asChild`	`boolean`	Apply props and behavior to a single compatible child element.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| number \| readonly string[]`	Initial value when the component manages its own state.
`id`	`string`	Element identifier; associates labels and descriptions.
`label`	`string`	Text or accessible label.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	Change event. Check the type: some controls return an object, others a DOM event.
`onClick`	`MouseEventHandler<HTMLDivElement>`	Action performed when the element is activated.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	Form submission event.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.

CommandList · TypeScript

1CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>

CommandEmpty14 properties

Property	Type	Description
`aria-label`	`string`	Accessible name of the control.
`asChild`	`boolean`	Apply props and behavior to a single compatible child element.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| number \| readonly string[]`	Initial value when the component manages its own state.
`id`	`string`	Element identifier; associates labels and descriptions.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	Change event. Check the type: some controls return an object, others a DOM event.
`onClick`	`MouseEventHandler<HTMLDivElement>`	Action performed when the element is activated.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	Form submission event.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.

CommandEmpty · TypeScript

1CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>

CommandGroup17 properties

Property	Type	Description
`aria-label`	`string`	Accessible name of the control.
`asChild`	`boolean`	Apply props and behavior to a single compatible child element.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| number \| readonly string[]`	Initial value when the component manages its own state.
`forceMount`	`boolean`	Whether this group is forcibly rendered regardless of filtering.
`heading`	`ReactNode`	Optional heading to render for this group.
`id`	`string`	Element identifier; associates labels and descriptions.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	Change event. Check the type: some controls return an object, others a DOM event.
`onClick`	`MouseEventHandler<HTMLDivElement>`	Action performed when the element is activated.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	Form submission event.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.
`value`	`string`	Controlled value. Update it from the change callback.

CommandGroup · TypeScript

1CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>

CommandItem19 properties

Property	Type	Description
`aria-label`	`string`	Accessible name of the control.
`asChild`	`boolean`	Apply props and behavior to a single compatible child element.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| number \| readonly string[]`	Initial value when the component manages its own state.
`disabled`	`boolean`	Disable interaction with the control.
`forceMount`	`boolean`	Whether this item is forcibly rendered regardless of filtering.
`id`	`string`	Element identifier; associates labels and descriptions.
`keywords`	`string[]`	Optional keywords to match against when filtering.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	Change event. Check the type: some controls return an object, others a DOM event.
`onClick`	`MouseEventHandler<HTMLDivElement>`	Action performed when the element is activated.
`onSelect`	`((value: string) => void)`	Action or selection made by the user.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	Form submission event.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.
`value`	`string`	Controlled value. Update it from the change callback.

CommandItem · TypeScript

1CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>

CommandSeparator15 properties

Property	Type	Description
`alwaysRender`	`boolean`	Whether this separator should always be rendered. Useful if you disable automatic filtering.
`aria-label`	`string`	Accessible name of the control.
`asChild`	`boolean`	Apply props and behavior to a single compatible child element.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| number \| readonly string[]`	Initial value when the component manages its own state.
`id`	`string`	Element identifier; associates labels and descriptions.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	Change event. Check the type: some controls return an object, others a DOM event.
`onClick`	`MouseEventHandler<HTMLDivElement>`	Action performed when the element is activated.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	Form submission event.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.

CommandSeparator · TypeScript

1CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>

CommandShortcut13 properties

Property	Type	Description
`aria-label`	`string`	Accessible name of the control.
`children`	`ReactNode`	Content or child elements of the component.
`className`	`string`	Additional CSS classes to customize the element.
`defaultChecked`	`boolean`	Initial selection of the control.
`defaultValue`	`string \| number \| readonly string[]`	Initial value when the component manages its own state.
`id`	`string`	Element identifier; associates labels and descriptions.
`onChange`	`ChangeEventHandler<HTMLSpanElement, Element>`	Change event. Check the type: some controls return an object, others a DOM event.
`onClick`	`MouseEventHandler<HTMLSpanElement>`	Action performed when the element is activated.
`onSubmit`	`SubmitEventHandler<HTMLSpanElement>`	Form submission event.
`role`	`AriaRole`	Semantic role of the element. Keep the default role unless a change is justified.
`style`	`CSSProperties`	React inline styles.
`tabIndex`	`number`	Keyboard focus order and availability.
`title`	`string`	Title or supplementary information.

CommandShortcut · TypeScript

1CommandShortcut: {
2    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
3    displayName: string;
4}

API generated from @kivora/nextjs 0.2.0View package