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

Personal Information
Code
<UnknownElementType title="Personal Information">
  <UnknownElementType>
    <UnknownElementType htmlFor="first-name-1">
      First Name
    </UnknownElementType>
    <UnknownElementType
      id="first-name-1"
      name="first-name"
      type="text"
    />
  </UnknownElementType>
  <UnknownElementType>
    <UnknownElementType htmlFor="email-1">
      Email
    </UnknownElementType>
    <UnknownElementType
      id="email-1"
      name="email"
      type="email"
    />
  </UnknownElementType>
</UnknownElementType>

Form Group with Large Title

Personal Information
Code
<UnknownElementType
  title="Personal Information"
  titleLevel={3}
>
  <UnknownElementType>
    <UnknownElementType htmlFor="first-name-2">
      First Name
    </UnknownElementType>
    <UnknownElementType
      id="first-name-2"
      name="first-name"
      type="text"
    />
  </UnknownElementType>
  <UnknownElementType>
    <UnknownElementType htmlFor="email-2">
      Email
    </UnknownElementType>
    <UnknownElementType
      id="email-2"
      name="email"
      type="email"
    />
  </UnknownElementType>
</UnknownElementType>

Nested Form Group

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

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>`.

titleLevel

TitleLevel

Default: 4