Skip to main content

FormGroup

Renders a <fieldset>, which groups a number of FormControl components with an associated <legend> for the title.

Examples

Form Group

View standalone
Personal Information
Code
<FormGroup title="Personal Information">
  <FormControl>
    <InputLabel htmlFor="first-name-1">
      First Name
    </InputLabel>
    <TextInput
      id="first-name-1"
      name="first-name"
      type="text"
    />
  </FormControl>
  <FormControl>
    <InputLabel htmlFor="email-1">
      Email
    </InputLabel>
    <TextInput
      id="email-1"
      name="email"
      type="email"
    />
  </FormControl>
</FormGroup>

Form Group with Large Title

View standalone
Personal Information
Code
<FormGroup
  title="Personal Information"
  titleLevel={3}
>
  <FormControl>
    <InputLabel htmlFor="first-name-2">
      First Name
    </InputLabel>
    <TextInput
      id="first-name-2"
      name="first-name"
      type="text"
    />
  </FormControl>
  <FormControl>
    <InputLabel htmlFor="email-2">
      Email
    </InputLabel>
    <TextInput
      id="email-2"
      name="email"
      type="email"
    />
  </FormControl>
</FormGroup>

Nested Form Group

View standalone
Personal Information
Sub Group
Code
<FormGroup
  title="Personal Information"
  titleLevel={3}
>
  <FormControl>
    <InputLabel htmlFor="first-name-3">
      First Name
    </InputLabel>
    <TextInput
      id="first-name-3"
      name="first-name"
      type="text"
    />
  </FormControl>
  <FormControl>
    <InputLabel htmlFor="email-3">
      Email
    </InputLabel>
    <TextInput
      id="email-3"
      name="email"
      type="email"
    />
  </FormControl>
  <FormGroup
    atoms={{
      marginBlockStart: {
        desktop: '24px',
        mobile: '8px',
        tablet: '24px'
      }
    }}
    title="Sub Group"
    titleLevel={4}
  >
    <FormControl>
      <InputLabel htmlFor="additional-details-3">
        Additional Details
      </InputLabel>
      <TextInput
        id="additional-details-3"
        name="additional-details-3"
        type="text"
      />
    </FormControl>
  </FormGroup>
</FormGroup>

Props

className

string

The className property sets the value of the class attribute of the element.

title

string

Title of the group. Renders as the `<legend>` of the `<fieldset>`. This prop is only optional to be backwards-compatible with the previous behaviour of this component which used a separate `<FormLegend>` component which has since been deprecated. The prop can be made required once that component has been removed.

titleLevel

TitleLevel

Default: 4