InputGroup

Use input group when you have more related input fields – e.g. for date of birth or phone numbers.

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 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 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.