Docs

Search

Input field designed for search queries.

Installation

import { Search } from "@/components/ui/search";

const [value, setValue] = useState("");
 
<Search
  label="Search"
  value={value}
  onSearch={setValue}
  placeholder="Search products..."
/>;

Prop	Type	Default	Description
`label`	`ReactNode`	`-`	Label displayed above the search input
`caption`	`ReactNode`	`-`	Caption displayed below the search input
`value`	`string`	`""`	Current value of the search input
`onSearch`	`(value: string) => void`	`-`	Callback when search value changes
`fullWidth`	`boolean`	`false`	Whether the search should take up full width
`className`	`string`	`-`	The class name to apply to the component
`inputClassName`	`string`	`-`	Class name applied to the input element
`clearClassName`	`string`	`-`	Class name applied to the clear button
`searchClassName`	`string`	`-`	Class name applied to the search icon wrapper
`placeholder`	`string`	`"Search..."`	Placeholder text when no input is present
`placeholderSuggestions`	`string[]`	`[]`	Suggestions that cycle through the placeholder
`typingSpeed`	`number`	`150`	Speed of typing animation in ms
`deletingSpeed`	`number`	`100`	Speed of deleting animation in ms

Contribute