ControlGroup

A ControlGroup is a group of input elements inside a Form. It consistst of one or more ControlGroupItem and can visually be separated using a ControlGroupDivider.

<ControlGroup>
  <ControlGroupItem
    label="First name"
  >
    <TextBox
      placeholder="Enter your first name…"
    />
  </ControlGroupItem>
</ControlGroup>

Grouping items horizontally

Some input elements work best when they're groupd together in one line, e.g. the city and the zip code of an address. In such cases you can add two items into a ControlGroupItem.

<ControlGroup>
  <ControlGroupItem
    label="First name"
  >
    <TextBox
      placeholder="Your first name"
    />
  </ControlGroupItem>
  <ControlGroupItem
    label="Your name"
  >
    <TextBox
      placeholder="Your last name"
    />
  </ControlGroupItem>
</ControlGroup>

Adjusting the size of items

By default items will be sized equally. But input components work best when their size reflects the expected input data. Use the adjust property of the ControlGroupItem to define wether an item should be flexible or automatically use its own size.

<ControlGroup>
  <ControlGroupItem
    adjust="flex"
    label="City"
  >
    <TextBox
      placeholder="The city you live in…"
    />
  </ControlGroupItem>
  <ControlGroupItem
    adjust="auto"
    label="Zip"
  >
    <TextBox
      placeholder="Your ZIP code"
    />
  </ControlGroupItem>
</ControlGroup>

Grouping sections vertically

By adding a ControlGroupDivider between groups it is possible to better separate different sections inside a Form.

<React.Fragment>
  <ControlGroup>
    <ControlGroupItem
      label="Subject"
    >
      <TextBox
        placeholder="Enter a subject…"
      />
    </ControlGroupItem>
  </ControlGroup>
  <ControlGroup>
    <ControlGroupItem
      label="Tags"
    >
      <TextBox
        placeholder="Enter comma sepeared tags…"
      />
    </ControlGroupItem>
  </ControlGroup>
  <ControlGroupDivider />
  <ControlGroup>
    <ControlGroupItem
      label="Publish at specific date"
    >
      <CheckBox />
    </ControlGroupItem>
  </ControlGroup>
</React.Fragment>