Skip to content
Command & Search

CommandPalette

client2 kB
/commandCommandPaletteProps

Preview

Props

9
PropTypeDefault

className

string

defaultOpened

boolean

hotkey

string | false

items

required
readonly CommandItem[]

labels

Partial<CommandPaletteLabels>

maxResults

number

onAction

((key: string) => void)

onOpenChange

((opened: boolean) => void)

opened

boolean

Slot props

11

Each one spreads over an inner element, so you can restyle a region without forking the component.

PropTypeDefault

bodyProps

Label and description column.

BoxSlotProps

descriptionProps

The description, when the command has one.

TextSlotProps

emptyProps

The no-results notice. It replaces the list, it is not added to it.

TextSlotProps

iconProps

Wrapper for the icon, when the command has one.

BoxSlotProps

inputProps

The search field. It spreads AFTER the aria combobox props.

Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">

inputRowProps

The search row: the magnifier and the field.

BoxSlotProps

labelProps

The command label.

TextSlotProps

listProps

The command list. It spreads AFTER the aria listbox props.

Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">

optionProps

Every row. It carries `data-focused` and `data-disabled`, and the aria option props already.

Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">

searchIconProps

The magnifier glyph of that row, which is not the icon of the command rows.

BoxSlotProps

shortcutProps

The shortcut, rendered with `Kbd`. Only when the command has a `shortcut`.

Omit<KbdProps, "children">