Command

Storybook

Go to Story

Command()

function Command(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:48

Root command component built on top of cmdk.

Provides the container and base styles. Compose with CommandInput, CommandList, CommandGroup, CommandItem, CommandSeparator, CommandEmpty, and CommandShortcut.

Parameters

Parameter	Type
__namedParameters	Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

// Basic searchable list
<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>
        Calculator
        <CommandShortcut>⌘K</CommandShortcut>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

---

CommandDialogContent()

function CommandDialogContent(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:97

Command dialog content composed of DialogContent and Command.

Use this inside your own Dialog wrapper for maximum composability. The CommandDialogContentProps#title|title and CommandDialogContentProps#description|description are announced to assistive tech but are visually hidden.

Parameters

Parameter	Type
__namedParameters	CommandDialogContentProps

Returns

Element

Example

const [open, setOpen] = useState(false);
<Dialog open={open} onOpenChange={setOpen}>
  <CommandDialogContent title="Command Palette">
    <CommandInput placeholder="Search..." />
    <CommandList>
      <CommandGroup heading="Files">
        <CommandItem>Open Recent</CommandItem>
      </CommandGroup>
    </CommandList>
  </CommandDialogContent>
</Dialog>

---

CommandInput()

function CommandInput(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:138

Search input with an inline search icon and bottom border.

Place inside Command (or compose with Dialog using CommandDialogContent) to filter list items automatically.

Parameters

Parameter	Type
__namedParameters	Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<HTMLInputElement>> & object & object, "key" | "asChild" | keyof InputHTMLAttributes<HTMLInputElement>>, "value" | "type" | "onChange"> & object & RefAttributes<HTMLInputElement>

Returns

Element

Example

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandItem>Calendar</CommandItem>
    <CommandItem>Calculator</CommandItem>
  </CommandList>
</Command>

---

CommandList()

function CommandList(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:175

Scrollable list container for groups and items.

Must wrap CommandGroup, CommandItem, CommandEmpty, and CommandSeparator.

Parameters

Parameter	Type
__namedParameters	Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<CommandList>
  <CommandEmpty>No results</CommandEmpty>
  <CommandGroup heading="General">
    <CommandItem>Open</CommandItem>
  </CommandGroup>
</CommandList>

---

CommandEmpty()

function CommandEmpty(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:199

Displayed when there are no results.

Parameters

Parameter	Type
__namedParameters	Children & Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & RefAttributes<HTMLDivElement>

Returns

Element

Example

<CommandList>
  <CommandEmpty>No results found.</CommandEmpty>
</CommandList>

---

CommandGroup()

function CommandGroup(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:229

Group container with heading support.

Parameters

Parameter	Type
__namedParameters	Children & Omit<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<CommandList>
  <CommandGroup heading="Suggestions">
    <CommandItem>Calendar</CommandItem>
  </CommandGroup>
</CommandList>

---

CommandSeparator()

function CommandSeparator(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:255

Visual separator between items/groups.

Parameters

Parameter	Type
__namedParameters	Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<CommandList>
  <CommandGroup heading="General" />
  <CommandSeparator />
  <CommandGroup heading="Settings" />
</CommandList>

---

CommandItem()

function CommandItem(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:277

Selectable item row.

Parameters

Parameter	Type
__namedParameters	Children & Omit<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & object & object, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "onSelect" | "disabled"> & object & RefAttributes<HTMLDivElement>

Returns

Element

Example

<CommandItem>
  Open File
  <CommandShortcut>⌘O</CommandShortcut>
</CommandItem>

---

CommandShortcut()

function CommandShortcut(__namedParameters): Element;

Defined in: src/components/Command/Command.tsx:302

Right-aligned keyboard shortcut hint.

Parameters

Parameter	Type
__namedParameters	DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>>

Returns

Element

Example

<CommandItem>
  Preferences
  <CommandShortcut>⌘,</CommandShortcut>
</CommandItem>