Command

Overview

Command is a searchable, keyboard-navigable list for filtering and running commands or selecting from a set of options. It is built on cmdk, so typing in the input filters the list in real time, and the arrow keys plus Enter move through and select items.

It is a compound component: compose a Command from an input, a list, groups, and items. Use it inline (as an embedded searchable list) or wrap it in CommandDialog to present it as a modal command palette.

Usage

Import the parts you need:

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@eqtylab/equality";

A basic inline command list:

<Command>
  <CommandInput placeholder="Search repositories..." />
  <CommandEmpty>No repositories found.</CommandEmpty>
  <CommandGroup heading="Repositories">
    <CommandItem value="option-1" onSelect={() => handleSelect("option-1")}>
      Option 1
    </CommandItem>
    <CommandItem value="option-2" onSelect={() => handleSelect("option-2")}>
      Option 2
    </CommandItem>
  </CommandGroup>
</Command>

Default

As a Dialog

Wrap the command list in CommandDialog to present it as a modal command palette — commonly opened with a keyboard shortcut such as ⌘K. CommandDialog accepts the same open/onOpenChange props as Dialog, plus an optional title and description (visually part of the dialog header and read by screen readers).

import {
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@eqtylab/equality";

const [open, setOpen] = useState(false);

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem onSelect={() => runAction()}>Run action</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>;

Slots

Compose a command interface from the following parts:

Props

Each part forwards its underlying cmdk props (and className). The most commonly used are listed below.