Search Input

Search field built on Input: leading icon, spring-in clear button, Esc to clear, and an optional focus shortcut ("/" or mod+k) with a Kbd hint.

npx @kznlabs/labsui add search-input

Jane Doe
Alex Kim
Sam Rivera
Priya Patel
Noah Chen
Mia Novak

"use client";import { useState } from "react";import { SearchInput } from "@/components/ui/search-input";export function MemberSearch({ members }: { members: string[] }) {  const [query, setQuery] = useState("");  const found = members.filter((m) =>    m.toLowerCase().includes(query.toLowerCase()),  );  return (    <>      <SearchInput        value={query}        onValueChange={setQuery}        shortcut="/"        label="Search members"        placeholder="Search members…"      />      <ul>        {found.map((m) => (          <li key={m}>{m}</li>        ))}      </ul>    </>  );}

<SearchInput>

Search field: icon, spring clear button, Esc clears, optional focus shortcut with a Kbd hint.

defaultValuedefault ""
string
Query at first render (uncontrolled).
labeldefault "Search"
string
Accessible name (default: "Search"). Skipped when you pass id for a <Label htmlFor>.
onValueChange
(value: string) => void
Called with the query on every change, and "" when cleared.
shortcut
string
Focuses the field from anywhere: a single key ("/") or "mod+f" (⌘ on Mac, Ctrl elsewhere). Steps aside while the field is hidden or already focused, so e.g. a second Ctrl+F still opens the browser's own find.
value
string
Controlled query; pair with onValueChange.
variantdefault "default"
"default" | "ghost"
"ghost": no border, ring or shadow; for inputs embedded in a surface (Command palette).

Prop	Type	Default
`defaultValue` Query at first render (uncontrolled).	`string`	`""`
`label` Accessible name (default: "Search"). Skipped when you pass `id` for a `<Label htmlFor>`.	`string`	`"Search"`
`onValueChange` Called with the query on every change, and "" when cleared.	`(value: string) => void`	—
`shortcut` Focuses the field from anywhere: a single key ("/") or "mod+f" (⌘ on Mac, Ctrl elsewhere). Steps aside while the field is hidden or already focused, so e.g. a second Ctrl+F still opens the browser's own find.	`string`	—
`value` Controlled query; pair with `onValueChange`.	`string`	—
`variant` "ghost": no border, ring or shadow; for inputs embedded in a surface (Command palette).	`"default" \| "ghost"`	`"default"`

Also accepts every <input> prop.

* required. Every component also takes className.