> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/search.md).

# Search

Search is a wrapper over TextInput but with some useful features for finding the information. When the value is empty Search shows placeholder in the center of the control. When the value is not empty, Search shows "Clear" button in the right corner. 

Search used debounced value with 500 ms latency. 

```tsx
import { Search } from 'altrone-ui';

const [value, setValue] = useState('');

return <Search
  value={value}
  onChange={setValue}
  useLiveSuggestions
/> 
```

## Search suggestions

In TextInput suggestions prop is just an array of strings. But in Search it works in different way. This is a function which takes the query string and returns an array of strings. This array will be used as suggestions for user.&#x20;

```tsx
const searchSuggestions = useCallback(async (query: string) => {
  const response = await fetch(...);
  return await response.json();
}, []);

<Search 
  ...
  suggestions={searchSuggestions}
/>
```

## Properties

| Property                                              | Type                                                | Description                                                                                            |
| ----------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| **`value`**<mark style="color:red;">**`*`**</mark>    | `string`                                            | Inputed value                                                                                          |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | `(value: string) => void`                           | Callback is called when user changed the value in the text field                                       |
| **`placeholder`**                                     | `string`                                            | Placeholder of the input                                                                               |
| **`errorText`**                                       | `string`                                            | Error message for Search                                                                               |
| **`hintText`**                                        | `string`                                            | Hint message for Search                                                                                |
| **`size`**                                            | [`Size`](/altrone-ui/utils/enums/size.md)           | Size of the text input                                                                                 |
| **`disabled`**                                        | `boolean`                                           | Marks input as disabled                                                                                |
| **`required`**                                        | `boolean`                                           | Marks input as required                                                                                |
| **`Component`**                                       | `JSX.Element`                                       | Custom html input element                                                                              |
| **`suggestions`**                                     | `(searchValue: string) => Promise<string[]>`        | List of suggestions for inputed value.                                                                 |
| **`useLiveSuggestions`**                              | `boolean`                                           | If true the first matching suggestion will be displayed directly in the input field                    |
| **`loading`**                                         | `boolean`                                           | If true [Loading](/altrone-ui/components/indicators/loading.md) component will be used as right island |
| **`surface`**                                         | [`Surface`](/altrone-ui/utils/enums/surface.md)     | Surface of the input                                                                                   |
| **`elevation`**                                       | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Shadows of the input                                                                                   |
| **`classNames`**                                      | `{ control?: string }`                              | Custom CSS class                                                                                       |

## History

* **`Altrone 2.0`**: initial release