Forms

Command

Provides a filterable command list, either inline or inside a dialog.

@dawn/ui/components/command

Preview

Rendered from @dawn/ui

Usage

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@dawn/ui/components/command";

export const PatientCommand = () => (
  <Command>
    <CommandInput placeholder="Search patients…" />
    <CommandList>
      <CommandEmpty>No patient found.</CommandEmpty>
      <CommandGroup heading="Patients">
        <CommandItem>Ada Lovelace</CommandItem>
        <CommandItem>James Baldwin</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
);

API

Commandcmdk Command props: Owns filtering, selection, and keyboard navigation.
CommandDialogDialog props + title + description: Wraps the command surface in Dawn's dialog treatment.
CommandItemcmdk Item props: Represents a selectable value and may include a shortcut label.

Exports

CommandCommandDialogCommandInputCommandListCommandEmptyCommandGroupCommandItemCommandShortcutCommandSeparator