@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
52 lines (41 loc) • 3.13 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** | `React.Node` | | The content of the InputGroup, normally [`InputField`](../InputField) or [`Select`](../Select).
| 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 | `Translation` | | The label for the InputGroup. [See Functional specs](#functional-specs)
| onChange | `event => void \| Promise` | | Function for handling onClick 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 `margin-bottom` 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.
* Define `size` only for the **InputGroup**, it will set up the proper styling for everything automatically.