Command

Command is a headless command palette component with keyboard navigation, search filtering, and item grouping. It is commonly used for command palettes, autocomplete, and searchable lists.

Usage

import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '@loke/ui/command';

export default function Example() {
  return (
    <Command>
      <CommandInput placeholder="Search commands..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Create project</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Actions">
          <CommandItem>Delete</CommandItem>
          <CommandItem>Export</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Sub-components

• CommandInput — Search input field
• CommandList — Container for items and groups
• CommandEmpty — Shown when no items match the filter
• CommandGroup — Groups related items with an optional heading
• CommandItem — Individual selectable item
• CommandSeparator — Visual divider between groups
• CommandLoading — Loading state indicator (optional)

Props

Examples

Command palette with search

Accessibility

• Arrow keys navigate between items; Enter selects.
• Search input receives focus automatically.
• Selected item has aria-selected="true".
• Empty state is announced when no items match.

Best practices

• Use CommandItem with a unique value for each item.
• Customize the filter function via shouldFilter for advanced search logic.
• Provide clear group headings and visual separators.
• Handle CommandEmpty to guide users when no matches are found.