Alternatives

CheckboxGroup — For grouped checkboxes.
RadioGroup — For grouped radio buttons.

Usage

Whenever a caption is needed to provide information about a related set of controls consider the Fieldset component.

Example

Use the Fieldset to group thematically related controls in a form.

<Fieldset legend="Billing address">
  <FieldStack>
    <Field label="Street">
      <TextInput />
    </Field>
    <Field label="City">
      <TextInput />
    </Field>
    <Field label="State">
      <SelectInput
        onChange={() => {}}
        options={[
          { label: 'New South Wales', value: 'NSW' },
          { label: 'Victoria', value: 'VIC' },
          { label: 'Queensland', value: 'QLD' },
          { label: 'South Australia', value: 'SA' },
          { label: 'Western Australia', value: 'WA' },
          { label: 'Tasmania', value: 'TAS' },
          { label: 'Northern Territory', value: 'NT' },
          { label: 'Australian Capital Territory', value: 'ACT' },
        ]}
      />
    </Field>
    <Field label="Postcode">
      <TextInput />
    </Field>
  </FieldStack>
</Fieldset>

Legend appearance

Use the legendAppearance prop in circumstances where fields should be semantically grouped for screen readers, but presented as a single field for sighted users.

Edit in Playroom

<Fieldset legend="Name" legendAppearance="label">
  <Columns gap="small">
    <Field label="First name" labelVisible={false}>
      <TextInput placeholder="e.g. Jane" />
    </Field>
    <Field label="Last name" labelVisible={false}>
      <TextInput placeholder="e.g. Smith" />
    </Field>
  </Columns>
</Fieldset>