Search

Usage

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

import { Search } from "@raystack/apsara/v1";
 
<Search
  placeholder="Search items..."
  showClearButton
  value={searchValue}
  onChange={e => setSearchValue(e.target.value)}
  onClear={() => setSearchValue("")}
/>;

Search Props

Prop	Type	Default
`size`	`"small" \| "large"`	`large`
`placeholder`	`string`	-
`disabled`	`boolean`	-
`showClearButton`	`boolean`	-
`value`	`string`	-
`onChange`	`(value: string) => void`	-
`onClear`	`() => void`	-
`className`	`string`	-

Examples

Size

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

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

Clear Button

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

<Flex direction="column" gap="medium" align="center">
  <Search
    placeholder="Type to search..."
    value="Searchable text"
    showClearButton
  />
  <Search placeholder="Basic search..." />
</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:

<Search
  placeholder="Search items..."
  showClearButton
  value="Searchable text"
  aria-label="Search items"
/>

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