Skip to main content

SearchField()

SearchField(__namedParameters): Element

SearchField - A customizable search input component built on React Aria Components

Provides a search input with integrated search icon, loading state, and clear functionality. Supports two visual variants (filled/outlined), and granular styling control.

Parameters​

__namedParameters​

SearchFieldProps

Returns​

Element

Examples​

// Basic search field
<SearchField placeholder="Search..." />
// Filled variant with custom styling
<SearchField
  variant="filled"
  placeholder="Search products"
  classNames={{
    input: "bg-info-bold",
    searchIcon: "fg-accent-primary-bold"
  }}
/>
// With event handlers
<SearchField
  placeholder="Type to search"
  onSubmit={(value) => console.log('Search:', value)}
  onChange={(value) => setQuery(value)}
/>