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 choices prop

What it means

CheckboxGroupInput requires a list of choices. When not pending and there is no fetch error, the merged choices (from props or the ReferenceArrayInput context) must still be defined; if undefined the component has nothing to render and throws rather than rendering an empty group silently.

Source

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

        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,
        resource,
        source,
        validate,
        onChange,
        onBlur,
        disabled,

View on GitHub (pinned to 051f511bb0)

Solutions

1. Provide a choices array: <CheckboxGroupInput source="roles" choices={[{id:'admin',name:'Admin'}]} />
2. Wrap in ReferenceArrayInput so choices come from the referenced resource
3. If choices are computed, default them to [] so the value is never undefined

Example fix

// before
const myChoices = fetchDataMaybe();
<CheckboxGroupInput source="roles" choices={myChoices} />
// after
<CheckboxGroupInput source="roles" choices={myChoices ?? []} />

if (!isPending && !fetchError && !Array.isArray(allChoices)) {
  throw new Error('CheckboxGroupInput requires a defined choices array');
}

const hasChoices = (
  p: CheckboxGroupInputProps
): p is CheckboxGroupInputProps & { choices: any[] } =>
  Array.isArray(p.choices);

try {
  render(<CheckboxGroupInput source="roles" choices={maybeChoices} />);
} catch (e) {
  if (e.message.includes('must provide the choices prop')) {
    render(<CheckboxGroupInput source="roles" choices={[]} />);
  }
}

When it happens

Trigger: Standalone CheckboxGroupInput with source set but no choices prop and no data arriving from a ReferenceArrayInput; or ReferenceArrayInput returning undefined choices while isPending is false and no fetchError is set.

Common situations: Passing choices={undefined} due to a failed data fetch in custom code, forgetting the choices prop entirely, or a custom hook supplying an undefined choices value.

Related errors

• If you're not wrapping the CheckboxGroupInput inside a Refer
• useReferenceFieldController: missing reference prop. You mus
• useShowController requires an id prop or a route with an /:i
• useNextPrevController was called outside of a ResourceContex
• To create a new option, you must pass an onCreate function o

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