CommandInput
Source: client/lib/theme/vueda-tailwind/controls/index.js
The free-text search field at the top of a Command.root. Renders chrome-free at
--vueda-cmd-input-heightso the surrounding 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
| Slot | Default classes | Description |
|---|---|---|
| root | 2 classes | The free-text search field at the top of a Command.root. Renders chrome-free at --vueda-cmd-input-height so the surrounding CommandInput.wrapper owns the row's geometry and the lower hairline; the input itself just contributes placeholder, focus-clear, and the disabled treatment. |
| wrapper | flex h-[var(--vueda-cmd-input-height)] items-center gap-2 border-b-hairline px-3 | The row that wraps 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 below. The wrapper, not the input, owns the divider so the seam stays continuous even when the input is empty or focused. |
root
The free-text search field at the top of a Command.root. Renders chrome-free at
--vueda-cmd-input-heightso the surrounding 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:
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:opacity-50Source: client/lib/theme/vueda-tailwind/controls/CommandInput.theme.js:17
wrapper
The row that wraps CommandInput.root together with the leading search icon, sized to
--vueda-cmd-input-heightand capped by a bottom hairline (border-b) so the input separates cleanly from the 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