Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Keyboard Shortcuts Displayed Combobox for React

A command combobox that shows Copy, Paste, Cut, Undo, and Redo with their shortcuts at the end of each row.

Every row ends with its keys: Copy, Paste, Cut, Undo, and Redo, including the redo chord. The keys sit at the end of the row. Picking a row selects the command.

Use it in a command menu so people learn the shortcut while they pick. The keys are a Kbd, not a working shortcut. In React, Base UI does not listen for those chords.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox items={commands}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select command..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search commands..." showTrigger={false} />
    <ComboboxEmpty>No command found.</ComboboxEmpty>
    <ComboboxList>
      {(command: Command) => (
        <ComboboxItem
          className="justify-between gap-2"
          key={command.value}
          value={command}
        >
          {command.label}
          <Kbd>{command.shortcut}</Kbd>
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

FAQ

How is the shortcut placed?

ComboboxItem gets justify-between gap-2, so the command name sits at the start and the Kbd at the end, before the check.

Where do the shortcuts come from?

Each command keeps its shortcut in the data as text, such as ⌘C.

Do the shortcuts work?

No, they're labels. The combobox doesn't listen for those keys. Register the shortcuts in your app if they should run the commands.

What about Windows and Linux?

The ⌘ symbol is for macOS. Show Ctrl+C and so on elsewhere, picking the text from the platform.

What does the button show?

The picked command, or Select command... before a pick.

API Reference

Combobox

Sets items={commands}, placeholder="Select command...", placeholder="Search commands...", showTrigger={false} and value={command}. The rest is on the Combobox page.

Button

Sets variant="outline". The rest is on the Button page.

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 42 combobox examples