# Input Group

InputGroup is used to show a visual relationship between two or more related
input fields. If a number of form fields make up a group of content (e.g. an
address, or first and last name becoming a full name, start and end times of an
event) they are great candidates for an InputGroup.

## Design & usage guidelines

The default layout is for fields to flow in a vertical direction, one above the
next. Use the `flowDirection` prop to specify when you want fields to flow in a
horizontal direction.

[Nested](/storybook/web/?path=/story/components-forms-and-inputs-inputgroup--nested)
InputGroup components need to be of `flowDirection="horizontal"` to avoid layout
issues caused by nesting. Any non-horizontal nested groups will log an error to
the console and not be rendered.

If one of the InputGroup fields has a preset value from a larger list of
options, it is possible to use [Autocomplete](../Autocomplete/Autocomplete.md) within
InputGroup.


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `flowDirection` | `"horizontal" | "vertical"` | No | `vertical` | Determine the direction the fields are laid out in. |