---
title: Command Palette with a Search Field
description: A search field in a page's header that opens the command palette and hands it what is typed, the keys typed while it opens included.
visibility: guest
draft: false
---

# Command Palette with a Search Field

A [command palette](/components/command-palette) opens on a shortcut, and a reader who does not know the shortcut looks for a search field. `<x-wirekit::command-palette.trigger>` is that field. A click on it, Enter or the Down arrow opens the palette, and so does typing: the palette opens with the text in its own field, the cursor after it.

## Usage

:::preview{title="A search field that opens the palette"}
<div x-data style="height: 28rem; contain: layout; position: relative; --wk-command-palette-offset-top: 4rem;">
<x-wirekit::command-palette name="header-search" named-only hotkey="" :teleport="false" :lock-scroll="false">
    <x-wirekit::command-palette.group heading="Documents">
        <x-wirekit::command-palette.item href="/invoices">Invoices</x-wirekit::command-palette.item>
        <x-wirekit::command-palette.item href="/contracts">Contracts</x-wirekit::command-palette.item>
        <x-wirekit::command-palette.item href="/delivery-notes">Delivery notes</x-wirekit::command-palette.item>
    </x-wirekit::command-palette.group>
</x-wirekit::command-palette>
<x-wirekit::center style="height: 100%">
<x-wirekit::command-palette.trigger for="header-search" shortcut="⌘K" style="max-width: 20rem;" />
</x-wirekit::center>
</div>
:::

:::source{language="blade"}
{{-- 1. The palette, named so that the field opens this one --}}
<x-wirekit::command-palette name="search">
    <x-wirekit::command-palette.group heading="Documents">
        <x-wirekit::command-palette.item href="/invoices">Invoices</x-wirekit::command-palette.item>
        <x-wirekit::command-palette.item href="/contracts">Contracts</x-wirekit::command-palette.item>
    </x-wirekit::command-palette.group>
</x-wirekit::command-palette>

{{-- 2. The field, in the page's header; the shortcut is shown, the palette binds it --}}
<x-wirekit::command-palette.trigger for="search" shortcut="⌘K" />
:::

## Typing Before the Palette Is There

The field keeps the focus until the palette takes it, and every key typed in that moment lands in the field. Each one is handed to the palette again, which takes the text for as long as its own field does not have the focus, so a word typed in one go arrives whole, at any speed. Once the palette's field has the focus, the reader types there.

Text an input method is still composing goes when the composition ends: moving the focus in the middle of it would end it half-way. When the palette closes, the focus comes back to the field, and the field is empty again.

## Naming the Palette

`for` names the palette to open, by its `name`. Without one the field opens every palette that answers an event without a name, which on a page with one palette is that one.

The shortcut is shown, not bound: `shortcut="⌘K"` puts a key hint at the end of the field, and the palette binds its own `hotkey`. Keep the two the same.

## Props

The props of `<x-wirekit::command-palette.trigger>` are listed with the palette's own, under [Props](/components/command-palette#props).

## Accessibility

- A search field with a visually hidden label, "Search commands" by default, so the field has a name although its placeholder disappears with the first key
- `aria-haspopup="dialog"`, so a screen reader says what pressing the field opens
- The shortcut hint is hidden from screen readers, which hear the palette's own field once it opens
- Enter and the Down arrow open the palette, and the Enter that confirms an input method's conversion is left to the input method