SearchA search input component with built-in search icon and optional clear button.

The Search component provides a consistent search input experience with a built-in search icon and optional clear button functionality.

Installation

Install the component from your command line.

npm install @raystack/apsara

import { Search } from '@raystack/apsara/v1'

<Search 
  placeholder="Search items..."
  showClearButton
  value={searchValue}
  onChange={(e) => setSearchValue(e.target.value)}
  onClear={() => setSearchValue("")}
/>

Search Props

The Search component accepts the following props:

size: Size variant of the search input ("small" | "large", default: "large")
placeholder: Placeholder text for the input
disabled: Whether the search input is disabled
showClearButton: Shows a clear button when the input has a value
value: The controlled value of the input
onChange: Callback when input value changes
onClear: Callback when clear button is clicked
className: Additional CSS class names

Size

The Search component comes in two sizes to fit different design contexts.

States

The Search component supports various states to provide visual feedback.

Clear Button

The Search component can include a clear button that appears when there is input value.

Accessibility

The Search component is built with accessibility in mind, following ARIA best practices:

Container has role="search" to identify it as a search landmark
Input has type="search" for semantic HTML
Search icon is marked as decorative with aria-hidden="true"
Clear button has appropriate aria-label for screen readers
Keyboard navigation support for the clear button
Input inherits aria-label from placeholder text

Example with accessibility features:

The component supports keyboard navigation:

Tab to focus on the search input
Tab again to focus on the clear button (when visible)
Enter or Space to trigger the clear button