# Command
Command menu for search and quick actions.
```twig
No results found.
Calendar
Search Emoji
Calculator
Profile
⌘P
Billing
⌘B
Settings
⌘S
```
## Installation
> [!NOTE]
> Available since UX Toolkit 3.6.
```shell
php bin/console ux:install command --kit shadcn
```
## Usage
```twig
No results found.
Calendar
Search Emoji
Calculator
Profile
Billing
Settings
```
To run an action when an item is chosen, with a click or with `Enter`, listen to the `click` event of the item, or render the item as a link with `as="a"`.
## Examples
### Basic
A simple command menu in a dialog.
```twig
Open Menu
No results found.
Calendar
Search Emoji
Calculator
```
### Shortcuts
```twig
Open Menu
No results found.
Profile
⌘P
Billing
⌘B
Settings
⌘S
```
### Groups
A command menu with groups, icons and separators.
```twig
Open Menu
No results found.
Calendar
Search Emoji
Calculator
Profile
⌘P
Billing
⌘B
Settings
⌘S
```
### Scrollable
Scrollable command menu with multiple items.
```twig
Open Menu
No results found.
Home
⌘H
Inbox
⌘I
Documents
⌘D
Folders
⌘F
New File
⌘N
New Folder
⇧⌘N
Copy
⌘C
Cut
⌘X
Paste
⌘V
Delete
⌫
Grid View
List View
Zoom In
⌘+
Zoom Out
⌘-
Profile
⌘P
Billing
⌘B
Settings
⌘S
Notifications
Help & Support
Calculator
Calendar
Image Editor
Code Editor
```
### Links
Render an item as a link with `as="a"`: a click and `Enter` follow it.
```twig
No results found.
Home
Inbox
Settings
```
### RTL
To enable RTL support, set the `dir="rtl"` attribute on the root element.
```twig
{# Arabic #}
لم يتم العثور على نتائج.
التقويم
البحث عن الرموز التعبيرية
الآلة الحاسبة
الملف الشخصي
⌘P
الفوترة
⌘B
الإعدادات
⌘S
{# Hebrew #}
לא נמצאו תוצאות.
לוח שנה
חפש אמוג'י
מחשבון
פרופיל
⌘P
חיוב
⌘B
הגדרות
⌘S
```
## Accessibility
- `Command:Input` is a combobox that controls the `Command:List` listbox. The selected item is announced through `aria-activedescendant`, so the focus stays in the input while the selection moves.
- `ArrowDown` and `ArrowUp` move the selection, `Home` and `End` jump to the first and last item, and `Alt` with an arrow jumps to the next or previous group. `Enter` clicks the selected item. Disabled items are skipped.
- `Command:Dialog` renders a `Dialog:Content` labelled by a visually hidden title and description. Set the `title` and `description` props to translate them.
## API Reference
### ``
| Block | Description |
|:------|:------------|
| `content` | The command structure, typically includes `Command:Input` and `Command:List`. |
### ``
| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `title` | `string` | `'Command Palette'` | The title of the dialog, only announced to assistive technologies. |
| `description` | `string` | `'Search for a command to run...'` | The description of the dialog, only announced to assistive technologies. |
| `showCloseButton` | `boolean` | `false` | Whether to display the close button in the top-right corner. |
| Block | Description |
|:------|:------------|
| `content` | The dialog content, typically a `Command`. |
### ``
| Block | Description |
|:------|:------------|
| `content` | The message shown when the search matches no item. |
### ``
| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `heading` | `string\|null` | `null` | The heading displayed above the items of the group. |
| Block | Description |
|:------|:------------|
| `content` | The items of the group, typically `Command:Item` elements. |
### ``
| Prop | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| `as` | `'div'\|'a'` | `'div'` | The HTML tag to render; use `a` when the item is a link. |
| `disabled` | `boolean` | `false` | Whether the item is disabled. |
| Block | Description |
|:------|:------------|
| `content` | The item content, typically an icon, a label and an optional `Command:Shortcut`. |
### ``
| Block | Description |
|:------|:------------|
| `content` | The list content, typically includes `Command:Empty`, `Command:Group` and `Command:Separator`. |
### ``
| Block | Description |
|:------|:------------|
| `content` | The keyboard shortcut text (e.g., "⌘P"). |