# Command

An action list that filters as you type.

## How to use it

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



## Import


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


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<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>
```


## API: Command


```typescript
Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| (readonly string[] & string) | No | Initial value when the component manages its own state. |
| disablePointerSelection | boolean | No | Optionally set to `true` to disable selection via pointer events. |
| filter | CommandFilter | No | 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 | No | Element identifier; associates labels and descriptions. |
| label | string | No | Text or accessible label. |
| loop | boolean | No | Optionally set to `true` to turn on looping around when using the arrow keys. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| onValueChange | ((value: string) => void) | No | Receives the value after an interaction. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| shouldFilter | boolean | No | 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 | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| value | string | No | Controlled value. Update it from the change callback. |
| vimBindings | boolean | No | Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`. |

## API: CommandDialog


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


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| commandClassName | string | No | See the published type. |
| contentClassName | string | No | See the published type. |
| defaultOpen | boolean | No | Whether it starts open in uncontrolled mode. |
| modal | boolean | No | See the published type. |
| onOpenChange | ((open: boolean) => void) | No | Receives the new open state. |
| open | boolean | No | Controlled open state. |
| shortcut | boolean | No | See the published type. |
| shortcutKey | string | No | See the published type. |
| trigger | ReactNode | No | See the published type. |

## API: CommandInput


```typescript
CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>
```


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

## API: CommandList


```typescript
CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>
```


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

## API: CommandEmpty


```typescript
CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>
```


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

## API: CommandGroup


```typescript
CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>
```


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

## API: CommandItem


```typescript
CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>
```


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

## API: CommandSeparator


```typescript
CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>
```


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

## API: CommandShortcut


```typescript
CommandShortcut: {
    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
    displayName: string;
}
```


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

Source: https://kivora.pro/docs/componentes/command