Command

A command is like a button with a twist, it opens a menu of options. It's a cooler version of a combobox, ideal for command palettes, menus, and more.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add command

Basic

Note that if your `Command.Item` has an Icon, you should wrap the label with `Command.Label` and pass the `textValue` prop so it can be filtered by search.

View

Code

Collection and Section

View

Code

Trigger by Keyboard

View

Code

Danger

View

Code

Controlled

Use it like a Menu or ListBox.

View

Code

{"selected":[1]}

Asycn Loading

View

Code

Action on Select

<Command.Item onAction={() => console.log('Hello World!')} />

Command

Installation

Basic

Note that if your Command.Item has an Icon, you should wrap the label with Command.Label and pass the textValue prop so it can be filtered by search.

Collection and Section

Trigger by Keyboard

Danger

Controlled

Asycn Loading

Action on Select

Note that if your `Command.Item` has an Icon, you should wrap the label with `Command.Label` and pass the `textValue` prop so it can be filtered by search.