Nebula

form-group

The FormGroup component is used to group related fields in a fieldset.

Usage

Default

Address
<FormGroup legend="Address">
  <TextField label="Street" />

  <div
    style={{
      display: 'grid',
      gap: '1rem',
      gridTemplateColumns: '3fr 1fr 2fr',
    }}
  >
    <TextField label="City" />

    <TextField label="State" />

    <TextField label="Zip" />
  </div>
</FormGroup>

With helper text

Address

Please enter your current physical address

<FormGroup
  legend="Address"
  helperText="Please enter your current physical address"
>
  <TextField label="Street" />

  <div
    style={{
      display: 'grid',
      gap: '1rem',
      gridTemplateColumns: '3fr 1fr 2fr',
    }}
  >
    <TextField label="City" />

    <TextField label="State" />

    <TextField label="Zip" />
  </div>
</FormGroup>

With tooltip

Address
<FormGroup legend="Address" tooltip="Your current physical address">
  <TextField label="Street" />

  <div
    style={{
      display: 'grid',
      gap: '1rem',
      gridTemplateColumns: '3fr 1fr 2fr',
    }}
  >
    <TextField label="City" />

    <TextField label="State" />

    <TextField label="Zip" />
  </div>
</FormGroup>

Disabled

Address
<FormGroup legend="Address" disabled>
  <TextField label="Street" value="123 Main St" />

  <div
    style={{
      display: 'grid',
      gap: '1rem',
      gridTemplateColumns: '3fr 1fr 2fr',
    }}
  >
    <TextField label="City" value="Seattle" />

    <TextField label="State" value="WA" />

    <TextField label="Zip" value="98122" />
  </div>
</FormGroup>

Hide legend

Address
<FormGroup legend="Address" hideLegend>
  <TextField label="Street" value="123 Main St" />

  <div
    style={{
      display: 'grid',
      gap: '1rem',
      gridTemplateColumns: '3fr 1fr 2fr',
    }}
  >
    <TextField label="City" value="Seattle" />

    <TextField label="State" value="WA" />

    <TextField label="Zip" value="98122" />
  </div>
</FormGroup>