Compound Components

Compound Components

Component Tree

<Command>                    ← Root (creates state machine context)
  <Command.Input />          ← Search input (role="combobox")
  <Command.List>             ← Scrollable list (role="listbox")
    <Command.Empty />        ← No results (role="status")
    <Command.Loading />      ← Async loading indicator
    <Command.Group>          ← Logical group (role="group")
      <Command.Item>         ← Selectable option (role="option")
        <Command.Highlight/> ← Fuzzy match highlighting
        <Command.Badge />    ← Status badge
        <Command.Shortcut /> ← Keyboard shortcut display
      </Command.Item>
    </Command.Group>
    <Command.Separator />    ← Visual divider
  </Command.List>
</Command>

<Command.Dialog>             ← Radix Dialog wrapper
  {/* Same children as above */}
</Command.Dialog>

<Command.Page>               ← Nested page navigation
</Command.Page>

<Command.AsyncItems />       ← Suspense-powered async data

Command (Root)

Prop	Type	Default	Description
label	string	—	Accessible label (required)
filter	boolean | FilterFn	true	Enable/disable filtering or custom filter
loop	boolean	false	Wrap around on arrow key navigation
frecency	FrecencyOptions	—	Enable frecency ranking
onValueChange	(value: string) => void	—	Search value change callback

Command.Input

Prop	Type	Default	Description
placeholder	string	—	Placeholder text
value	string	—	Controlled value
onValueChange	(value: string) => void	—	Value change callback

Command.Item

Prop	Type	Default	Description
value	string	—	Search value (required)
onSelect	() => void	—	Selection callback
keywords	string[]	—	Additional searchable terms
shortcut	string	—	Keyboard shortcut string
disabled	boolean	false	Disable the item
forceId	string	—	Override auto-generated ID

Command.List

Prop	Type	Default	Description
virtualize	boolean	true	Enable auto-virtualization
estimateSize	number	44	Estimated item height (px)
overscan	number	8	Items to render outside viewport

Command.Dialog

Prop	Type	Default	Description
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Open state callback
overlayClassName	string	—	Overlay CSS class
contentClassName	string	—	Content container CSS class

Command.Group

Prop	Type	Default	Description
heading	ReactNode	—	Group heading content
forceId	string	—	Override auto-generated ID