Command

The Command component provides a flexible UI element for displaying a command palette. It is composed of several subcomponents such as Command.Input, Command.List, Command.Item, and Command.Shortcut to offer a structured and customizable interface.

Usage

import { Command } from '@harnessio/ui/components'

const CommandUsage = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (<>
    <Command.Dialog open={isOpen} onOpenChange={setIsOpen}>
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Suggestions">
          <Command.Item>Item 1</Command.Item>
          <Command.Item>Item 2</Command.Item>
          <Command.Separator />
          <Command.Item>Item 4</Command.Item>
          <Command.Item>Item 3</Command.Item>
        </Command.Group>
        <Command.Group heading="Commands">
          <Command.Item>
            Command 1
            <Command.Shortcut>⌘K</Command.Shortcut>
          </Command.Item>
          <Command.Item>
            Command 2
            <Command.Shortcut>⌘L</Command.Shortcut>
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command.Dialog>
    <Button onClick={() => setIsOpen(true)}>Open Command Dialog</Button>
  </>)
}

Anatomy

All parts of the Command component can be imported and composed as required.

<Command.Dialog>
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item></Command.Item>
      <Command.Item></Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Commands">
      <Command.Item>
        <Command.Shortcut>⌘K</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <Command.Shortcut>⌘L</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>

API Reference

Root

The Root component serves as the main container for all command elements.

Prop	Required	Default	Value
children	true		ReactNode
className	false		string
label	false		string
shouldFilter	false	true	boolean
filter	false		(value: string, search: string, keywords?: string[]) => number
defaultValue	false		string
value	false		string
onValueChange	false		(value: string) => void
loop	false	false	boolean
disablePointerSelection	false	false	boolean
vimBindings	false	true	boolean

Dialog

The Dialog component is used to display the command palette as a dialog.

<Command.Dialog>
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>Item 1</Command.Item>
      <Command.Item>Item 2</Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Commands">
      <Command.Item>
        <span>Command 1</span>
        <Command.Shortcut>⌘K</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <span>Command 2</span>
        <Command.Shortcut>⌘L</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>

Prop	Required	Default	Value
children	true		ReactNode
open	false		boolean
defaultOpen	false		boolean
onOpenChange	false		(open: boolean) => void
modal	false		boolean
className	false		string
overlayClassName	false		string
contentClassName	false		string
container	false		HTMLElement

Input

The Input component is used to capture user input for the command palette.

<Command.Input placeholder="Type a command or search..." />

Prop	Required	Default	Value
placeholder	false		string
className	false		string
value	false		string
onValueChange	false		(search: string) => void

List

The List component defines the main content area of the command palette.

<Command.List>
  <Command.Empty>No results found.</Command.Empty>
  <Command.Group heading="Suggestions">
    <Command.Item>Item 1</Command.Item>
    <Command.Item>Item 2</Command.Item>
  </Command.Group>
  <Command.Separator />
  <Command.Group heading="Commands">
    <Command.Item>
      <span>Command 1</span>
      <Command.Shortcut>⌘K</Command.Shortcut>
    </Command.Item>
    <Command.Item>
      <span>Command 2</span>
      <Command.Shortcut>⌘L</Command.Shortcut>
    </Command.Item>
  </Command.Group>
</Command.List>

Prop	Required	Default	Value
children	true		ReactNode
className	false		string
heightClassName	false		string
label	false		string

Empty

The Empty component is used to display a message when there are no results.

<Command.Empty>No results found.</Command.Empty>

Prop	Required	Default	Value
children	true		ReactNode
className	false		string

Group

The Group component is used to group related command items.

<Command.Group heading="Suggestions">
  <Command.Item>Item 1</Command.Item>
  <Command.Item>Item 2</Command.Item>
</Command.Group>

Prop	Required	Default	Value
children	true		ReactNode
heading	true		string
className	false		string
value	false		string
forceMount	false		boolean

Item

The Item component defines an individual item within the command palette.

<Command.Item>
  <span>Command 1</span>
  <Command.Shortcut>⌘K</Command.Shortcut>
</Command.Item>

Prop	Required	Default	Value
children	true		ReactNode
className	false		string
disabled	false		boolean
onSelect	false		(value: string) => void
value	false		string
keywords	false		string[]
forceMount	false		boolean

Shortcut

The Shortcut component is used to display keyboard shortcuts for command items.

<Command.Item>
  <span>Command 1</span>
  <Command.Shortcut>⌘K</Command.Shortcut>
</Command.Item>

Prop	Required	Default	Value
children	true		ReactNode
className	false		string

Separator

The Separator component is used to separate groups of command items.

<Command.Separator />

Prop	Required	Default	Value
className	false		string
alwaysRender	false		boolean