# InputGroup

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

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

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

```jsx
<InputGroup>
  <InputField />
  <Select />
</InputGroup>
```

## Props

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

| Name           | Type                         | Default    | Description                                                                                                                                    |
| :------------- | :--------------------------- | :--------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **children**   | `React.Node`                 |            | The content of the InputGroup, normally [`InputField`](../InputField) or [`Select`](../Select).                                                |
| childrenStyles | `Array<ViewStyleProp>`       |            | Additional styles for dealing with flexbox                                                                                                     |
| 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 InputGroup. [See Functional specs](#functional-specs)                                                         |
| help           | `React.Node`                 |            | The help to display beneath the InputGroup.                                                                                                    |
| nativeID       | `string`                     |            | Used to locate this view from native classes. (This disables the 'layout-only view removal' optimization for this view!)                       |
| inlineLabel    | `boolean`                    |            | If true the label renders on the left side of input                                                                                            |
| label          | `string`                     |            | The label for the InputGroup. [See Functional specs](#functional-specs)                                                                        |
| onChange       | `(event) => void \| Promise` |            | Function for handling onChange event. [See Functional specs](#functional-specs)                                                                |
| onFocus        | `(event) => void \| Promise` |            | Function for handling onFocus event. [See Functional specs](#functional-specs)                                                                 |
| onBlur         | `(event) => void \| Promise` |            | Function for handling onBlur event. [See Functional specs](#functional-specs)                                                                  |
| size           | [`enum`](#enum)              | `"normal"` | The size of the InputField. [See Functional specs](#functional-specs)                                                                          |
| spaceAfter     | `enum`                       |            | Additional `marginBottom` after component. [See this docs](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken) |

### enum

| size       |
| :--------- |
| `"small"`  |
| `"normal"` |

## Functional specs

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

- Define `error` or `help` only for the **InputGroup**. Any `error` or `help` in InputField or Select won't be displayed.

- You can set up different `flex` attribute for every children, or use one for all. See [flex property docs](https://www.w3schools.com/cssref/css3_pr_flex.asp) for more information.

- The color of the label will turn into cloud shade when all children have some filled value.

- Define `onChange`, `onFocus` and `onBlur` only for the **InputGroup**, everything will be passed to children automatically.

# WIP

- `disabled` should be added to `InputGroup`
- should we use `style` for every `InputField` and `childrenStyles` not for `InputGroup`?