Search Fields

Command is a filterable, keyboard-driven list built on cmdk. It pairs a search input with grouped, selectable items that filter as the user types, which makes it the building block for both inline search fields and the global command palette. Wrap it in CommandDialog to launch it as a modal palette from a keyboard shortcut.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: command.tsx

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@beacon/design-system";

<Command className="rounded-lg border shadow-md w-[350px]">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

To launch it as a modal palette, wrap the same children in CommandDialog and drive its open state from a keyboard shortcut.

Parts

Part	Role
Command	Root container that owns the filter state and renders the list.
CommandDialog	Wraps Command in a modal dialog. Accepts the dialog’s open and onOpenChange props.
CommandInput	The search input, prefixed with a search icon. Typing filters the items.
CommandList	Scrollable region that holds the groups, items, and empty state.
CommandEmpty	Shown when the query matches no items.
CommandGroup	A labeled section of items; set the label with the heading prop.
CommandItem	A selectable row. Disable with disabled; handle selection via onSelect.
CommandSeparator	A divider between groups.
CommandShortcut	A right-aligned hint for the item’s keyboard shortcut.

When to use

• A global command palette launched by a keyboard shortcut for jumping to records and actions.
• An inline, filterable picker where the option set is long enough to need search.
• Quick-switcher style navigation between entities (projects, liens, tenants).

Do not use Command for free-form text entry that is not a search; reach for a plain text input instead.