Command for Radix UI

A command menu narrows its actions as you type.

Use it to run an action or jump to a place. If the list is a form value you must store, use a Combobox. In React, Radix UI filters the collection you passed in.

Installation

Anatomy

CommandRoot
├── CommandClearTrigger
├── CommandContent
├── CommandControl
├── CommandInput
├── CommandItem
│   ├── CommandGroup
│   │   └── CommandGroupLabel
│   ├── CommandItemIndicator
│   └── CommandItemText
├── CommandLabel
├── CommandList
├── CommandPositioner
└── CommandTrigger

Usage

import {
  CalculatorIcon, CalendarIcon, CreditCardIcon, SettingsIcon, SmileIcon,
  UserIcon,
} from "lucide-react";
import {
  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem,
  CommandList, CommandSeparator, CommandShortcut,
} from "@/components/ui/command";

const CommandDemo = () => (
  <Command className="max-w-sm rounded-lg border">
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>
          <CalendarIcon aria-hidden="true" />
          <span>Calendar</span>
        </CommandItem>
        <CommandItem>
          <SmileIcon aria-hidden="true" />
          <span>Search Emoji</span>
        </CommandItem>
        <CommandItem disabled>
          <CalculatorIcon aria-hidden="true" />
          <span>Calculator</span>
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem>
          <UserIcon aria-hidden="true" />
          <span>Profile</span>
          <CommandShortcut>⌘P</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <CreditCardIcon aria-hidden="true" />
          <span>Billing</span>
          <CommandShortcut>⌘B</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <SettingsIcon aria-hidden="true" />
          <span>Settings</span>
          <CommandShortcut>⌘S</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
);

Accessibility

Demos

Basic

Open Menu puts a short list in a dialog: Calendar, Search Emoji, and Calculator, plus a field that filters them. There are no icons and no shortcut hints. An empty state replaces the rows when nothing matches. Use the dialog when the menu should cover the page, and keep the inline list, like the one at the top of this page, when it should stay put.

Shortcuts

Profile, Billing, and Settings, each with an icon and a shortcut hint at the end of the row. The hint is only a label, and nothing here listens for those keys. Show a shortcut when the action is also bound somewhere else, and attach that binding yourself. The dialog still opens from a button, the same way the basic menu does.

Groups

Suggestions and Settings, split by a separator, with an icon on every row and shortcut hints only on the settings rows. Each item carries a group, and the collection builds the headings from that, so you are not hand-writing two lists. Use groups once commands fall into more than one kind. A single list is easier to scan only while it is short.

Scrollable

Navigation, Actions, View, Account, and Tools, enough rows that the dialog has to scroll. The list already overflows on its own, so a second scroll container would fight it. Filtering still removes what does not match, which matters more at this length. Keep the headings, because a long run of unlabeled icons is harder to scan than the field is to type into.

Palette

Command-K or Control-K toggles the dialog from anywhere on the page, and the Search button does the same for a pointer. Pages and Actions are grouped, a few rows show shortcut hints, and the footer names the arrow keys, Enter, and Escape. Picking an item writes its name under the button and closes the dialog. The value stays empty so choosing that same item again still runs.

Rtl

The inline menu from the top of the page, with dir set to rtl on the command and on the input. Headings, labels, the placeholder, and the empty state are Arabic, and the disabled calculator is still disabled. Shortcut hints sit at the inline end of the row. Use this to check the filter and the separator when the line runs right to left.

FAQ

API Reference