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

What it means

SelectInput needs a list of options either passed directly via the `choices` prop or fetched by an enclosing ReferenceInput. If there is no pending fetch (isPending false) and no fetch error, and allChoices is still undefined, the component has no data source to render and throws this error.

Source

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

        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,
        createValue,
        createHintValue,
    });
    const { field, fieldState, id, isRequired } = useInput({
        defaultValue,
        parse,

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass the choices prop: <SelectInput source="status" choices={[{ id: 1, name: 'One' }]} />.
2. Or wrap the input in <ReferenceInput source="..." reference="..."> to fetch choices automatically.
3. Verify whatever supplies choices is not undefined at render time (check the async load that builds the array).

Example fix

// before
<SelectInput source="status" />

// after
<SelectInput
  source="status"
  choices={[
    { id: 'draft', name: 'Draft' },
    { id: 'published', name: 'Published' },
  ]}
/>

if (!choices && !insideReferenceInput) {
  throw new Error('SelectInput requires a choices prop when not inside a ReferenceInput');
}

const hasChoices = <T,>(c: T[] | undefined): c is T[] =>
  Array.isArray(c);

When it happens

Trigger: Rendering <SelectInput source="status" /> with no choices prop and no ReferenceInput parent; passing choices={undefined} (e.g. from a variable that failed to initialize) once the fetch context reports it is not pending and no error occurred.

Common situations: Refactoring away a ReferenceInput but keeping the child SelectInput without inline choices; a data loader returning undefined silently so choices never arrive; forgetting that outside ReferenceInput the choices prop is mandatory.

Related errors

• If you're not wrapping the SelectInput inside a ReferenceInp
• emptyValue being set to null or undefined is not supported.
• <ReferenceInput> does not accept a validate prop. Set the va
• <SearchInput> isn't designed to be used with a label prop. U
• The Count component must be used inside a ResourceContext or

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