Search Input

A text input purpose-built for search, with shortcut hint.

Default

⌘K

<div class="relative">
  <SearchIcon class="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
  <Input type="search" placeholder="Search docs…" className="pl-9 pr-14" />
  <kbd class="absolute right-3 top-1/2 -translate-y-1/2">⌘K</kbd>
</div>

States

{/* disabled */}
<Input type="search" placeholder="Search docs…" disabled className="pl-9" />

{/* loading — swap the magnifier for a spinner */}
<Loader2Icon class="absolute left-3 top-1/2 -translate-y-1/2 animate-spin" />
<Input type="search" value="mrkdwn" readonly className="pl-9" />

With Cmdk — geist wires this input into a cmdk command menu so typing filters a live results list. The Combobox page ships that exact pattern: its <CommandInput> is a search field backed by cmdk, auto-highlighting the first match as you type. Drop the same <Command> below this field to turn it into a full search palette.

Markdown for agents: /design/search-input.md · spec: /design.md