Skip to content

Command Palette

@astryxdesign/core v0.7.1 · CommandPalette

Props ​

NameTypeDefaultDescription
isOpenboolean-Whether the palette is open.
searchSourceSearchSource-Where commands come from. An empty query calls bootstrap.
isInlinebooleanfalseRender in the page flow instead of a modal dialog.
labelstringCommand paletteAccessible name of the dialog.
widthnumber | string640Width of the dialog. Numbers are pixels.
maxHeightnumber | string480Maximum height of the dialog. Numbers are pixels.
emptySearchTextstringNo resultsShown when a query returns nothing.
emptyBootstrapTextstringType to searchShown before the source has anything to list.
valuestring-Selected id in picker mode. Bind with v-model:value.

Events ​

NamePayloadDescription
openChangebooleanThe next open state. Escape and a selection both close the palette.
update:valuestringThe id of the row that was selected.
valueChangestringThe same selection under the original callback name, for code ported from React.

Slots ​

NamePropsDescription
input-Replaces CommandPaletteInput.
item{ item, isSelected }Row content. isSelected is the picker match, not the keyboard highlight.
footer-Replaces the default hint row. Put a CommandPaletteFooter here when the replacement should keep the footer chrome.

CommandPaletteInput ​

NameTypeDefaultDescription
placeholderstringSearch…Placeholder and the fallback accessible name.
labelstring-Accessible name of the combobox. Falls back to placeholder.
hasAutoFocusbooleantrueFocus the field when the palette opens. Inline palettes skip this.
valuestring-Search value, bound with v-model:value. Read from the surrounding CommandPalette when omitted.
NameDescription
valueChangeNext search value. Fired only while value is bound; otherwise the input writes to the palette.

The endContent slot (also available as end) is trailing content after the spinner.

CommandPaletteList ​

label names the listbox. The default is Commands.

CommandPaletteGroup ​

heading is the visible group label and the group's accessible name.

CommandPaletteItem ​

value is the command id. isDisabled blocks selection. isHighlighted and isSelected override the state the row reads from the palette, which is what standalone previews need. select fires with the value when the row is activated by pointer. The default slot is the row content.

CommandPaletteEmpty ​

The default slot is the empty message.

CommandPaletteFooter ​

The default slot replaces the Navigate, Select, and Close hints. The footer chrome stays.