# SearchBox

A searchbox component

## Installation

```tsx
import { SearchBox } from 'uxp/components';
```

## Signature

```tsx
const SearchBox: React.ForwardRefExoticComponent<React.RefAttributes<ISearchBoxInstanceProps> & ISearchBoxProps>
```

## Properties

| Name        | Type                                                                                | Mandatory | Default Value | Example Value |
| ----------- | ----------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| value       | string                                                                              | Yes       | -             | -             |
| onChange    | (newValue: string) => void                                                          | Yes       | -             | -             |
| className   | string                                                                              | No        | -             | -             |
| collapsed   | boolean                                                                             | No        | -             | -             |
| position    | [IPosition](https://help.iviva.com/uxp/v5/additional-resources/types/iposition)     | No        | -             | -             |
| placeholder | string                                                                              | No        | -             | -             |
| autoFocus   | boolean                                                                             | No        | -             | -             |
| spacingMode | [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode) | No        | -             | -             |

## Ref Handlers

Available methods through ref:

| Method          | Type                         | Description |
| --------------- | ---------------------------- | ----------- |
| focusInput      | () => void                   | -           |
| getInputElement | () => React.MutableRefObject | -           |

## Related Types

* [ISearchBoxProps](https://help.iviva.com/uxp/v5/additional-resources/types/isearchboxprops)
* [IPosition](https://help.iviva.com/uxp/v5/additional-resources/types/iposition)
* [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)
* [ISearchBoxInstanceProps](https://help.iviva.com/uxp/v5/additional-resources/types/isearchboxinstanceprops)