marmelab/react-admin · error · Error

If you're not wrapping the CheckboxGroupInput inside a Refer

Error message

If you're not wrapping the CheckboxGroupInput inside a ReferenceArrayInput, you must provide the source prop

What it means

CheckboxGroupInput uses useChoicesContext, which can receive source from a parent ReferenceArrayInput. When rendered standalone the source prop is mandatory because it identifies the form field; without it the component cannot bind to react-hook-form and throws during render.

Source

Thrown at packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx:167

    const {
        allChoices,
        isPending,
        error: fetchError,
        resource,
        source,
        isFromReference,
    } = useChoicesContext({
        choices: choicesProp,
        isFetching: isFetchingProp,
        isLoading: isLoadingProp,
        isPending: isPendingProp,
        resource: resourceProp,
        source: sourceProp,
    });

    if (source === undefined) {
        throw new Error(
            `If you're not wrapping the CheckboxGroupInput inside a ReferenceArrayInput, you must provide the source prop`
        );
    }

    if (!isPending && !fetchError && allChoices === undefined) {
        throw new Error(
            `If you're not wrapping the CheckboxGroupInput inside a ReferenceArrayInput, you must provide the choices prop`
        );
    }

    const {
        field: { onChange: formOnChange, onBlur: formOnBlur, value, ref },
        fieldState: { error, invalid },
        id,
        isRequired,
    } = useInput({
        format,
        parse,

View on GitHub (pinned to 051f511bb0)

Solutions

Add the source prop, e.g. <CheckboxGroupInput source="roles" choices={[...]} />
Or wrap it in a <ReferenceArrayInput source="roles" reference="roles"> so source comes from context

Example fix

// before
<CheckboxGroupInput choices={roleChoices} />
// after
<CheckboxGroupInput source="roles" choices={roleChoices} />

Defensive patterns

Strategy: validation

Validate before calling

if (source === undefined) {
  throw new Error('CheckboxGroupInput requires a source prop (or a ReferenceArrayInput parent)');
}

Type guard

const hasSource = (
  p: CheckboxGroupInputProps
): p is CheckboxGroupInputProps & { source: string } =>
  typeof p.source === 'string' && p.source.length > 0;

Try / catch

try {
  render(<CheckboxGroupInput {...props} />);
} catch (e) {
  if (e.message.includes('must provide the source prop')) {
    console.error('CheckboxGroupInput misconfigured:', e.message);
  }
}

Prevention

Always pass source explicitly unless inside a ReferenceArrayInput
Avoid conditional spreads that can drop source (e.g. {...maybeProps})
Type the wrapper component to require source: { source: string }

When it happens

Trigger: Rendering <CheckboxGroupInput /> without a source prop and without a ReferenceArrayInput parent that supplies one.

Common situations: Copy-pasting the component out of a ReferenceArrayInput example, renaming props, or conditionally spreading props so source becomes undefined.

Related errors

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