Source: https://tailwindcss.com/plus/ui-blocks/documentation/command-palette

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Getting started

  • Getting set up

  • Using HTML

  • Using React

  • Using Vue

  • Assets

• Elements

  • Introduction

  • Autocomplete

  • Command palette

  • Dialog

  • Disclosure

  • Dropdown menu

  • Popover

  • Select

  • Tabs

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. |

Examples

Basic example

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Opening and closing

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Using with buttons

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Using with links

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Showing option previews

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Showing default commands

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Handling no results

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Grouping related commands

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Customizing the filter logic

To view the complete documentation, you must own a Tailwind Plus license and be signed in .