@kiwicom/orbit-components
Version:
<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"
51 lines (40 loc) • 2.86 kB
Markdown
# InputGroup
To implement InputGroup component into your project you'll need to add the import:
```jsx
import InputGroup from "@kiwicom/orbit-components/lib/InputGroup";
import InputField from "@kiwicom/orbit-components/lib/InputField";
import Select from "@kiwicom/orbit-components/lib/Select";
```
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** | `Array<InputField or Select>` | | The children of the InputGroup.
| dataTest | `string` | | Optional prop for testing purposes.
| error | `React.Node` | | The error to display beneath the InputGroup. [See Functional specs](#functional-specs)
| flex | `string` or `Array<string>` | `"0 1 auto"` | The flex attribute(s) for children of the InputGroup. [See Functional specs](#functional-specs)
| help | `React.Node` | | The help to display beneath the InputGroup.
| label | `string` | | The label for the InputGroup. [See Functional specs](#functional-specs)
| onChange | `func` | | Function for handling onClick event. [See Functional specs](#functional-specs)
| onFocus | `func` | | Function for handling onFocus event. [See Functional specs](#functional-specs)
| onBlur | `func` | | Function for handling onBlur event. [See Functional specs](#functional-specs)
| size | [`enum`](#enum) | `"normal"` | The size of the InputField. [See Functional specs](#functional-specs)
### 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.
* Define `size` only for the **InputGroup**, it will set up the proper styling for everything automatically.