ts
| Guidance | Practices |
|---|---|
| Do | Provide a searchSource with bootstrap results so users see useful options before typing. |
| Do | Use auxiliaryData.group on items to automatically organize results into labeled sections. |
| Don't | Use CommandPalette for simple dropdowns or menus — use XDSMenu or XDSSelector for inline selections. |
| Don't | Add too many groups or items — curate results to keep the palette fast and scannable. |
| Prop | Type | Description |
|---|---|---|
isOpenrequired | boolean | Whether the command palette dialog is visible. |
onOpenChangerequired | (isOpen: boolean) => void | Called when the palette visibility changes. |
searchSourcerequired | XDSSearchSource<T> | Search source providing items via search(query) and bootstrap(). Use createStaticSource for static lists. |
input | ReactNode (default: <XDSCommandPaletteInput />) | Input slot. Defaults to XDSCommandPaletteInput with standard behavior. |
footer | ReactNode (default: <XDSCommandPaletteFooter />) | Footer slot. Defaults to XDSCommandPaletteFooter showing keyboard hints. |
renderItem | (item: T, isSelected: boolean) => ReactNode | Per-item render function. Auto-grouping by auxiliaryData.group is preserved. When omitted, renders label text. |
emptySearchText | ReactNode (default: 'No results') | Content shown when a search query returns no results. |
emptyBootstrapText | ReactNode (default: 'Type to search') | Content shown when there is no search query and bootstrap() returns nothing. |
value | string | Controlled selected value for picker mode. |
onValueChange | (value: string) => void | Called when the selected value changes in picker mode. |
label | string (default: 'Command palette') | Accessible label for the command palette dialog. |
width | number | string (default: 640) | Width of the dialog. |
maxHeight | number | string (default: 480) | Maximum height of the dialog. |
isInline | boolean (default: false) | Renders command palette content inline without modal behavior. Automatically disables auto-focus on the input. For documentation previews and showcases only. |
| Prop | Type | Description |
|---|---|---|
childrenrequired | ReactNode | Message or content to display. |
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Custom footer content. When omitted, renders default keyboard hints via XDSKbd. |
xstyle | StyleXStyles | StyleX styles for layout customization. Must be a stylex.create() value. |
| Prop | Type | Description |
|---|---|---|
headingrequired | string | Group heading text. |
childrenrequired | ReactNode | XDSCommandPaletteItem children. |
xstyle | StyleXStyles | StyleX styles for layout customization. Must be a stylex.create() value. |
| Prop | Type | Description |
|---|---|---|
placeholder | string (default: 'Search...') | Placeholder text for the input. |
hasAutoFocus | boolean (default: true) | Auto-focus the input when mounted. Automatically disabled when inside an inline command palette. |
endContent | ReactNode | Content rendered at the trailing end of the input, after the spinner. Use for clear buttons or keyboard shortcut hints. |
value | string | Search value. When omitted inside XDSCommandPalette, reads from context. |
onValueChange | (value: string) => void | Called when search value changes. When omitted inside XDSCommandPalette, writes to context. |
xstyle | StyleXStyles | StyleX styles for layout customization. Must be a stylex.create() value. |
| Prop | Type | Description |
|---|---|---|
valuerequired | string | Unique value for identification and selection. |
childrenrequired | ReactNode | Item content — render icons, descriptions, keyboard shortcuts, etc. |
onSelect | (value: string) => void | Called when this item is selected via click or Enter. |
isHighlighted | boolean (default: false) | Whether this item has keyboard focus. Derived from context when inside XDSCommandPalette. |
isSelected | boolean (default: false) | Whether this item is selected in picker mode. |
isDisabled | boolean (default: false) | Whether the item is non-interactive. |
xstyle | StyleXStyles | StyleX styles for layout customization. Must be a stylex.create() value. |
| Prop | Type | Description |
|---|---|---|
childrenrequired | ReactNode | Items, groups, and empty states. |
label | string (default: 'Commands') | Accessible label for the listbox. |
xstyle | StyleXStyles | StyleX styles for layout customization. Must be a stylex.create() value. |