# Input

A standard text box

## Installation

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

## Signature

```tsx
const Input: React.ForwardRefExoticComponent<React.RefAttributes<IInputInstanceProps> & IInputProps>
```

## Properties

| Name           | Type                                                                                | Mandatory | Default Value | Example Value |
| -------------- | ----------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| type           | [IInputType](https://help.iviva.com/uxp/v5/additional-resources/types/iinputtype)   | No        | -             | -             |
| value          | string                                                                              | Yes       | -             | -             |
| onChange       | (value: string) => void                                                             | Yes       | -             | -             |
| onFocus        | () => void                                                                          | No        | -             | -             |
| onBlur         | (vale: string) => void                                                              | No        | -             | -             |
| onKeyDown      | (e: React.KeyboardEvent, val: string) => void                                       | No        | -             | -             |
| className      | string                                                                              | No        | -             | -             |
| hasIndicator   | boolean                                                                             | No        | -             | -             |
| indicatorColor | string                                                                              | No        | -             | -             |
| isValid        | boolean                                                                             | No        | -             | -             |
| inputAttr      | { \[key: string]: string \| boolean }                                               | No        | -             | -             |
| placeholder    | string                                                                              | No        | -             | -             |
| inline         | boolean                                                                             | No        | -             | -             |
| styles         | React.CSSProperties                                                                 | No        | -             | -             |
| readOnly       | boolean                                                                             | No        | -             | -             |
| tabIndex       | number                                                                              | No        | -             | -             |
| spacingMode    | [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode) | No        | -             | -             |

## Ref Handlers

Available methods through ref:

| Method     | Type                         | Description                   |
| ---------- | ---------------------------- | ----------------------------- |
| focus      | () => void                   | focus the input               |
| getElement | () => React.MutableRefObject | this will return the  element |

## Related Types

* [IInputProps](https://help.iviva.com/uxp/v5/additional-resources/types/iinputprops)
* [IInputType](https://help.iviva.com/uxp/v5/additional-resources/types/iinputtype)
* [SpacingMode](https://help.iviva.com/uxp/v5/additional-resources/types/spacingmode)
* [IInputInstanceProps](https://help.iviva.com/uxp/v5/additional-resources/types/iinputinstanceprops)