What causes "Invalid form group ${group}" in marmelab/react-admin?

Ensure every input's groupName matches an existing FormGroupContextProvider name in the same form.

Invalid form group ${group}

Error message

Invalid form group ${group}

What it means

FormGroupsProvider's unregisterField checks that the group the field claims to belong to exists in the form's group registry. If a field tries to unregister from a group that was never registered (or was already removed), react-admin warns 'Invalid form group <name>'.

Source

Thrown at packages/ra-core/src/form/groups/FormGroupsProvider.tsx:66

                if (group != null) {
                    if (!(formGroups.current[group] || []).includes(source)) {
                        formGroups.current[group] = [
                            ...(formGroups.current[group] || []),
                            source,
                        ];
                        // Notify subscribers that the group fields have changed
                        if (subscribers.current[group]) {
                            subscribers.current[group].forEach(subscriber =>
                                subscriber()
                            );
                        }
                    }
                }
            },
            unregisterField: (source, group) => {
                if (group != null) {
                    if (!formGroups.current[group]) {
                        console.warn(`Invalid form group ${group}`);
                    } else {
                        const fields = new Set(formGroups.current[group]);
                        fields.delete(source);
                        formGroups.current[group] = Array.from(fields);

                        // Notify subscribers that the group fields have changed
                        if (subscribers.current[group]) {
                            subscribers.current[group].forEach(subscriber =>
                                subscriber()
                            );
                        }
                    }
                }
            },
        }),
        []
    );

View on GitHub (pinned to 051f511bb0)

Solutions

Ensure every input's groupName matches an existing FormGroupContextProvider name in the same form.
Keep FormGroupContextProvider mounted as long as its fields are mounted (check conditional rendering order).
Centralize group names in shared constants to avoid typos.

Example fix

// before
<TextInput source="city" groupName="adress" /> {/* typo */}
// after
<FormGroupContextProvider name="address">
  <TextInput source="city" groupName="address" />
</FormGroupContextProvider>

Defensive patterns

Strategy: validation

Validate before calling

const GROUPS = { address: 'address' };
const useValidGroupName = (name) => {
  if (!Object.values(GROUPS).includes(name)) throw new Error(`Unknown form group: ${name}`);
  return name;
};

Type guard

const isKnownGroup = (name, groups) => name != null && name in groups;
if (!isKnownGroup(groupName, registeredGroups)) throw new Error(`Invalid form group ${groupName}`);

Prevention

Define group names as shared constants and use them in both provider and inputs.
Keep FormGroupContextProvider mounted whenever its grouped inputs are mounted.
Avoid dynamic group names built from data without validation.

When it happens

Trigger: A useInput-based component passes a groupName that was never declared via FormGroupContextProvider/FormGroupsProvider, or the group unmounts before its fields (ordering issue), leaving unregisterField called with an unknown group.

Common situations: Typos in group names between FormGroupContextProvider and input groupName props; conditional rendering that removes the group provider while inputs remain; custom inputs wired with wrong group constants.

Related errors

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/eef223209078e061. Report an issue: GitHub.