Search Field [react-aria-components]

Component 15

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Search Field [react-aria-components] to your project and fits it to your theme.

Code

How Search Field [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}