# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/search.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.