SearchInput
Search input with icon and clear button
Preview
Usage
import { SearchInput } from "@/components/ui/search-input"
import { useState } from "react"
function SearchDemo() {
const [query, setQuery] = useState("")
return (
<SearchInput
value={query}
onChange={setQuery}
placeholder="Search documents..."
/>
)
}Renders a search icon on the left and an "x" clear button on the right when the input has a value. The onChange callback receives the string value directly, not a change event.
Install
npx shadcn add @bonsai/search-input