Command holds a search input and a role="listbox" of groups and items. search is a two-way model with the query. Each mui-command-item has a value, and choosing one emits itemActivated.
Use CommandEmpty for the message shown when nothing matches. shortcut shows the keys for an item.
When to use
A command palette that opens with Cmd+K and lists actions and pages.
A large set of commands that users search by name.
When not to use
Picking a value for a form field. Use a combobox. Use Combobox instead.
A short menu of actions for one item. Use a dropdown menu. Use Dropdown menu instead.
Guidelines
Do
Group items by type, such as "Pages" and "Actions".
Show a shortcut next to commands that have one.
Don't
Do not put every setting in the palette. Keep the common ones.
Accessibility
Roles and attributes
Element
Role
Notes
list
listbox
Named "Results" by default. Options are role="option" with aria-selected on the highlighted one.
group
group
Named by label.
empty message
—
aria-live="polite", so it is announced when no item matches.
Keyboard
Keys
Action
Type
Filters the items.
ArrowDownArrowUp
Move the highlight through the items.
Enter
Runs the highlighted item.
Put focus in the search input when the palette opens, so typing works at once.
API
Command
Selector: mui-command
Name
Type
Default
Description
placeholder
string
'Search…'
Placeholder for the built-in CommandInput (if used without a custom input).
Name
Type
Default
Description
search
string
''
The current search string — two-way bindable.
Name
Type
Description
itemActivated
{ value: string; label: string; }
Emits the `value` and `label` of the item the user runs.
CSS parts
::part(container)
::part(root)
CommandInput
Selector: mui-command-input
Name
Type
Default
Description
placeholder
string
'Search…'
Hint text shown while the search is empty. Default `Search…`.
CSS parts
::part(input)
::part(input-root)
::part(input-wrapper)
CommandList
Selector: mui-command-list
Name
Type
Default
Description
label
string
'Results'
Accessible name of the listbox (#726).
CSS parts
::part(list)
CommandGroup
Selector: mui-command-group
Name
Type
Default
Description
label
string | undefined
—
Heading for the group. Also its accessible name.
CSS parts
::part(group)
::part(group-label)
CommandItem
Selector: mui-command-item
Name
Type
Default
Description
valuerequired
string
—
The searchable value for this item. Filters against ctx.search().
disabled
boolean
false
Disables the item. It cannot be highlighted or run. Accepts attribute presence, e.g. <… disabled>.
selected
boolean
false
Marks the item as highlighted. Set by the keyboard handling. Accepts attribute presence, e.g. <… selected>.
shortcut
string | undefined
—
Keyboard shortcut shown on the right, for display only.
Mushilu-San UI