Dialogsibling
Compose inside Dialog for modal command paletteCommand
A searchable command palette for quick actions. Combines an input with a filterable, keyboard-navigable list of actions.
Setup
import { Command } from '@fragments-sdk/ui';Examples
Default
Inline command list with search
Loading preview...
Dialog Command Palette
Command palette inside a Dialog
Loading preview...
With Groups
Organized by category groups
Loading preview...
With Icons
Items with leading icons
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Command.Input, Command.List, and other sub-components |
search | string | Not set | Controlled search value |
defaultSearch | string | | Default search value (uncontrolled) |
onSearchChange | function | Not set | Called when search input changes |
filter | function | Not set | Custom filter function. Return 0 to hide, >0 to show. |
loop | boolean | true | Whether to loop keyboard navigation |
Usage Guidelines
When to use
- Quick-access command palettes (Ctrl+K)
- Searchable action menus
- Inline command lists with filtering
- Application-wide search interfaces
When not to use
- Simple dropdown menus (use Menu)
- Form field selection (use Select or Combobox)
- Static navigation (use Sidebar or Tabs)
- Search with complex result types (build custom)
Best practices
- Compose inside Dialog for modal command palette usage
- Use Command.Group to organize items by category
- Provide Command.Empty for no-results feedback
- Use keywords prop for items that should match on aliases
- Keep item labels short and action-oriented
Accessibility
- Uses combobox + listbox ARIA pattern
- Keyboard navigation with ArrowUp/ArrowDown, Enter to select
- Home/End jump to first/last item
- aria-activedescendant tracks focused item