Discovery

Search Bar

A controlled search input with a leading icon, a clear button, and an optional loading spinner. Submit on Enter for query-on-submit search.

input

accessible

Preview

Installation

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add search-bar

Usage

Import

import { SearchBar } from "@/components/lumo/search-bar"

Example

const [query, setQuery] = useState("")

<SearchBar
  value={query}
  onValueChange={setQuery}
  onSubmit={(q) => router.push(`/search?q=${q}`)}
  placeholder="Search products"
/>

Props

Prop	Type	Default	Required
value	string	-	Required
onValueChange	(value: string) => void	-	Required
onSubmit	(value: string) => void	-
placeholder	string	"Search"
loading	boolean	-
size	"sm" \| "md"	"md"

All props accept standard HTML attributes unless otherwise specified.

Dependencies

npm packages

lucide-react

Own every line

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.

View on GitHub Read the docs