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>

Form Group with Required Indicator

Personal Information
Code
<UnknownElementType title={<>Personal Information{' '}<RequiredIndicator /></>}>
  <UnknownElementType
    id="choice-4-1"
    name="list-2"
    value="dolor"
  >
    Lorem Ipsum
  </UnknownElementType>
  <UnknownElementType
    id="choice-4-2"
    name="list-2"
    value="massa"
  >
    Solor
  </UnknownElementType>
  <UnknownElementType
    id="choice-4-3"
    name="list-2"
    value="gravida"
  >
    Dit Amet
  </UnknownElementType>
</UnknownElementType>

Form Group with Required Indicator and custom label

Personal Information
Code
<UnknownElementType title={<>Personal Information{' '}<RequiredIndicator label="(required)" /></>}>
  <UnknownElementType
    id="choice-4-1"
    name="list-2"
    value="dolor"
  >
    Lorem Ipsum
  </UnknownElementType>
  <UnknownElementType
    id="choice-4-2"
    name="list-2"
    value="massa"
  >
    Solor
  </UnknownElementType>
  <UnknownElementType
    id="choice-4-3"
    name="list-2"
    value="gravida"
  >
    Dit Amet
  </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

ReactNode

Title of the group. Renders as the `<legend>` of the `<fieldset>`. Accepts ReactNode to allow composition with RequiredIndicator for cases where individual form controls cannot be marked as required (e.g., checkbox/radio groups).

titleLevel

TitleLevel

Default: 4