diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx index 2756c3c85f..f44295e247 100644 --- a/packages/ui/src/components/TextField/TextField.tsx +++ b/packages/ui/src/components/TextField/TextField.tsx @@ -48,6 +48,20 @@ export const TextField = forwardRef( } }, [label, ariaLabel, ariaLabelledBy]); + useEffect(() => { + const inputType = (props as { type?: string }).type; + if (inputType === 'search') { + console.warn( + 'TextField type="search" is deprecated. Use SearchField instead.', + ); + } + if (inputType === 'password') { + console.warn( + 'TextField type="password" is deprecated. Use PasswordField instead.', + ); + } + }, [props]); + const { classNames, dataAttributes } = useStyles('TextField', { size, }); diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts index 75a5c68aaa..0c34634e2d 100644 --- a/packages/ui/src/components/TextField/types.ts +++ b/packages/ui/src/components/TextField/types.ts @@ -23,6 +23,22 @@ import type { FieldLabelProps } from '../FieldLabel/types'; export interface TextFieldProps extends AriaTextFieldProps, Omit { + /** + * The HTML input type for the text field + * + * @remarks + * The values 'search' and 'password' are deprecated. Use `SearchField` for + * search inputs and `PasswordField` for password inputs. + */ + type?: + | 'text' + | 'email' + | 'tel' + | 'url' + /** @deprecated Use `SearchField` instead */ + | 'search' + /** @deprecated Use `PasswordField` instead */ + | 'password'; /** * An icon to render before the input */