# InputField

To implement InputField component into your project you'll need to add the import:

```jsx
import { InputField } from '@kiwicom/orbit-react-native';
```

After adding import into your project you can use it simply like:

```jsx
<InputField />
```

## Props

Table below contains all types of the props available in InputField component.

| Name        | Type                         | Default    | Description                                                                                                                                    |
| :---------- | :--------------------------- | :--------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled    | `boolean`                    |            | If `true`, the InputField will be disabled.                                                                                                    |
| testID      | `string`                     |            | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!)                                 |
| error       | `React.Node`                 |            | The error to display beneath the InputField. [See Functional specs](#functional-specs)                                                         |
| tags        | `React.Node`                 |            | Here you can pass <Tag /> component for render tags [See Functional specs](#functional-specs)                                                  |
| help        | `React.Node`                 |            | The help to display beneath the InputField.                                                                                                    |
| label       | `string`                     |            | The label for the InputField. [See Functional specs](#functional-specs)                                                                        |
| inlineLabel | `boolean`                    |            | If true the label renders on the left side of input                                                                                            |
| nativeID    | `string`                     |            | Used to locate this view from native classes. (This disables the 'layout-only view removal' optimization for this view!)                       |
| maxLength   | `number`                     |            | Specifies the maximum number of characters allowed.                                                                                            |
| required    | `boolean`                    |            | If true, the label is displayed as required.                                                                                                   |
| onBlur      | `(event) => void \| Promise` |            | Function for handling onBlur event.                                                                                                            |
| onChange    | `(event) => void \| Promise` |            | Function for handling onChange event.                                                                                                          |
| onFocus     | `(event) => void \| Promise` |            | Function for handling onFocus event.                                                                                                           |
| placeholder | `string`                     |            | The placeholder of the InputField.                                                                                                             |
| **prefix**  | `React.Node`                 |            | The prefix component for the InputField.                                                                                                       |
| readOnly    | `boolean`                    | `"false"`  | If `true`, the InputField be readOnly.                                                                                                         |
| spaceAfter  | `enum`                       |            | Additional `marginBottom` after component. [See this docs](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken) |
| **size**    | [`enum`](#enum)              | `"normal"` | The size of the InputField.                                                                                                                    |
| suffix      | `React.Node`                 |            | The suffix component for the InputField. [See Functional specs](#functional-specs)                                                             |
| **type**    | [`enum`](#enum)              | `"text"`   | The type of the InputField.                                                                                                                    |
| value       | `string`                     |            | Specifies the value of the InputField.                                                                                                         |
| autoCorrect | `boolean`                    | `true`     | If false, disables auto-correct.                                                                                                               |

### enum

| type           | size       |
| :------------- | :--------- |
| `"text"`       | `"small"`  |
| `"number"`     | `"normal"` |
| `"email"`      |
| `"password"`   |
| `"passportid"` |

## Functional specs

- The `error` prop overwrites the `help` prop, due to higher priority.

- The color of the label will turn into cloud shade when the InputField has some filled value.

- You can use `string` for currency InputField, or `React.Node` for InputField with icon.

- If you want to use `ButtonLink` as suffix for the `InputField`, use `transparent` prop for the `ButtonLink`, e.g.:

```jsx
<InputField
  placeholder="My placeholder"
  suffix={<ButtonLink transparent icon={<Visibility />} />}
/>
```

- Usage of `Tag` in `InputField`

```jsx
import { InputField, Tag } from '@kiwicom/orbit-react-native';

<InputField
  placeholder="My placeholder"
  tags={
    <View>
      <Tag>Brno</Tag>
      <Tag>Praha</Tag>
    </View>
  }
/>;
```

- `ref` can be used for example auto-focus the elements immediately after render.

```jsx
class Component extends React.PureComponent<Props> {
  componentDidMount() {
    this.ref.current && this.ref.current.focus();
  }

  ref: { current: React$ElementRef<*> | null } = React.createRef();

  render() {
    return <InputField ref={this.ref} />;
  }
}
```