Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/search-input.json
Usage
import { SearchInput } from "@/components/ui/search-input";<SearchInput
label="Search Packages"
options={["react", "vue", "svelte", "angular", "solid"]}
placeholder="Search..."
onSelect={(item) => console.log("Selected:", item)}
/>API Reference
SearchInput
| Prop | Type | Default |
|---|---|---|
options | T[] | undefined |
getValue | (item: T) => string | undefined |
value | string | undefined |
onChange | (query: string) => void | undefined |
onSelect | (item: T) => void | undefined |
placeholder | string | "Search..." |
label | string | undefined |
maxResults | number | 5 |
id | string | undefined |
borderStyle | "single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic" | "round" |
paddingX | number | 1 |
cursor | string | "█" |
searchIcon | string | "🔍 " |
resultCursor | string | "› " |