marmelab/react-admin · error · Error

If you're not wrapping the SelectInput inside a ReferenceInp

Error message

If you're not wrapping the SelectInput inside a ReferenceInput, you must provide the source prop

What it means

SelectInput resolves its choices via useChoicesContext, which works either standalone (with an explicit `source` and `choices`) or inside a ReferenceInput (which supplies context). When the component is not inside a ReferenceInput-providing context and `source` is undefined, it cannot bind to the form field, so it throws.

Source

Thrown at packages/ra-ui-materialui/src/input/SelectInput.tsx:175

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

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

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

    const getRecordRepresentation = useGetRecordRepresentation(resource);
    const { getChoiceText, getChoiceValue, getDisableValue } = useChoices({
        optionText:
            optionText ??
            (isFromReference ? getRecordRepresentation : undefined),
        optionValue,
        disableValue,
        translateChoice: translateChoice ?? !isFromReference,

View on GitHub (pinned to 051f511bb0)

Solutions

  1. Add the source prop: <SelectInput source="status" choices={...} />.
  2. Or wrap it in <ReferenceInput source="..." reference="..."> so the context supplies the source.
  3. In custom wrappers, pass through the source prop explicitly and guard it before render.

Example fix

// before
<SelectInput choices={[{ id: 'a', name: 'A' }]} />

// after
<SelectInput source="status" choices={[{ id: 'a', name: 'A' }]} />
Defensive patterns

Strategy: validation

Validate before calling

if (!source) {
  throw new Error('SelectInput outside a ReferenceInput requires a source prop');
}

Type guard

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

Prevention

When it happens

Trigger: Rendering a bare <SelectInput choices={...} /> with no source prop outside a ReferenceInput; destructuring/forgetting source in a custom wrapper that spreads props; using SelectInput inside a context that doesn't supply a record source.

Common situations: Building custom wrappers that accidentally drop the source prop; moving a SelectInput out of a ReferenceInput but forgetting it still relied on context; dynamic forms where source is computed and can be undefined.

Related errors


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