Components
Loading preview...
A search field allows a user to enter and clear a search query. Search fields can be built with <input type="search">, but these can be hard to style consistently cross browser. SearchField helps achieve accessible search fields that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/searchfieldimport { SearchIcon, XIcon } from "lucide-react"
import { FieldGroup, Label } from "@/components/ui/field"
import {
SearchField,
SearchFieldClear,
SearchFieldInput,
} from "@/components/ui/searchfield"
export function SearchFieldDemo() {
return (
<SearchField className="max-w-[200px]">
<Label>Search</Label>
<FieldGroup>
<SearchIcon aria-hidden className="size-4 text-muted-foreground" />
<SearchFieldInput placeholder="Search..." />
<SearchFieldClear>
<XIcon aria-hidden className="size-4" />
</SearchFieldClear>
</FieldGroup>
</SearchField>
)
}