Skip to main content

Function: FormGroup()

FormGroup(props): Element

Defined in: packages/forms/src/FormGroup.tsx:127

FormGroup is a layout container that organises form fields into labelled, optionally nested sections. Each nested FormGroup increments an internal level counter exposed via useFormGroup, which drives a data-level attribute and top-margin spacing so deeper groups are visually indented.

Parameters​

props​

FormGroupProps

Returns​

Element

Examples​

<FormGroup title="Personal details">
  <FormFieldInput name="firstName" label="First name" />
  <FormFieldInput name="lastName" label="Last name" />

  <FormGroup title="Address" direction="row">
    <FormFieldInput name="city" label="City" />
    <FormFieldInput name="zip" label="ZIP" />
  </FormGroup>
</FormGroup>

// Show a group-level validation error (e.g. for an array field)

<FormGroup name="items" title="Items">
  {fields.map((field, i) => (
    <FormFieldInput key={field.id} name={`items[${i}].value`} label="Value" />
  ))}
</FormGroup>