Components
Search Field [react-aria-components]
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.
import { 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>
)
}
Dependencies
Source
Published
Similar components
Explore more
Part of Jolly UI — browse the full library on 21st.dev.