# Search Input

- Page: <https://kznlabs.github.io/labsUI/components/search-input>

## Search Input (`search-input`, component)

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.

- Install: `npx @kznlabs/labsui add search-input`
- Docs: <https://kznlabs.github.io/labsUI/components/search-input>
- Brings: field, input, kbd, label, platform, use-controllable-state, use-hotkey, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<SearchInput>` (+ <input> props): Search field: icon, spring clear button, Esc clears, optional focus shortcut with a Kbd hint.
  - `defaultValue?: string` = `""`: Query at first render (uncontrolled).
  - `label?: string` = `"Search"`: 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`.
  - `variant?: "default" | "ghost"` = `"default"`: "ghost": no border, ring or shadow; for inputs embedded in a surface (Command palette).

### Usage

```tsx
<SearchInput value={q} onValueChange={setQ} shortcut="/" placeholder="Search…" />
```

### Example: member-search.tsx

```tsx
"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>
    </>
  );
}
```