Components
Loading preview...
HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-search-fieldimport { Label } from "@heroui/react"
import { SearchField } from "@/components/ui/heroui-search-field"
export default function Default() {
return (
<SearchField name="search">
<Label>Search</Label>
<SearchField.Group>
<SearchField.SearchIcon />
<SearchField.Input className="w-[280px]" placeholder="Search..." />
<SearchField.ClearButton />
</SearchField.Group>
</SearchField>
)
}