> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/search.md).

# Search

The `Search` component is a search input field that executes a callback on change and submit. The callback can be throttled to control its execution frequency.

## Preview

<div align="left"><figure><img src="/files/p4NJNALldFE94obMSaPd" alt="Gravity search component" width="375"><figcaption></figcaption></figure></div>

## Usage

```javascript
import { Search } from 'components/lib';

function MyComponent({...props }){

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

  return (
    <div>
      <Search callback={ handleSearch } throttle={ 300 } placeholder='Search users...' />
    </div>
  );
}
```

### Props

| Prop        | Description                                    | Required | Value                    |
| ----------- | ---------------------------------------------- | -------- | ------------------------ |
| callback    | executed on change and submit                  | required | function                 |
| className   | custom style                                   | optional | SCSS or Tailwind         |
| placeholder | placeholder text                               | optional | string (default: Search) |
| throttle    | throttle the callback function execution in ms | optional | integer                  |

### Notes

* The `Search` component uses the `Input` component from `'components/lib'` for the search input field.
* The `callback` prop specifies the function to be executed on change and submit.
* The `throttle` prop controls the frequency of callback execution in milliseconds.
* The `placeholder` prop provides the placeholder text for the search input and defaults to 'Search'.
* The `value` prop represents the current value of the search input.
* The `className` prop allows for custom styling to be applied.
* The `debounce` function is used to throttle the callback execution.