SearchBar

A pill-shaped text input with a leading search icon and a trailing clear button that appears when the input has a value. Changes are debounced before firing onChange. Pressing Enter triggers onEnterPress immediately. The input can be programmatically cleared by incrementing the clearTrigger prop.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onChange | (value: string) => void | No | — | Fired after the debounce delay whenever the input value changes. Also fires immediately on clear. | | onEnterPress | (value: string) => void | No | — | Fired when the user presses Enter. | | placeholder | string | No | 'Search...' | Placeholder text for the input. | | debounceTime | number | No | 300 | Milliseconds to wait after the last keystroke before firing onChange. | | clearTrigger | number | No | — | Incrementing this value resets the input to an empty string. | | searchIcon | string | No | 'search' | Icon name for the leading search icon. | | searchIconColor | string | No | theme text | Color of the search icon. | | searchIconSize | number | No | — | Size of the search icon in pixels. | | clearIcon | string | No | 'close' | Icon name for the clear button. | | clearIconColor | string | No | theme text | Color of the clear icon. | | clearIconSize | number | No | — | Size of the clear icon in pixels. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer container. | | inputStyle | React.CSSProperties | No | — | Inline styles for the text input. |

Usage

Basic debounced search

import SearchBar from '@/components/SearchBar';

export default function Example() {
  return (
    <SearchBar
      placeholder="Search products..."
      onChange={(value) => console.log('Search:', value)}
    />
  );
}

Enter to search with programmatic clear

import { useState } from 'react';
import SearchBar from '@/components/SearchBar';

export default function Example() {
  const [clearTrigger, setClearTrigger] = useState(0);

  const handleSearch = (value: string) => {
    console.log('Searching for:', value);
  };

  const handleReset = () => {
    setClearTrigger((prev) => prev + 1);
  };

  return (
    <>
      <SearchBar
        onEnterPress={handleSearch}
        clearTrigger={clearTrigger}
        debounceTime={500}
      />
      <button onClick={handleReset}>Reset</button>
    </>
  );
}