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
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. |
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
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
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" %}