fieldgroup-component.md

<FieldGroup>

A wrapper for wrapping dynamic fields.

{% hint style="danger" %} It's recommended to use <FieldGroup /> to wrap any and all dynamic fields. {% endhint %}

Field groups affect what's output from onSubmit and how validations and groupValidations listen for field updates.

import {
  Field,
  FieldGroup,
  OneForm,
} from '@oneform/react'

const FieldGroupExample = () => (
  <OneFormProvider>
    <FieldGroup
      id="1"
      name="addressId"
    >
      <Field>
        <input name="name" />
      </Field>
    </FieldGroup>
  </OneFormProvider>
)

export default FieldGroupExample

Props

Prop Name	Prop Type	Description
children	Node	Any number of components.
id	String	A unique identifier for this group. It only has to be unique for the given group name.
name	String	The group name.

Versatility

There's no limit to how many <FieldGroup /> wrappers you use, how deeply you nest fields.

You can even have duplicate id props!:

import {
  Field,
  FieldGroup,
  OneForm,
} from '@oneform/react'

const SharedFieldGroupIdExample = () => (
  <OneFormProvider>
    <FieldGroup
      id="1"
      name="accountId"
    >
      <Field>
        <input name="email" />
      </Field>
      
      <Field>
        <input name="name" />
      </Field>
    </FieldGroup>
  </OneFormProvider>
)

export default SharedFieldGroupIdExample

Deeply nesting dynamic fields

import {
  Field,
  FieldGroup,
  OneForm,
} from '@oneform/react'

const BasicDeeplyNestedFieldGroupsExample = () => (
  <OneFormProvider>
    <FieldGroup
      id="1"
      name="addressId"
    >
      <Field>
        <input name="name" />
      </Field>

      <FieldGroup
        id="1"
        name="emailId"
      >
        <Field>
          <input name="email" />
        </Field>
      </FieldGroup>

      <FieldGroup
        id="2"
        name="emailId"
      >
        <Field>
          <input name="email" />
        </Field>
      </FieldGroup>
    </FieldGroup>
  </OneFormProvider>
)

export default BasicDeeplyNestedFieldGroupsExample

Form submission

When submitting a form, you'll get back flattened values.

In this form:

import {
  Field,
  FieldGroup,
  OneForm,
} from '@oneform/react'
import {
  useCallback,
} from 'react'

const FieldGroupSubmissionExample = () => {
  const formSubmitted = (
    useCallback(
      ({
        registeredValues,
      }) => {
        console.log(
          registeredValues
        )
      },
      [], 
    )
  )

  return (
    <OneFormProvider
      onSubmit={formSubmitted}
    >
      <FieldGroup
        id="1"
        name="addressId"
      >
        <Field>
          <input name="name" />
        </Field>
      </FieldGroup>
    </OneFormProvider>
  )
}

export default FieldGroupSubmissionExample

console.log will log this object:

{
  'name/addressId:1': '',
}

{% page-ref page="../everything-explained/validate-groups-of-fields.md" %}

{% page-ref page="../everything-explained/validate-dynamic-groups-of-fields.md" %}