/ux
Components/Navigation/Command

Command

Navigation

cmdk-based command palette primitives (list, item, group).

Low-level cmdk wrappers: Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut. CommandDialog provides a pre-built Cmd+K dialog. For a higher-level command palette, use Spotlight.

Usage

import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "nosible-ux"

export default function Example() {
  return (
    <Command>
      <CommandInput placeholder="Search signals..." />
      <CommandList>
        <CommandEmpty>No signals found.</CommandEmpty>
        <CommandGroup heading="Signals">
          <CommandItem>AAPL earnings</CommandItem>
          <CommandItem>MSFT guidance</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Examples

With dialog trigger

Accessibility

cmdk handles role="combobox", role="listbox", role="option", aria-activedescendant, keyboard navigation, and type-ahead filtering.

Props

Name TypeDefaultDescription
asChild
boolean | undefined—
children
ReactNode—
defaultValue
string | (readonly string[] & string) | undefined—Optional default item value when it is initially rendered.
disablePointerSelection
boolean | undefined—Optionally set to `true` to disable selection via pointer events.
filter
CommandFilter | undefined—Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the `command-score` library.
label
string | undefined—Accessible label for this command menu. Not shown visibly.
loop
boolean | undefined—Optionally set to `true` to turn on looping around when using the arrow keys.
onValueChange
((value: string) => void) | undefined—Event handler called when the selected item of the menu changes.
shouldFilter
boolean | undefined—Optionally set to `false` to turn off the automatic filtering and sorting. If `false`, you must conditionally render valid items based on the search query yourself.
value
string | undefined—Optional controlled state of the selected command menu item.
vimBindings
boolean | undefined—Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
← All ComponentsGetting Started →