To implement InputGroup component into your project you’ll need to add the import:
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:
<InputGroup><InputField /><Select /></InputGroup>
Table below contains all types of the props available in InputGroup component.
|children||The content of the InputGroup, normally InputField or Select.|
|dataTest||Optional prop for testing purposes.|
|error||The error to display beneath the InputGroup. See Functional specs|
|disabled||Whether to disable all nested fields.|
|flex||The flex attribute(s) for children of the InputGroup. See Functional specs|
|label||The label for the InputGroup. See Functional specs|
|onChange||Function for handling onClick event. See Functional specs|
|onFocus||Function for handling onFocus event. See Functional specs|
|onBlur||Function for handling onBlur event between different InputGroup children. See Functional specs|
|onBlurGroup||Function for handling onBlur event for the whole InputGroup. See Functional specs|
|size||The size of the InputField. See Functional specs|
|helpClosable||Whether to display help as a closable tooltip, or have it open only while the field is focused, same as error.|
helpdefined on children will be displayed to user from left to right, only one error at a time will be displayed until resolved.
errorprop overwrites the
helpprop, due to higher priority.
helponly for the InputGroup. Any
helpin InputField or Select won’t be displayed.
You can set up different
flexattribute for every children, or use one for all. See flex property docs for more information.
The color of the label will turn into cloud shade when all children have some filled value.
If the passed children into the InputGroup won’t have any callbacks - either
onBlur, the passed callback of the InputGroup will be used.
sizeonly for the InputGroup, it will set up the proper styling for everything automatically.
onBlurGroup: In comparison to onBlur, which is triggered by every blur event of InputGroup’s children, onBlurGroup treats children as a single field, and fires only when a child loses focus and no child gains focus, for example clicking out of InputGroup.