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>
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 or Select. | |
dataTest | string |
Optional prop for testing purposes. | |
error | React.Node |
The error to display beneath the InputGroup. See Functional specs | |
flex | string or Array<string> |
"0 1 auto" |
The flex attribute(s) for children of the InputGroup. See Functional specs |
help | React.Node |
The help to display beneath the InputGroup. | |
label | Translation |
The label for the InputGroup. See Functional specs | |
onChange | event => void | Promise |
Function for handling onClick event. See Functional specs | |
onFocus | event => void | Promise |
Function for handling onFocus event. See Functional specs | |
onBlur | event => void | Promise |
Function for handling onBlur event. See Functional specs | |
size | enum |
"normal" |
The size of the InputField. See Functional specs |
spaceAfter | enum |
Additional margin-bottom after component. See this docs |
enum
size |
---|
"small" |
"normal" |
Functional specs
-
The
error
prop overwrites thehelp
prop, due to higher priority. -
Define
error
orhelp
only for the InputGroup. Anyerror
orhelp
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 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
onChange
,onFocus
oronBlur
, the passed callback of the InputGroup will be used. -
Define
size
only for the InputGroup, it will set up the proper styling for everything automatically.