---
url: "https://vueda.dev/v3/reference/theming/keys/CommandInput.md"
title: "CommandInput"
---

# CommandInput

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The free-text search field at the top of a [Command.root](/v3/reference/theming/keys/Command.md#theme-key-Command-root). Renders chrome-free at `--vueda-cmd-input-height` so the surrounding [CommandInput.wrapper](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-wrapper) owns the row's geometry and the lower hairline; the input itself just contributes placeholder, focus-clear, and the disabled treatment.

Vue component: [CommandInput](/v3/reference/api/vue/CommandInput.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-root) | 2 classes | The free-text search field at the top of a [Command.root](/v3/reference/theming/keys/Command.md#theme-key-Command-root). Renders chrome-free at `--vueda-cmd-input-height` so the surrounding [CommandInput.wrapper](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-wrapper) owns the row's geometry and the lower hairline; the input itself just contributes placeholder, focus-clear, and the disabled treatment. |
| [wrapper](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-wrapper) | `flex h-[var(--vueda-cmd-input-height)] items-center gap-2 border-b-hairline px-3` | The row that wraps [CommandInput.root](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-root) together with the leading search icon, sized to `--vueda-cmd-input-height` and capped by a bottom hairline (`border-b`) so the input separates cleanly from the [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root) below. The wrapper, not the input, owns the divider so the seam stays continuous even when the input is empty or focused. |

<a id="theme-key-CommandInput-root"></a>

## root

> The free-text search field at the top of a [Command.root](/v3/reference/theming/keys/Command.md#theme-key-Command-root). Renders chrome-free at `--vueda-cmd-input-height` so the surrounding [CommandInput.wrapper](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-wrapper) owns the row's geometry and the lower hairline; the input itself just contributes placeholder, focus-clear, and the disabled treatment.

Default classes:

```text
placeholder:text-muted-foreground flex h-[var(--vueda-cmd-input-height)] w-full rounded-vueda-control bg-transparent py-3 text-sm outline-hidden
disabled:cursor-not-allowed disabled:text-disabled-foreground
```

Source: `client/lib/theme/vueda-tailwind/controls/CommandInput.theme.js:17`

<a id="theme-key-CommandInput-wrapper"></a>

## wrapper

> The row that wraps [CommandInput.root](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-root) together with the leading search icon, sized to `--vueda-cmd-input-height` and capped by a bottom hairline (`border-b`) so the input separates cleanly from the [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root) below. The wrapper, not the input, owns the divider so the seam stays continuous even when the input is empty or focused.

Default classes:

`flex h-[var(--vueda-cmd-input-height)] items-center gap-2 border-b-hairline px-3`

Source: `client/lib/theme/vueda-tailwind/controls/CommandInput.theme.js:27`