Search

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

Usage

1import { Search } from "@raystack/apsara";

Search Props

Prop

Type

Examples

Size

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

1<Flex direction="column" gap="medium" align="center">
2  <Search placeholder="Large size search..." />
3  <Search size="small" placeholder="Small size search..." />
4</Flex>

Clear Button

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

1<Flex direction="column" gap="medium" align="center">
2  <Search
3    placeholder="Type to search..."
4    value="Searchable text"
5    showClearButton
6  />
7  <Search placeholder="Basic search..." />
8</Flex>

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:

1<Search
2  placeholder="Search items..."
3  showClearButton
4  value="Searchable text"
5  aria-label="Search items"
6/>

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