Command

A command is a form element that allows the user to select one or more options from a set of choices. Uses CMDK for it’s implmentation.

CMDK Documentation

Import

import { Command } from "@aeonkit/react";

Usage

Options

Example Options

const texas = [
  {
    label: "Houston",
    value: "houston",
  },
]
const california = [
  {
    label: "Los Angeles",
    value: "los-angeles",
  },
]

Default

You can use the Command component to create a command input with a list of options.

Preview
Code

<Command>
  <Command.Input
    placeholder="Search Texas and California cities"
    onValueChange={(v) => console.log(v)}
  />
  <Command.List>
    {[...texas, ...california]
      .sort((a, b) =>
        a.value.toLowerCase().localeCompare(b.value.toLocaleLowerCase()),
      )
      .map((option) => (
        <Command.Item
          onSelect={(s) => alert(s.toLocaleUpperCase())}
          value={option.value}
        >
          {option.label}
        </Command.Item>
      ))}
    <Command.Empty>No cities were found.</Command.Empty>
  </Command.List>
</Command>

Group

You can use the Command.Group component to group multiple commands together.

Preview
Code

<Command>
        <Command.Input
          placeholder="Search Texas and California cities"
          onValueChange={(v) => console.log(v)}
        />
        <Command.List>
          <Command.Group
            heading={
              <div className="mb-4 text-slate-600 dark:text-slate-300 font-semibold">
                Texas
              </div>
            }
          >
            {texas
              .sort((a, b) =>
                a.value.toLowerCase().localeCompare(b.value.toLocaleLowerCase())
              )
              .map((option) => (
                <Command.Item
                  onSelect={(s) => alert(s.toLocaleUpperCase())}
                  value={option.value}
                >
                  {option.label}
                </Command.Item>
              ))}
          </Command.Group>
          <Command.Separator />
          <Command.Group
            heading={
              <div className="mb-4 text-slate-600 dark:text-slate-300 font-semibold">
                California
              </div>
            }
          >
            {california
              .sort((a, b) =>
                a.value.toLowerCase().localeCompare(b.value.toLocaleLowerCase())
              )
              .map((option) => (
                <Command.Item
                  onSelect={(s) => alert(s.toLocaleUpperCase())}
                  value={option.value}
                >
                  {option.label}
                </Command.Item>
              ))}
          </Command.Group>

          <Command.Empty>No cities were found.</Command.Empty>
        </Command.List>
      </Command>

);
}

Props

API Interface: CommandProps

API Interface: CommandEmptyProps

API Interface: CommandGroupProps

icon?

ReactNode

The icon to display.

iconClassName?

string

The class name of the icon.

API Interface: CommandInputProps

API Interface: CommandItemProps

API Interface: CommandListProps

API Interface: CommandLoadingProps

API Interface: CommandSeparatorProps