Command
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Command } from "@corew500/ui/command"
<Command>Content</Command>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | enum | — | — |
| label | string | — | Accessible label for this command menu. Not shown visibly. |
| shouldFilter | enum | — | 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. |
| filter | CommandFilter | — | 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. |
| value | string | — | Optional controlled state of the selected command menu item. |
| onValueChange | (value: string) => void | — | Event handler called when the selected item of the menu changes. |
| loop | enum | — | Optionally set to `true` to turn on looping around when using the arrow keys. |
| disablePointerSelection | enum | — | Optionally set to `true` to disable selection via pointer events. |
| vimBindings | enum | — | Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`. |
Accessibility
Keyboard Navigation
- - Fully keyboard navigable (Arrow keys, Enter, Escape).
- CommandShortcut displays keyboard hints.
Focus Management
- Focus is trapped within the command when in dialog mode.
Screen Readers
- Screen reader announces filtered results count.
Localization
Translatable Content
- - All text (placeholder, headings, items) should be translated.
Additional
- CommandEmpty message should be localized.