marmelab/react-admin · error · Error

<ReferenceInput> does not accept a validate prop. Set the va

Error message

<ReferenceInput> does not accept a validate prop. Set the validate prop on the child instead.

What it means

<ReferenceInput> delegates validation to the actual input element it wraps (the child), not to itself. Passing a `validate` prop on ReferenceInput would be silently ineffective, so in development the library throws to force you to move validate onto the child input. It only throws when process.env.NODE_ENV !== 'production'.

Source

Thrown at packages/ra-ui-materialui/src/input/ReferenceInput.tsx:74

 * @example
 * <ReferenceInput
 *      source="post_id"
 *      reference="posts"
 *      filter={{ is_published: true }}
 * />
 *
 * The enclosed component may filter results. ReferenceInput create a ChoicesContext which provides
 * a `setFilters` function. You can call this function to filter the results.
 */
export const ReferenceInput = (props: ReferenceInputProps) => {
    const {
        children = defaultChildren,
        offline = defaultOffline,
        ...rest
    } = props;

    if (props.validate && process.env.NODE_ENV !== 'production') {
        throw new Error(
            '<ReferenceInput> does not accept a validate prop. Set the validate prop on the child instead.'
        );
    }

    return (
        <ReferenceInputBase {...rest} offline={offline}>
            {children}
        </ReferenceInputBase>
    );
};

const defaultChildren = <AutocompleteInput />;
const defaultOffline = <Offline variant="inline" />;
export interface ReferenceInputProps extends ReferenceInputBaseProps {
    /**
     * Call validate on the child component instead
     */
    validate?: never;

View on GitHub (pinned to 051f511bb0)

Solutions

Move the validate prop from <ReferenceInput> to its child input component.
Combine validators with an array on the child if multiple rules are needed: validate={[required(), minValue(1)]}.

Example fix

// before
<ReferenceInput source="user_id" reference="users" validate={required()}>
  <AutocompleteInput optionText="name" />
</ReferenceInput>

// after
<ReferenceInput source="user_id" reference="users">
  <AutocompleteInput optionText="name" validate={required()} />
</ReferenceInput>

Defensive patterns

Strategy: validation

Validate before calling

if ('validate' in referenceInputProps) {
  throw new Error('Put validate on the child input of ReferenceInput, not on ReferenceInput');
}

Type guard

type NoValidateProps<T> = Omit<T, 'validate'>;
const isValidateFree = <T extends { validate?: unknown }>(props: T): props is Omit<T, 'validate'> =>
  !('validate' in props);

Prevention

Always put validate on the leaf input (AutocompleteInput, SelectArrayInput), not the container
When wrapping ReferenceInput in a helper component, type props as Omit<ReferenceInputProps, 'validate'>
Code-review forms for validate on any *Input container components

When it happens

Trigger: Rendering <ReferenceInput source="user_id" reference="users" validate={required()} /> — the validate prop is present on ReferenceInput itself instead of on the child input like <AutocompleteInput validate={required()} />.

Common situations: Copying a form snippet where validate sat on a TextInput and pasting it onto ReferenceInput; migrating older code where validate on containers may have been tolerated; bulk-adding required() validation across form fields including reference fields.

Related errors

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