Command
A searchable command palette, with groups and a ⌘K dialog variant.
- Navigation
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add commandNo npm packages are needed beyond what Dowel already requires.
import { Command } from "@/components/ui/command";Default
Filtering
Palette
Empty
<Command>
| Prop | Type | Default |
|---|---|---|
filterOverrides how a search string is matched against an item. | (search: string, haystack: string[]) => boolean | defaultCommandFilter |
onValueChange | (search: string) => void | — |
valueControls the search text. | string | — |
Plus every attribute of <div> except onSelect.
<CommandInput>
Plus every attribute of <input> except value, onChange.
<CommandList>
Plus every attribute of <div>.
<CommandEmpty>
Plus every attribute of <div>.
<CommandGroup>
| Prop | Type | Default |
|---|---|---|
heading | ReactNode | — |
Plus every attribute of <div>.
<CommandItem>
| Prop | Type | Default |
|---|---|---|
value (required)Identifies the item, and is the primary search term. | string | — |
disabled | boolean | — |
keywordsExtra search terms that are not shown. | string[] | — |
onSelect | (value: string) => void | — |
children | ReactNode | — |
Plus every attribute of <div> except onSelect, children.
<CommandSeparator>
Plus every attribute of <div>.
<CommandShortcut>
Plus every attribute of <span>.
<CommandDialog>
| Prop | Type | Default |
|---|---|---|
description | string | "Search for a command to run." |
titleNames the dialog for assistive technology. Visually hidden by default. | string | "Command palette" |
className | string | — |
The input owns role="combobox" and the list role="listbox"; focus stays in the input while arrow keys move aria-activedescendant, so typing is never interrupted. Enter runs the active item through the same path as a click. A group whose items are all filtered out hides its heading rather than labelling nothing. CommandDialog always renders a title and description, visually hidden, so the dialog is never unnamed.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes