The FormGroupContextProvider can only be used inside a FormC

Error message

The FormGroupContextProvider can only be used inside a FormContext such as provided by the SimpleForm and TabbedForm components

What it means

FormGroupContextProvider registers a field group through the FormGroupsContext created by SimpleForm/TabbedForm. When rendered outside such a Form context, formGroups (with registerGroup/unregisterGroup) is undefined, so the provider cannot register the group and warns that it is being used incorrectly.

Source

Thrown at packages/ra-core/src/form/groups/FormGroupContextProvider.tsx:65

 * @param {ReactNode} props.children The form group content
 * @param {String} props.name The form group name
 */
export const FormGroupContextProvider = ({
    children,
    name,
}: {
    children: ReactNode;
    name: string;
}) => {
    const formGroups = useFormGroups();

    useEffect(() => {
        if (
            !formGroups ||
            !formGroups.registerGroup ||
            !formGroups.unregisterGroup
        ) {
            console.warn(
                `The FormGroupContextProvider can only be used inside a FormContext such as provided by the SimpleForm and TabbedForm components`
            );
            return;
        }
        formGroups.registerGroup(name);

        return () => {
            formGroups.unregisterGroup(name);
        };
    }, [formGroups, name]);

    return (
        <FormGroupContext.Provider value={name}>
            {children}
        </FormGroupContext.Provider>
    );
};

View on GitHub (pinned to 051f511bb0)

Solutions

Wrap the provider inside a <SimpleForm> or <TabbedForm>.
If using a custom form, add FormGroupsProvider (or supply the FormGroupsContext value with registerGroup/unregisterGroup) yourself.
Remove FormGroupContextProvider if grouping is not actually needed.

Example fix

// before
<form>
  <FormGroupContextProvider name="address">
    <TextInput source="city" />
  </FormGroupContextProvider>
</form>
// after
<SimpleForm>
  <FormGroupContextProvider name="address">
    <TextInput source="city" />
  </FormGroupContextProvider>
</SimpleForm>

Defensive patterns

Strategy: type-guard

Validate before calling

// Ensure FormGroupContextProvider is always rendered inside a form that provides FormGroupsContext
const MyPage = () => (
  <SimpleForm>
    <FormGroupContextProvider name="contact">...</FormGroupContextProvider>
  </SimpleForm>
);

Type guard

const hasFormGroups = (ctx) => Boolean(ctx && ctx.registerGroup && ctx.unregisterGroup);
// check via useFormGroupContext consumer before rendering children

Prevention

Only use FormGroupContextProvider inside SimpleForm or TabbedForm.
For custom forms, add FormGroupsProvider to supply the groups context.
Cover custom form layouts with a dev-mode test that renders the provider and asserts no console.warn.

When it happens

Trigger: Rendering <FormGroupContextProvider name="x"> outside any <SimpleForm> or <TabbedForm>, or inside a form that doesn't supply FormGroupsContext (e.g. raw react-hook-form <form> or a custom form without FormGroupsProvider).

Common situations: Reusing FormGroupContextProvider in storybook demos or custom forms; using it with a plain <form> after migrating from TabbedForm; forgetting the outer form component when refactoring.

Related errors

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