diff --git a/docs/pages/material-ui/api/input.json b/docs/pages/material-ui/api/input.json
index 023edaf5d786b1..319f57dcdcb0fe 100644
--- a/docs/pages/material-ui/api/input.json
+++ b/docs/pages/material-ui/api/input.json
@@ -71,6 +71,8 @@
"input",
"inputSizeSmall",
"inputMultiline",
+ "inputAdornedStart",
+ "inputAdornedEnd",
"inputTypeSearch"
],
"globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" },
diff --git a/docs/translations/api-docs/input/input.json b/docs/translations/api-docs/input/input.json
index 7b9e265eeed5c1..1e3d0cb5231d6a 100644
--- a/docs/translations/api-docs/input/input.json
+++ b/docs/translations/api-docs/input/input.json
@@ -92,6 +92,16 @@
"nodeName": "the input element",
"conditions": "multiline={true}"
},
+ "inputAdornedStart": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the input element",
+ "conditions": "startAdornment is provided"
+ },
+ "inputAdornedEnd": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the input element",
+ "conditions": "endAdornment is provided"
+ },
"inputTypeSearch": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the input element",
diff --git a/packages/mui-material/src/Input/inputClasses.ts b/packages/mui-material/src/Input/inputClasses.ts
index bc553344a50e3d..96aab43356b70f 100644
--- a/packages/mui-material/src/Input/inputClasses.ts
+++ b/packages/mui-material/src/Input/inputClasses.ts
@@ -29,6 +29,10 @@ export interface InputClasses {
inputSizeSmall: string;
/** Styles applied to the input element if `multiline={true}`. */
inputMultiline: string;
+ /** Styles applied to the input element if `startAdornment` is provided. */
+ inputAdornedStart: string;
+ /** Styles applied to the input element if `endAdornment` is provided. */
+ inputAdornedEnd: string;
/** Styles applied to the input element if `type="search"`. */
inputTypeSearch: string;
}
diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
index 3833621c0909be..468affd862e276 100644
--- a/packages/mui-material/src/TextField/TextField.d.ts
+++ b/packages/mui-material/src/TextField/TextField.d.ts
@@ -230,7 +230,14 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps {
InputProps?: Partial;
}
-export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps;
+export type TextFieldVariants = 'outlined' | 'standard' | 'filled';
+
+export type TextFieldProps =
+ Variant extends 'filled'
+ ? FilledTextFieldProps
+ : Variant extends 'standard'
+ ? StandardTextFieldProps
+ : OutlinedTextFieldProps;
/**
* The `TextField` is a convenience wrapper for the most common cases (80%).
@@ -274,4 +281,12 @@ export type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | Out
* - [TextField API](https://mui.com/material-ui/api/text-field/)
* - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
*/
-export default function TextField(props: TextFieldProps): JSX.Element;
+export default function TextField(
+ props: {
+ /**
+ * The variant to use.
+ * @default 'outlined'
+ */
+ variant?: Variant;
+ } & Omit,
+): JSX.Element;
diff --git a/packages/mui-material/src/TextField/TextField.spec.tsx b/packages/mui-material/src/TextField/TextField.spec.tsx
index aef486d4692d48..242cb93ed188cc 100644
--- a/packages/mui-material/src/TextField/TextField.spec.tsx
+++ b/packages/mui-material/src/TextField/TextField.spec.tsx
@@ -11,6 +11,22 @@ import { expectType } from '@mui/types';
);
+ const StandardInputAdorned = (
+
+ );
+ const DefaultInputAdorned = (
+
+ );
+
const outlinedInputTypeSearch = (
);
diff --git a/packages/mui-material/test/typescript/hoc-interop.spec.tsx b/packages/mui-material/test/typescript/hoc-interop.spec.tsx
index d9abaf997eb78b..c4bf957a30ebd7 100644
--- a/packages/mui-material/test/typescript/hoc-interop.spec.tsx
+++ b/packages/mui-material/test/typescript/hoc-interop.spec.tsx
@@ -4,41 +4,11 @@
* It's a common pattern to use some form of Pick or Omit in hocs which don't have
* a desired outcome when operating on union types.
*
- * We use our TextField component since it has a union type as props
- *
* See https://github.com/Microsoft/TypeScript/issues/28339 for in-depth discussion
*/
import { Button } from '@mui/material';
import { createStyles, withStyles } from '@mui/styles';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import emotionStyled from '@emotion/styled';
import * as React from 'react';
-import styled from 'styled-components';
-
-const filledProps = {
- InputProps: { classes: { inputAdornedStart: 'adorned' } },
-};
-
-// baseline behavior
-;
-// @ts-expect-error
-; // desired to throw
-
-// styled
-{
- const StyledTextField = styled(TextField)``;
- ; // desired to pass
- // @ts-expect-error
- ; // undesired, should throw
-}
-
-// @emotion/styled
-{
- const StyledTextField = emotionStyled(TextField)``;
- ;
- // @ts-expect-error
- ; // desired to throw
-}
// https://github.com/mui/material-ui/issues/14586
{