InputGroup

The InputGroup is a grouping on several related labels, inputs, and buttons together in a compact format. For example, you can group an input, along with a relevant caption or unit of measure, along with several buttons to take action on that input.

<InputGroup>
  <InputGroup.Label>$</InputGroup.Label>
  <InputGroup.Field>
    <Input type="number" defaultValue={100} />
  </InputGroup.Field>
  <InputGroup.Button>
    <Button secondary>Cancel</Button>
  </InputGroup.Button>
  <InputGroup.Button>
    <Button>Save</Button>
  </InputGroup.Button>
</InputGroup>

<InputGroup>
  <InputGroup.Label>$</InputGroup.Label>
  <InputGroup.Field>
    <Input type="number" defaultValue={100} />
  </InputGroup.Field>
  <InputGroup.Button>
    <Button secondary>Cancel</Button>
  </InputGroup.Button>
  <InputGroup.Button>
    <Button>Save</Button>
  </InputGroup.Button>
</InputGroup>

<InputGroup.Stack
  label="Price"
  help="Help text"
  error="Error messages"
>
  <InputGroup.Label>
    $USD
  </InputGroup.Label>
  <InputGroup.Field>
    <Input type="number" defaultValue={100.00} />
  </InputGroup.Field>
</InputGroup.Stack>

<InputGroup.Stack
  label="Price"
  help="Help text"
  error="Error messages"
>
  <InputGroup.Label>
    $USD
  </InputGroup.Label>
  <InputGroup.Field>
    <Input type="number" defaultValue={100.00} />
  </InputGroup.Field>
</InputGroup.Stack>