marmelab/react-admin · error · Error

the value prop is required at runtime

Error message

the value prop is required at runtime

What it means

<FormTab> marks a tab within <TabbedForm>; its `value` prop is used as the tab identifier and to build the link/selector for syncWithLocation. Without it the tab cannot be identified, so the component throws at runtime (TypeScript also requires it, but JS usage or `any` casts bypass that).

Source

Thrown at packages/ra-ui-materialui/src/form/FormTab.tsx:27

    const {
        children,
        className,
        contentClassName,
        count,
        hidden,
        icon,
        iconPosition,
        intent,
        label,
        onChange,
        path,
        resource,
        syncWithLocation,
        value,
        ...rest
    } = props;
    if (typeof value === 'undefined') {
        throw new Error('the value prop is required at runtime');
    }

    const renderHeader = () => (
        <FormTabHeader
            label={label}
            count={count}
            value={value}
            icon={icon}
            iconPosition={iconPosition}
            className={className}
            syncWithLocation={syncWithLocation}
            onChange={onChange}
            {...sanitizeRestProps(rest)}
        />
    );

    const renderContent = () => (
        <FormGroupContextProvider name={value.toString()}>

View on GitHub (pinned to 051f511bb0)

Solutions

1. Add a unique `value` prop to each FormTab: `<FormTab label="Main" value="main">`.
2. Ensure dynamically-built tabs always supply value (e.g. value={tab.name}).
3. If migrating from `path`, rename `path` to `value`.

Example fix

// before
<FormTab label="Main">
  ...
</FormTab>

// after
<FormTab label="Main" value="main">
  ...
</FormTab>

tabs.forEach(tab => { if (tab.value == null) throw new Error('FormTab value required'); });

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

When it happens

Trigger: Rendering <FormTab label="..."> inside <TabbedForm> without a `value` prop; spreading props where value is undefined; using FormTab in plain JavaScript where the missing prop isn't type-checked.

Common situations: Copying old react-admin v2/v3 examples where `path` was used instead of `value`; JS projects upgrading react-admin; dynamically generated tabs where a value key is accidentally omitted.

Related errors

• <InfiniteList> was called outside of a ResourceContext and w
• useListController requires a non-empty resource prop or cont
• useShowController requires a non-empty resource prop or cont
• <Show> requires either a `render` prop or `children` prop
• useCanAccess must be used inside a <Resource> component or p

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