Source: https://app-studio-6167b.web.app/docs/Command

@app-studio/components

# Command

A versatile component for searching, filtering, and executing commands or actions.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command.tsx)

## Import

```ts
import { Command } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Command } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { HomeIcon, SettingsIcon, UserIcon, InfoIcon, SearchIcon } from '@app-studio/components';

export const DefaultCommand = () => {
  const [open, setOpen] = useState(false);

  const commands = [
    {
      id: 'home',
      name: 'Home',
      description: 'Go to home page',
      icon: <HomeIcon widthHeight={16} />,
      shortcut: '⌘H',
      onSelect: () => console.log('Home selected'),
    },
    {
      id: 'settings',
      name: 'Settings',
      description: 'Open settings page',
      icon: <SettingsIcon widthHeight={16} />,
      shortcut: '⌘S',
      onSelect: () => console.log('Settings selected'),
    },
    {
      id: 'profile',
      name: 'Profile',
      description: 'View your profile',
      icon: <UserIcon widthHeight={16} />,
      shortcut: '⌘P',
      onSelect: () => console.log('Profile selected'),
    },
    {
      id: 'help',
      name: 'Help',
      description: 'Get help and support',
      icon: <InfoIcon widthHeight={16} />,
      shortcut: '⌘?',
      onSelect: () => console.log('Help selected'),
    },
    {
      id: 'search',
      name: 'Search',
      description: 'Search for content',
      icon: <SearchIcon widthHeight={16} />,
      shortcut: '⌘K',
      onSelect: () => console.log('Search selected'),
    },
  ];

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
      <Command
        open={open}
        onOpenChange={setOpen}
        commands={commands}
        placeholder="Search commands..."
      />
    </>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Command**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` Required | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L12) |
| `onOpenChange` Required | `(open: boolean) => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L14) |
| `groups` | `CommandGroup[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L16) |
| `commands` | `CommandItem[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L18) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L20) |
| `size` | `CommandSize` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L22) |
| `variant` | `CommandVariant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L24) |
| `filter` | `((value: string, item: CommandItem) => boolean)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L26) |
| `emptyState` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L28) |
| `footer` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L30) |
| `views` | `CommandStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L32) |

### Command.Input

**Command.Input**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` Required | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L38) |
| `onValueChange` Required | `(value: string) => void` | `—` | Called when the selected value changes.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L40) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L42) |
| `views` | `{ container?: ViewProps; input?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L44) |

### Command.List

**Command.List**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L51) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L53) |

### Command.Group

**Command.Group**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L59) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L61) |
| `views` | `{ container?: ViewProps; heading?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L63) |

### Command.Item

**Command.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` Required | `CommandItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L70) |
| `selected` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L72) |
| `onSelect` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L74) |
| `views` | `{ container?: ViewProps; icon?: ViewProps; content?: ViewProps; name?: ViewProps; description?: ViewProps; shortcut?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L76) |

### Command.Empty

**Command.Empty**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L87) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L89) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.