Command

Fast, composable, unstyled command menu for React.
1<Flex style={{ width: 400 }}>
2  <Command>
3    <Command.Input placeholder="Type a command or search..." />
4    <Command.List>
5      <Command.Empty>No results found.</Command.Empty>
6      <Command.Group heading="Suggestions">
7        <Command.Item>Calendar</Command.Item>
8        <Command.Item>Search Emoji</Command.Item>
9        <Command.Item>Calculator</Command.Item>
10      </Command.Group>
11      <Command.Separator />
12      <Command.Group heading="Settings">
13        <Command.Item>Profile</Command.Item>
14        <Command.Item>Billing</Command.Item>
15        <Command.Item>Settings</Command.Item>

Anatomy

Import and assemble the component:

1import { Command } from "@raystack/apsara";
2

3<Command />

Examples

Basic Usage

1<Flex style={{ width: 400 }}>
2  <Command>
3    <Command.Input placeholder="Type a command or search..." />
4    <Command.List>
5      <Command.Empty>No results found.</Command.Empty>
6      <Command.Group heading="Suggestions">
7        <Command.Item>Calendar</Command.Item>
8        <Command.Item>Search Emoji</Command.Item>
9        <Command.Item>Calculator</Command.Item>
10      </Command.Group>
11      <Command.Separator />
12      <Command.Group heading="Settings">
13        <Command.Item>Profile</Command.Item>
14        <Command.Item>Billing</Command.Item>
15        <Command.Item>Settings</Command.Item>

Accessibility

  • Follows the WAI-ARIA Combobox pattern
  • Supports keyboard navigation with arrow keys and Enter to select
  • Uses role="listbox" for the command list and role="option" for items