Command Bar
A command menu interface for quick actions and navigation.
In a dialog
The usual command bar: a search field over grouped pages and actions. Give
Dialog.Content an aria-label so the dialog has a name, and set inDialog on
Command.Root for the larger input and item sizing.
Inline
Command.Root also works without a dialog, for example as a searchable picker
inside a card. Pass label to name the list.
Command.Root Properties
Uses the larger input, item, and group spacing for a command bar inside a Dialog
Default: false
Accessible label for the command menu. Not shown visibly.
Controlled value of the highlighted item
Highlighted item value on first render
Callback fired when the highlighted item changes
Set to false to turn off built-in filtering and sorting, then render matching items yourself
Default: true
Custom match score from 0 (hidden) to 1 (best match)
Wraps arrow-key navigation from the last item to the first
Default: false
Additional CSS classes to apply to the root
Command.Input Properties
Controlled search text
Callback fired when the search text changes
Placeholder shown next to the search icon
Command.Item Properties
Callback fired when the item is chosen by click or Enter
Unique value for the item. Inferred from the text content when omitted.
Extra terms to match when filtering
Whether the command item is disabled
Default: false
Always renders the item, regardless of filtering
Default: false
Command.Group Properties
Heading rendered above the group's items
Unique value for the group. Required when there is no heading.
Always renders the group, regardless of filtering
Default: false
Other Parts
Scrollable container for groups, items, and separators. Caps at 300px tall.
Displayed when no search results are found
Line between groups. Hidden while searching unless alwaysRender is set.