shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Custom Actions
Keyboard Shortcuts Displayed Combobox for React
A combobox of editing commands with each one's keyboard shortcut at the end of the row.
A command picker where every row shows its shortcut: Copy ⌘C, Paste ⌘V, Cut ⌘X, Undo ⌘Z and Redo ⌘⇧Z. The shortcut sits at the end of the row in a Kbd. Use it for command menus, so people learn the shortcut while they pick.
Preview
Installation
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.
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.
Can I search by shortcut?
No, the search matches the command names. The search box says Search commands..., and No command found. shows when nothing matches.
Related
- Simple Single Select ComboboxA single-select combobox that opens from
- Simple Command DialogA button that opens a command dialog with
- With Footer Actions ComboboxA workspace combobox with a Manage
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Create New Option Inline ComboboxA combobox that offers to create the
- Simple Context MenuA right-click area that opens Back