marmelab/react-admin · error · Error

<SearchInput> isn't designed to be used with a label prop. U

Error message

<SearchInput> isn't designed to be used with a label prop. Use <TextInput> if you need a label.

What it means

SearchInput is a label-less search field designed to sit in the List toolbar (<Filter>), where the label would be redundant or break the design. Passing any truthy `label` prop makes the component throw, and the error message points you to <TextInput> if a label is genuinely needed.

Source

Thrown at packages/ra-ui-materialui/src/input/SearchInput.tsx:24

} from '@mui/material/styles';
import SearchIcon from '@mui/icons-material/Search';
import { InputAdornment } from '@mui/material';
import { useTranslate } from 'ra-core';

import type { CommonInputProps } from './CommonInputProps';
import { TextInput, type TextInputProps } from './TextInput';

export const SearchInput = (inProps: SearchInputProps) => {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX,
    });
    const { label, ...rest } = props;

    const translate = useTranslate();

    if (label) {
        throw new Error(
            "<SearchInput> isn't designed to be used with a label prop. Use <TextInput> if you need a label."
        );
    }

    return (
        <StyledTextInput
            hiddenLabel
            label=""
            resettable
            placeholder={translate('ra.action.search')}
            InputProps={{
                endAdornment: (
                    <InputAdornment position="end">
                        <SearchIcon color="disabled" />
                    </InputAdornment>
                ),
            }}
            size="small"

View on GitHub (pinned to 051f511bb0)

Solutions

1. Remove the label prop from <SearchInput>; the placeholder already indicates its purpose.
2. Replace <SearchInput> with <TextInput source="q" label="Search" resettable alwaysOn /> if a labeled input is required.

Example fix

// before
<SearchInput source="q" label="Search" />

// after
<SearchInput source="q" placeholder="Search" />

if ('label' in searchInputProps && searchInputProps.label) {
  throw new Error('SearchInput does not accept a label; use TextInput instead');
}

type SearchInputSafeProps = Omit<SearchInputProps, 'label'>;
const hasNoLabel = <T extends { label?: unknown }>(props: T): props is Omit<T, 'label'> =>
  !props.label;

When it happens

Trigger: Rendering <SearchInput source="q" label="Search" /> — any truthy value for label (even label="" is safe, but label={true} or a string) triggers the throw at render time.

Common situations: Copy-pasting a TextInput into a SearchInput usage while keeping its label; team conventions that require labels on all inputs; i18n tooling that injects label props automatically into filter inputs.

Related errors

• <ReferenceInput> does not accept a validate prop. Set the va
• emptyValue being set to null or undefined is not supported.
• If you're not wrapping the SelectInput inside a ReferenceInp
• If you're not wrapping the SelectInput inside a ReferenceInp
• Input components require either a source or a name prop.

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