# Command Palette Input

## Usage

Use `CommandPaletteInput` inside `CommandPalette` for a popup-backed command query, or as an independent search field when no result popup is present.

```ts
import { CommandPaletteInput } from '@astryx-vue/core/CommandPalette'
```

### Anatomy

- **Input**: The surrounding inline layout for the search glyph, query field, and trailing content.
- **Search glyph**: A decorative search icon before the query field.
- **Query field**: The native text field. It is a searchbox when standalone without popup attributes and a combobox when popup relationships are supplied or CommandPalette context is present.
- **Loading spinner**: A delayed pending indicator shown before trailing content while search is busy.
- **Trailing content**: Caller-provided supporting content such as a clear control or shortcut hint.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Pass a concise `label` that identifies what can be searched when "Search commands" does not describe it; the placeholder is never the field's name. |
| Do | Use `endContent` for short supporting controls or shortcut hints at the trailing edge. |
| Don't | Override combobox role or popup state. `CommandPaletteInput` owns those semantics when connected to `CommandPalette`. |

## Examples

Common configurations, variations, and states.

### With End Content

Custom placeholder and a keyboard shortcut badge in the trailing slot via endContent.

```vue
<script setup lang="ts">
import { createStaticSource } from '@astryx-vue/core'
import { CommandPalette, CommandPaletteInput } from '@astryx-vue/core/CommandPalette'
import { Kbd } from '@astryx-vue/core/Kbd'

const source = createStaticSource([
  { id: 'home', label: 'Home' },
  { id: 'settings', label: 'Settings' },
  { id: 'profile', label: 'Profile' },
  { id: 'help', label: 'Help' },
])
</script>

<template>
  <CommandPalette is-inline is-open :search-source="source">
    <template #input>
      <CommandPaletteInput placeholder="Search commands, files, or actions...">
        <template #endContent>
          <Kbd keys="mod+k" />
        </template>
      </CommandPaletteInput>
    </template>
  </CommandPalette>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | `Search…` | Grey placeholder in the field. |
| `label` | `string` | Localized "Search commands" | Accessible name of the field. Defaults to a localized "Search commands" (not the placeholder); pass it when the palette searches something else. |
| `hasAutoFocus` | `boolean` | `true` | Focus the field when it mounts. A palette that renders inline skips this, so opening a docs preview does not steal focus. |
| `value` | `string` | — | Search text. Bind with `v-model:value`. When omitted, the field reads and writes the search text of the surrounding `CommandPalette`. |

## Events

- `update:value(value: string)`: the next search text. Fired only while `value` is bound.
- `valueChange(value: string)`: the same value under the original callback name, for code ported from React.

## Slots

- `end`: content after the field, such as a clear button or a `Kbd` shortcut hint. The spinner sits in front of it.
- `endContent`: the same slot under the original name. `end` wins when both are passed.