5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Command palette

A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.

The <el-command-palette> component provides a fast, keyboard-friendly way for users to search and select from a predefined list of options. It's typically displayed inside a dialog — often triggered with a Cmd+K shortcut — making it ideal for building power-user features like global searches.

Component API

<el-command-palette>

The main command component that manages filtering and coordinates with its child components

Attributes
`name`	The form field name for the command when used in forms.
`value`	The selected value of the command. Can be read and set programmatically.
Events
`change`	Dispatched when the active item changes. Detail contains `relatedTarget` property with the active item or `null`.
Methods
`setFilterCallback(cb)`	Allows you to customize the filtering behavior of the command. The callback receives an object with `query`, `node` and `content` properties, and should return a `boolean`.
`reset()`	Resets the command to its initial state.

<el-command-list>

Contains all the command items and groups. All focusable children will be considered options.

<el-defaults>

Optional container for suggestion items that are shown when the input is empty.

<el-command-group>

Groups related command items together.

<el-no-results>

Optional element shown when no items match the current query.

<el-command-preview>

Optional preview content shown when a specific item is active.

Attributes
`for`	The `id` of the item this preview content is associated with.