XDSCommandPaletteInput@xds/core · CommandPalette
Usage
CommandPalette is a searchable dialog for quick access to commands, navigation, and actions. Use it as a keyboard-driven launcher powered by XDSSearchSource for filtering and selection.Best practices
| 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. |
Import
ts
Props
| Prop | Type | Description |
|---|---|---|
placeholder | string (default: 'Search...') | Placeholder text for the input. |
hasAutoFocus | boolean (default: true) | Auto-focus the input when mounted. |
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. |