# Command

A command palette with search, groups and shortcuts (⌘K).

Group: Overlays & Feedback

## Import

```tsx
import { Command } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function CommandDemo() {
  const [open, setOpen] = useState(false)
  const [picked, setPicked] = useState<string | null>(null)

  return (
    <Stack gap="2">
      <HStack gap="3">
        <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
          Open command palette
          <Command.Shortcut position="static" ms="2">
            ⌘K
          </Command.Shortcut>
        </Button>
        {picked && <Text fontSize="sm" color="fg.muted">Picked: {picked}</Text>}
      </HStack>

      <Command.Dialog open={open} onOpenChange={setOpen} hotkey="k" title="Command palette">
        <Command.Input placeholder="Type a command or search..." />
        <Command.List>
          <Command.Empty />
          <Command.Group heading="Suggestions">
            <Command.Item value="Calendar" onSelect={(v) => { setPicked(v); setOpen(false) }}>
              Calendar
            </Command.Item>
            <Command.Item value="Search Emoji" onSelect={(v) => { setPicked(v); setOpen(false) }}>
              Search Emoji
            </Command.Item>
            <Command.Item value="Calculator" keywords={["math"]} onSelect={(v) => { setPicked(v); setOpen(false) }}>
              Calculator
            </Command.Item>
          </Command.Group>
          <Command.Separator />
          <Command.Group heading="Settings">
            <Command.Item value="Profile" onSelect={(v) => { setPicked(v); setOpen(false) }}>
              Profile
              <Command.Shortcut>⌘P</Command.Shortcut>
            </Command.Item>
            <Command.Item value="Billing" onSelect={(v) => { setPicked(v); setOpen(false) }}>
              Billing
              <Command.Shortcut>⌘B</Command.Shortcut>
            </Command.Item>
          </Command.Group>
        </Command.List>
      </Command.Dialog>
    </Stack>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shouldFilter` | `boolean` | `true` | Turn off built-in filtering when you filter yourself (e.g. server results). |
| `search` | `string` |  | Controlled search text. |
| `onSearchChange` | `(search: string) => void` |  |  |
| `loop` | `boolean` | `true` | Arrow down on the last item wraps to the first. |

### Group

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` |  |  |

### Item

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` |  | Text matched against the search. Defaults to `children` when it is a string. |
| `keywords` | `string[]` |  | Extra keywords used by search. |
| `disabled` | `boolean` |  |  |
| `onSelect` | `(value: string) => void` |  |  |

### Dialog

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` * | `boolean` |  |  |
| `onOpenChange` * | `(open: boolean) => void` |  |  |
| `hotkey` | `string` |  | Shortcut letter (used with Cmd/Ctrl), e.g. `"k"` for Cmd/Ctrl+K. |
| `title` | `string` |  | Accessible label of the dialog. |

`*` = required. Style props and HTML attributes are accepted too.