{"record":{"id":"09a4c2f18564432b","repo":"marmelab/react-admin","slug":"searchinput-isn-t-designed-to-be-used-with-a-lab","errorCode":null,"errorMessage":"<SearchInput> isn't designed to be used with a label prop. Use <TextInput> if you need a label.","messagePattern":"<SearchInput> isn't designed to be used with a label prop\\. Use <TextInput> if you need a label\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/input/SearchInput.tsx","lineNumber":24,"sourceCode":"} from '@mui/material/styles';\nimport SearchIcon from '@mui/icons-material/Search';\nimport { InputAdornment } from '@mui/material';\nimport { useTranslate } from 'ra-core';\n\nimport type { CommonInputProps } from './CommonInputProps';\nimport { TextInput, type TextInputProps } from './TextInput';\n\nexport const SearchInput = (inProps: SearchInputProps) => {\n    const props = useThemeProps({\n        props: inProps,\n        name: PREFIX,\n    });\n    const { label, ...rest } = props;\n\n    const translate = useTranslate();\n\n    if (label) {\n        throw new Error(\n            \"<SearchInput> isn't designed to be used with a label prop. Use <TextInput> if you need a label.\"\n        );\n    }\n\n    return (\n        <StyledTextInput\n            hiddenLabel\n            label=\"\"\n            resettable\n            placeholder={translate('ra.action.search')}\n            InputProps={{\n                endAdornment: (\n                    <InputAdornment position=\"end\">\n                        <SearchIcon color=\"disabled\" />\n                    </InputAdornment>\n                ),\n            }}\n            size=\"small\"","sourceCodeStart":6,"sourceCodeEnd":42,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/input/SearchInput.tsx#L6-L42","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Remove the label prop from <SearchInput>; the placeholder already indicates its purpose.","Replace <SearchInput> with <TextInput source=\"q\" label=\"Search\" resettable alwaysOn /> if a labeled input is required."],"exampleFix":"// before\n<SearchInput source=\"q\" label=\"Search\" />\n\n// after\n<SearchInput source=\"q\" placeholder=\"Search\" />","handlingStrategy":"validation","validationCode":"if ('label' in searchInputProps && searchInputProps.label) {\n  throw new Error('SearchInput does not accept a label; use TextInput instead');\n}","typeGuard":"type SearchInputSafeProps = Omit<SearchInputProps, 'label'>;\nconst hasNoLabel = <T extends { label?: unknown }>(props: T): props is Omit<T, 'label'> =>\n  !props.label;","tryCatchPattern":null,"preventionTips":["Rely on the placeholder for search affordance, not a label","Use TextInput when a label is a requirement","Ban label in code review for SearchInput usages"],"tags":["react-admin","search-input","props","filter"],"backgroundTag":"unsupported-prop","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}