# 文本输入

- 页面: https://jiguang132.com/zh/resources/material-ui/docs/text-fields
- 资源: Material UI (https://jiguang132.com/zh/resources/material-ui.md)
- 全部指南: https://jiguang132.com/zh/resources/material-ui/docs.md

组合文本输入、标签、辅助说明和原生校验展示。

本指南覆盖默认 Emotion 环境的 Material UI Core；扩展包与额外示例按清单单独标注。

## 使用场景与业务边界

TextField 是组合组件；error 只是视觉状态，不提供校验引擎。使用原生 slots，而不是已移除的旧属性。

## 原生组成与范围

`FilledInput`, `FormControl`, `FormHelperText`, `Input`, `InputAdornment`, `InputBase`, `InputLabel`, `OutlinedInput`, `TextField`

保持 Material UI 原生组合与类型，不替换为 JGuang／Base UI／Radix 同名 API。示例条目不是额外组件。

## 原生安装与初始化

```bash
npm install @mui/material@9.4.0 @emotion/react@11.14.0 @emotion/styled@11.14.1
```

采用原生 npm 包与 Emotion，不提供虚构的 JGuang UI Registry 地址。将示例放在原生 ThemeProvider 内，按项目选择 CssBaseline 或 ScopedCssBaseline。先检查 React、现有 Provider、锁文件与 SSR 配置；不要覆盖用户文件或忽略 peer 冲突。本批实际验收 React 19.2.8；React 18 及以下须匹配 react-is。完整初始化规则见随附的双语 setup 文档。

## 关键原生参数

仅解释本指南选出的关键参数，不是平铺的通用 API。原生继承来源、slot 结构、可空值与泛型仍按固定源码保留。

| 所属组件.属性 | 用途说明 | 声明来源 |
| --- | --- | --- |
| `TextField.value` | 受控原生值，其单值／数组／可空类型取决于所属组件。 | `TextField` |
| `TextField.onChange` | 所属控件的原生回调，保留其准确事件／数值／可空签名。 | `TextField` |
| `TextField.error` | 原生视觉错误状态，校验和恢复由宿主提供。 | `TextField` |
| `TextField.helperText` | TextField 辅助或错误文字，与输入元素关联。 | `TextField` |
| `TextField.multiline` | 将 TextField 组合为多行输入，而不是单行输入。 | `TextField` |
| `TextField.slotProps` | 传给具名原生 slot 的属性，保留 slot 所属组件及回调结构。 | `TextField` |

## 可运行原生示例

下列机器键只选择示例入口，不会作为通用 variant 属性传入每个组件。原生示例 JSX 与数据保持上游原文；JGuang 编写的验收示例明确标注。

- 基础文本输入 · `BasicTextFields` · 上游原生示例
- 表单属性 · `FormPropsTextFields` · 上游原生示例
- 校验状态 · `ValidationTextFields` · 上游原生示例
- 多行文本 · `MultilineTextFields` · 上游原生示例
- 选择输入 · `SelectTextFields` · 上游原生示例
- 图标配置 · `InputWithIcon` · 上游原生示例
- 输入装饰 · `InputAdornments` · 上游原生示例
- 定制输入装饰 · `InputSuffixShrink` · 上游原生示例
- 多个尺寸 · `TextFieldSizes` · 上游原生示例
- 多个尺寸 · `TextFieldHiddenLabel` · 上游原生示例
- 外边距 · `LayoutTextFields` · 上游原生示例
- 占满宽度 · `FullWidthTextField` · 上游原生示例
- 非受控与受控 · `StateTextFields` · 上游原生示例
- 组成组件 · `ComposedTextField` · 上游原生示例
- 输入原语 · `Inputs` · 上游原生示例
- 颜色 · `ColorTextFields` · 上游原生示例
- 使用 styled API · `CustomizedInputsStyled` · 上游原生示例
- 使用主题样式覆盖 API · `CustomizedInputsStyleOverrides` · 上游原生示例
- 使用主题样式覆盖 API · `CustomizedInputBase` · 上游原生示例
- 原生表单控制 Hook · `UseFormControl` · 上游原生示例
- 辅助说明 · `HelperTextMisaligned` · 上游原生示例
- 辅助说明 · `HelperTextAligned` · 上游原生示例

## 尚未支持的额外示例

这些条目仍保留在上游清单中，不静默跳过，也不展示为已完成预览。需要补充依赖／框架验收后再纳入可运行列表。

- 第三方输入库扩展 · `FormattedInputs`: `react-imask`, `react-number-format`

## 真实使用示例

固定版本的未修改原生示例；复制时同时保留所需的局部辅助文件。

```tsx
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function BasicTextFields() {
  return (
    <Box
      component="form"
      sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
      noValidate
      autoComplete="off"
    >
      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
      <TextField id="filled-basic" label="Filled" variant="filled" />
      <TextField id="standard-basic" label="Standard" variant="standard" />
    </Box>
  );
}

```

## 示例依赖边界

`@mui/material/Box`, `@mui/material/TextField`, `@mui/material/MenuItem`, `react`, `@mui/material/Input`, `@mui/material/InputLabel`, `@mui/material/InputAdornment`, `@mui/material/FormControl`, `@mui/icons-material/AccountCircle`, `@mui/material/IconButton`, `@mui/material/FilledInput`, `@mui/material/OutlinedInput`, `@mui/material/FormHelperText`, `@mui/icons-material/Visibility`, `@mui/icons-material/VisibilityOff`, `@mui/icons-material/InfoOutlined`, `@mui/material/InputBase`, `@mui/material/Stack`, `@mui/material/styles`, `@mui/material/Paper`, `@mui/material/Divider`, `@mui/icons-material/Menu`, `@mui/icons-material/Search`, `@mui/icons-material/Directions`

直接导入 Icons／System／Utils 的示例需要匹配 9.4.0 包。局部数据与辅助文件属于示例闭包，不是额外组件。远程图片和模拟操作不提供后端。

## 固定上游 API 元数据参考

以下表格保留上游元数据，不是重新推断的通用类型体系。条件泛型、继承属性与回调细节以以下源码声明为准。主题默认配置可能覆盖元数据默认值。

### FilledInput

```tsx
import FilledInput from '@mui/material/FilledInput';
import { FilledInput } from '@mui/material';
```

原生继承: `InputBase`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `autoComplete` | 否 | `string` | — |
| `autoFocus` | 否 | `bool` | — |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'primary' \| 'secondary' \| string` | — |
| `defaultValue` | 否 | `any` | — |
| `disabled` | 否 | `bool` | — |
| `disableUnderline` | 否 | `bool` | `false` |
| `endAdornment` | 否 | `node` | — |
| `error` | 否 | `bool` | — |
| `fullWidth` | 否 | `bool` | `false` |
| `hiddenLabel` | 否 | `bool` | `false` |
| `id` | 否 | `string` | — |
| `inputComponent` | 否 | `elementType` | `'input'` |
| `inputProps` | 否 | `object` | `{}` |
| `inputRef` | 否 | `ref` | — |
| `margin` | 否 | `'dense' \| 'none'` | — |
| `maxRows` | 否 | `number \| string` | — |
| `minRows` | 否 | `number \| string` | — |
| `multiline` | 否 | `bool` | `false` |
| `name` | 否 | `string` | — |
| `onChange` | 否 | `func` | — |
| `placeholder` | 否 | `string` | — |
| `readOnly` | 否 | `bool` | — |
| `required` | 否 | `bool` | — |
| `rows` | 否 | `number \| string` | — |
| `slotProps` | 否 | `{ input?: object, root?: object }` | `{}` |
| `slots` | 否 | `{ input?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | 否 | `node` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | 否 | `string` | `'text'` |
| `value` | 否 | `any` | — |



### FormControl

```tsx
import FormControl from '@mui/material/FormControl';
import { FormControl } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string` | `'primary'` |
| `component` | 否 | `elementType` | — |
| `disabled` | 否 | `bool` | `false` |
| `error` | 否 | `bool` | `false` |
| `focused` | 否 | `bool` | — |
| `fullWidth` | 否 | `bool` | `false` |
| `hiddenLabel` | 否 | `bool` | `false` |
| `margin` | 否 | `'dense' \| 'none' \| 'normal'` | `'none'` |
| `required` | 否 | `bool` | `false` |
| `size` | 否 | `'medium' \| 'small' \| string` | `'medium'` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | 否 | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` |



### FormHelperText

```tsx
import FormHelperText from '@mui/material/FormHelperText';
import { FormHelperText } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `disabled` | 否 | `bool` | — |
| `error` | 否 | `bool` | — |
| `filled` | 否 | `bool` | — |
| `focused` | 否 | `bool` | — |
| `margin` | 否 | `'dense'` | — |
| `required` | 否 | `bool` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | 否 | `'filled' \| 'outlined' \| 'standard' \| string` | — |



### Input

```tsx
import Input from '@mui/material/Input';
import { Input } from '@mui/material';
```

原生继承: `InputBase`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `autoComplete` | 否 | `string` | — |
| `autoFocus` | 否 | `bool` | — |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'primary' \| 'secondary' \| string` | — |
| `defaultValue` | 否 | `any` | — |
| `disabled` | 否 | `bool` | — |
| `disableUnderline` | 否 | `bool` | `false` |
| `endAdornment` | 否 | `node` | — |
| `error` | 否 | `bool` | — |
| `fullWidth` | 否 | `bool` | `false` |
| `id` | 否 | `string` | — |
| `inputComponent` | 否 | `elementType` | `'input'` |
| `inputProps` | 否 | `object` | `{}` |
| `inputRef` | 否 | `ref` | — |
| `margin` | 否 | `'dense' \| 'none'` | — |
| `maxRows` | 否 | `number \| string` | — |
| `minRows` | 否 | `number \| string` | — |
| `multiline` | 否 | `bool` | `false` |
| `name` | 否 | `string` | — |
| `onChange` | 否 | `func` | — |
| `placeholder` | 否 | `string` | — |
| `readOnly` | 否 | `bool` | — |
| `required` | 否 | `bool` | — |
| `rows` | 否 | `number \| string` | — |
| `slotProps` | 否 | `{ input?: object, root?: object }` | `{}` |
| `slots` | 否 | `{ input?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | 否 | `node` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | 否 | `string` | `'text'` |
| `value` | 否 | `any` | — |



### InputAdornment

```tsx
import InputAdornment from '@mui/material/InputAdornment';
import { InputAdornment } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `position` | 是 | `'end' \| 'start'` | — |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `component` | 否 | `elementType` | — |
| `disablePointerEvents` | 否 | `bool` | `false` |
| `disableTypography` | 否 | `bool` | `false` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | 否 | `'filled' \| 'outlined' \| 'standard'` | — |



### InputBase

```tsx
import InputBase from '@mui/material/InputBase';
import { InputBase } from '@mui/material';
```

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `autoComplete` | 否 | `string` | — |
| `autoFocus` | 否 | `bool` | — |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string` | — |
| `defaultValue` | 否 | `any` | — |
| `disabled` | 否 | `bool` | — |
| `disableInjectingGlobalStyles` | 否 | `bool` | `false` |
| `endAdornment` | 否 | `node` | — |
| `error` | 否 | `bool` | — |
| `fullWidth` | 否 | `bool` | `false` |
| `id` | 否 | `string` | — |
| `inputComponent` | 否 | `element type` | `'input'` |
| `inputProps` | 否 | `object` | `{}` |
| `inputRef` | 否 | `ref` | — |
| `margin` | 否 | `'dense' \| 'none'` | — |
| `maxRows` | 否 | `number \| string` | — |
| `minRows` | 否 | `number \| string` | — |
| `multiline` | 否 | `bool` | `false` |
| `name` | 否 | `string` | — |
| `onBlur` | 否 | `func` | — |
| `onChange` | 否 | `func` | — |
| `onInvalid` | 否 | `func` | — |
| `placeholder` | 否 | `string` | — |
| `readOnly` | 否 | `bool` | — |
| `required` | 否 | `bool` | — |
| `rows` | 否 | `number \| string` | — |
| `size` | 否 | `'medium' \| 'small' \| string` | — |
| `slotProps` | 否 | `{ input?: object, root?: object }` | `{}` |
| `slots` | 否 | `{ input?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | 否 | `node` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | 否 | `string` | `'text'` |
| `value` | 否 | `any` | — |



### InputLabel

```tsx
import InputLabel from '@mui/material/InputLabel';
import { InputLabel } from '@mui/material';
```

原生继承: `FormLabel`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `children` | 否 | `node` | — |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| string` | — |
| `disableAnimation` | 否 | `bool` | `false` |
| `disabled` | 否 | `bool` | — |
| `error` | 否 | `bool` | — |
| `focused` | 否 | `bool` | — |
| `margin` | 否 | `'dense'` | — |
| `required` | 否 | `bool` | — |
| `shrink` | 否 | `bool` | — |
| `size` | 否 | `'medium' \| 'small' \| string` | `'medium'` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | 否 | `'filled' \| 'outlined' \| 'standard'` | — |



### OutlinedInput

```tsx
import OutlinedInput from '@mui/material/OutlinedInput';
import { OutlinedInput } from '@mui/material';
```

原生继承: `InputBase`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `autoComplete` | 否 | `string` | — |
| `autoFocus` | 否 | `bool` | — |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'primary' \| 'secondary' \| string` | — |
| `defaultValue` | 否 | `any` | — |
| `disabled` | 否 | `bool` | — |
| `endAdornment` | 否 | `node` | — |
| `error` | 否 | `bool` | — |
| `fullWidth` | 否 | `bool` | `false` |
| `id` | 否 | `string` | — |
| `inputComponent` | 否 | `elementType` | `'input'` |
| `inputProps` | 否 | `object` | `{}` |
| `inputRef` | 否 | `ref` | — |
| `label` | 否 | `node` | — |
| `margin` | 否 | `'dense' \| 'none'` | — |
| `maxRows` | 否 | `number \| string` | — |
| `minRows` | 否 | `number \| string` | — |
| `multiline` | 否 | `bool` | `false` |
| `name` | 否 | `string` | — |
| `notched` | 否 | `bool` | — |
| `onChange` | 否 | `func` | — |
| `placeholder` | 否 | `string` | — |
| `readOnly` | 否 | `bool` | — |
| `required` | 否 | `bool` | — |
| `rows` | 否 | `number \| string` | — |
| `slotProps` | 否 | `{ input?: object, notchedOutline?: func \| object, root?: object }` | `{}` |
| `slots` | 否 | `{ input?: elementType, notchedOutline?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | 否 | `node` | — |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | 否 | `string` | `'text'` |
| `value` | 否 | `any` | — |



### TextField

```tsx
import TextField from '@mui/material/TextField';
import { TextField } from '@mui/material';
```

原生继承: `FormControl`. 父级与 DOM 属性未被伪造为本组件新属性。

| 属性 | 必需 | 上游元数据类型／约束 | 元数据默认值 |
| --- | --- | --- | --- |
| `autoComplete` | 否 | `string` | — |
| `autoFocus` | 否 | `bool` | `false` |
| `classes` | 否 | `object` | — |
| `color` | 否 | `'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string` | `'primary'` |
| `defaultValue` | 否 | `any` | — |
| `disabled` | 否 | `bool` | `false` |
| `error` | 否 | `bool` | `false` |
| `fullWidth` | 否 | `bool` | `false` |
| `helperText` | 否 | `node` | — |
| `id` | 否 | `string` | — |
| `inputRef` | 否 | `ref` | — |
| `label` | 否 | `node` | — |
| `margin` | 否 | `'dense' \| 'none' \| 'normal'` | `'none'` |
| `maxRows` | 否 | `number \| string` | — |
| `minRows` | 否 | `number \| string` | — |
| `multiline` | 否 | `bool` | `false` |
| `name` | 否 | `string` | — |
| `onChange` | 否 | `func` | — |
| `placeholder` | 否 | `string` | — |
| `required` | 否 | `bool` | `false` |
| `rows` | 否 | `number \| string` | — |
| `select` | 否 | `bool` | `false` |
| `size` | 否 | `'medium' \| 'small' \| string` | `'medium'` |
| `slotProps` | 否 | `{ formHelperText?: func \| object, htmlInput?: func \| object, input?: func \| object, inputLabel?: func \| object, select?: func \| object }` | `{}` |
| `slots` | 否 | `{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, root?: elementType, select?: elementType }` | `{}` |
| `sx` | 否 | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | 否 | `string` | — |
| `value` | 否 | `any` | — |
| `variant` | 否 | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` |


## 原生源码声明

声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。

### vendor/src/FilledInput/FilledInput.d.ts

```ts
import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { InputBaseProps } from '../InputBase';

import { FilledInputClasses } from './filledInputClasses';

export interface FilledInputProps extends StandardProps<InputBaseProps> {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<FilledInputClasses> | undefined;
  /**
   * If `true`, the label is hidden.
   * This is used to increase density for a `FilledInput`.
   * Be sure to add `aria-label` to the `input` element.
   * @default false
   */
  hiddenLabel?: boolean | undefined;
  /**
   * If `true`, the input will not have an underline.
   * @default false
   */
  disableUnderline?: boolean | undefined;
  /**
   * @internal
   */
  notched?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

declare const FilledInput: ((props: FilledInputProps) => React.JSX.Element) & { muiName: string };
```

### vendor/src/FormControl/FormControl.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableStringUnion } from '@mui/types';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { Theme } from '../styles';

import { FormControlClasses } from './formControlClasses';

export interface FormControlPropsSizeOverrides {}

export interface FormControlPropsColorOverrides {}

export interface FormControlOwnProps {
  /**
   * The content of the component.
   */
  children?: React.HTMLAttributes<HTMLDivElement>['children'] | undefined;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<FormControlClasses> | undefined;
  /**
   * The color of the component.
   * It supports both default and custom theme colors, which can be added as shown in the
   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
   * @default 'primary'
   */
  color?:
    | OverridableStringUnion<
        'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
        FormControlPropsColorOverrides
      >
    | undefined;
  /**
   * If `true`, the label, input and helper text should be displayed in a disabled state.
   * @default false
   */
  disabled?: boolean | undefined;
  /**
   * If `true`, the label is displayed in an error state.
   * @default false
   */
  error?: boolean | undefined;
  /**
   * If `true`, the component will take up the full width of its container.
   * @default false
   */
  fullWidth?: boolean | undefined;
  /**
   * If `true`, the component is displayed in focused state.
   */
  focused?: boolean | undefined;
  /**
   * If `true`, the label is hidden.
   * This is used to increase density for a `FilledInput`.
   * Be sure to add `aria-label` to the `input` element.
   * @default false
   */
  hiddenLabel?: boolean | undefined;
  /**
   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
   * @default 'none'
   */
  margin?: 'dense' | 'normal' | 'none' | undefined;
  /**
   * If `true`, the label will indicate that the `input` is required.
   * @default false
   */
  required?: boolean | undefined;
  /**
   * The size of the component.
   * @default 'medium'
   */
  size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * The variant to use.
   * @default 'outlined'
   */
  variant?: 'standard' | 'outlined' | 'filled' | undefined;
}

export interface FormControlTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
> {
  props: AdditionalProps & FormControlOwnProps;
  defaultComponent: RootComponent;
}

declare const FormControl: OverridableComponent<FormControlTypeMap>;

export type FormControlProps<
  RootComponent extends React.ElementType = FormControlTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/FormHelperText/FormHelperText.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableStringUnion } from '@mui/types';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { Theme } from '../styles';

import { FormHelperTextClasses } from './formHelperTextClasses';

export interface FormHelperTextPropsVariantOverrides {}

export interface FormHelperTextOwnProps {
  /**
   * The content of the component.
   *
   * If `' '` is provided, the component reserves one line height for displaying a future message.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<FormHelperTextClasses> | undefined;
  /**
   * If `true`, the helper text should be displayed in a disabled state.
   */
  disabled?: boolean | undefined;
  /**
   * If `true`, helper text should be displayed in an error state.
   */
  error?: boolean | undefined;
  /**
   * If `true`, the helper text should use filled classes key.
   */
  filled?: boolean | undefined;
  /**
   * If `true`, the helper text should use focused classes key.
   */
  focused?: boolean | undefined;
  /**
   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
   * FormControl.
   */
  margin?: 'dense' | undefined;
  /**
   * If `true`, the helper text should use required classes key.
   */
  required?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * The variant to use.
   */
  variant?:
    | OverridableStringUnion<
        'standard' | 'outlined' | 'filled',
        FormHelperTextPropsVariantOverrides
      >
    | undefined;
}

export interface FormHelperTextTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'p',
> {
  props: AdditionalProps & FormHelperTextOwnProps;
  defaultComponent: RootComponent;
}

declare const FormHelperText: OverridableComponent<FormHelperTextTypeMap>;

export type FormHelperTextProps<
  RootComponent extends React.ElementType = FormHelperTextTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<FormHelperTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/Input/Input.d.ts

```ts
import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { InputBaseProps } from '../InputBase';

import { InputClasses } from './inputClasses';

export interface InputProps extends StandardProps<InputBaseProps> {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<InputClasses> | undefined;
  /**
   * If `true`, the `input` will not have an underline.
   * @default false
   */
  disableUnderline?: boolean | undefined;
  /**
   * @internal
   */
  notched?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

declare const Input: ((props: InputProps) => React.JSX.Element) & { muiName: string };
```

### vendor/src/InputAdornment/InputAdornment.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { Theme } from '../styles';

import { InputAdornmentClasses } from './inputAdornmentClasses';

export interface InputAdornmentOwnProps {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<InputAdornmentClasses> | undefined;
  /**
   * The content of the component, normally an `IconButton` or string.
   */
  children?: React.ReactNode;
  /**
   * Disable pointer events on the root.
   * This allows for the content of the adornment to focus the `input` on click.
   * @default false
   */
  disablePointerEvents?: boolean | undefined;
  /**
   * If children is a string then disable wrapping in a Typography component.
   * @default false
   */
  disableTypography?: boolean | undefined;
  /**
   * The position this adornment should appear relative to the `Input`.
   */
  position: 'start' | 'end';
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * The variant to use.
   * Note: If you are using the `TextField` component or the `FormControl` component
   * you do not have to set this manually.
   */
  variant?: 'standard' | 'outlined' | 'filled' | undefined;
}

export interface InputAdornmentTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
> {
  props: AdditionalProps & InputAdornmentOwnProps;
  defaultComponent: RootComponent;
}

declare const InputAdornment: OverridableComponent<InputAdornmentTypeMap>;

export type InputAdornmentProps<
  RootComponent extends React.ElementType = InputAdornmentTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<InputAdornmentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/InputBase/InputBase.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableStringUnion } from '@mui/types';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { InputBaseClasses } from './inputBaseClasses';

export interface InputBasePropsSizeOverrides {}

export interface InputBasePropsColorOverrides {}

export interface InputBaseComponentsPropsOverrides {}

export interface InputBaseProps extends StandardProps<
  React.HTMLAttributes<HTMLDivElement>,
  /*
   * `onBlur`, `onChange`, `onFocus`, `onInvalid`, `onKeyDown`, `onKeyUp` are applied to the inner `InputComponent`,
   * which by default is an input or textarea. Since these handlers differ from the
   * ones inherited by `React.HTMLAttributes<HTMLDivElement>` we need to omit them.
   */
  | 'children'
  | 'defaultValue'
  | 'onBlur'
  | 'onChange'
  | 'onFocus'
  | 'onInvalid'
  | 'onKeyDown'
  | 'onKeyUp'
  | 'aria-label'
> {
  'aria-describedby'?: string | undefined;
  'aria-label'?: string | undefined;
  /**
   * This prop helps users to fill forms faster, especially on mobile devices.
   * The name can be confusing, as it's more like an autofill.
   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
   */
  autoComplete?: string | undefined;
  /**
   * If `true`, the `input` element is focused during the first mount.
   */
  autoFocus?: boolean | undefined;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<InputBaseClasses> | undefined;
  /**
   * The color of the component.
   * It supports both default and custom theme colors, which can be added as shown in the
   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
   * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
   */
  color?:
    | OverridableStringUnion<
        'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
        InputBasePropsColorOverrides
      >
    | undefined;
  /**
   * The default value. Use when the component is not controlled.
   */
  defaultValue?: unknown;
  /**
   * If `true`, the component is disabled.
   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
   */
  disabled?: boolean | undefined;
  /**
   * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
   * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
   * @default false
   */
  disableInjectingGlobalStyles?: boolean | undefined;
  /**
   * End `InputAdornment` for this component.
   */
  endAdornment?: React.ReactNode;
  /**
   * If `true`, the `input` will indicate an error.
   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
   */
  error?: boolean | undefined;
  /**
   * If `true`, the `input` will take up the full width of its container.
   * @default false
   */
  fullWidth?: boolean | undefined;
  /**
   * The id of the `input` element.
   */
  id?: string | undefined;
  /**
   * The component used for the `input` element.
   * Either a string to use a HTML element or a component.
   * @default 'input'
   */
  inputComponent?: React.ElementType<InputBaseComponentProps> | undefined;
  /**
   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
   * @default {}
   */
  inputProps?: InputBaseComponentProps | undefined;
  /**
   * Pass a ref to the `input` element.
   */
  inputRef?: React.Ref<any> | undefined;
  /**
   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
   * FormControl.
   * The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
   */
  margin?: 'dense' | 'none' | undefined;
  /**
   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
   * @default false
   */
  multiline?: boolean | undefined;
  /**
   * Name attribute of the `input` element.
   */
  name?: string | undefined;
  /**
   * Callback fired when the `input` is blurred.
   *
   * Notice that the first argument (event) might be undefined.
   */
  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
  /**
   * Callback fired when the value is changed.
   *
   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value` (string).
   */
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> | undefined;
  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement> | undefined;
  onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement> | undefined;
  /**
   * Callback fired when the `input` doesn't satisfy its constraints.
   */
  onInvalid?: React.FormEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
  /**
   * The short hint displayed in the `input` before the user enters a value.
   */
  placeholder?: string | undefined;
  /**
   * It prevents the user from changing the value of the field
   * (not from interacting with the field).
   */
  readOnly?: boolean | undefined;
  /**
   * If `true`, the `input` element is required.
   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
   */
  required?: boolean | undefined;
  renderSuffix?:
    | ((state: {
        disabled?: boolean | undefined;
        error?: boolean | undefined;
        filled?: boolean | undefined;
        focused?: boolean | undefined;
        margin?: 'dense' | 'none' | 'normal' | undefined;
        required?: boolean | undefined;
        startAdornment?: React.ReactNode;
      }) => React.ReactNode)
    | undefined;
  /**
   * Number of rows to display when multiline option is set to true.
   */
  rows?: string | number | undefined;
  /**
   * Maximum number of rows to display when multiline option is set to true.
   */
  maxRows?: string | number | undefined;
  /**
   * Minimum number of rows to display when multiline option is set to true.
   */
  minRows?: string | number | undefined;
  /**
   * The size of the component.
   */
  size?: OverridableStringUnion<'small' | 'medium', InputBasePropsSizeOverrides> | undefined;
  /**
   * The extra props for the slot components.
   * You can override the existing props or add new ones.
   *
   * @default {}
   */
  slotProps?:
    | {
        root?:
          | (React.HTMLAttributes<HTMLDivElement> &
              InputBaseComponentsPropsOverrides & { sx?: SxProps<Theme> | undefined })
          | undefined;
        input?:
          | (React.InputHTMLAttributes<HTMLInputElement> &
              InputBaseComponentsPropsOverrides & { sx?: SxProps<Theme> | undefined })
          | undefined;
      }
    | undefined;
  /**
   * The components used for each slot inside.
   *
   * @default {}
   */
  slots?:
    | {
        root?: React.ElementType | undefined;
        input?: React.ElementType | undefined;
      }
    | undefined;
  /**
   * Start `InputAdornment` for this component.
   */
  startAdornment?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
   * @default 'text'
   */
  type?: string | undefined;
  /**
   * The value of the `input` element, required for a controlled component.
   */
  value?: unknown;
}

export interface InputBaseComponentProps extends React.HTMLAttributes<
  HTMLInputElement | HTMLTextAreaElement
> {
  // Accommodate arbitrary additional props coming from the `inputProps` prop
  [arbitrary: string]: any;
}

export default function InputBase(props: InputBaseProps): React.JSX.Element;
```

### vendor/src/InputLabel/InputLabel.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableStringUnion } from '@mui/types';

import { FormLabelProps, ExtendFormLabelTypeMap } from '../FormLabel';

import { Theme } from '../styles';

import { InputLabelClasses } from './inputLabelClasses';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

export interface InputLabelPropsSizeOverrides {}

export interface InputLabelOwnProps extends Pick<FormLabelProps, 'children'> {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<InputLabelClasses> | undefined;
  color?: FormLabelProps['color'] | undefined;
  /**
   * If `true`, the transition animation is disabled.
   * @default false
   */
  disableAnimation?: boolean | undefined;
  /**
   * If `true`, the component is disabled.
   */
  disabled?: boolean | undefined;
  /**
   * If `true`, the label is displayed in an error state.
   */
  error?: boolean | undefined;
  /**
   * If `true`, the `input` of this label is focused.
   */
  focused?: boolean | undefined;
  /**
   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
   * FormControl.
   */
  margin?: 'dense' | undefined;
  /**
   * if `true`, the label will indicate that the `input` is required.
   */
  required?: boolean | undefined;
  /**
   * If `true`, the label is shrunk.
   */
  shrink?: boolean | undefined;
  /**
   * The size of the component.
   * @default 'medium'
   */
  size?: OverridableStringUnion<'small' | 'medium', InputLabelPropsSizeOverrides> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * The variant to use.
   */
  variant?: 'standard' | 'outlined' | 'filled' | undefined;
}

export type InputLabelTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'label',
> = ExtendFormLabelTypeMap<{
  props: AdditionalProps & InputLabelOwnProps;
  defaultComponent: RootComponent;
}>;

declare const InputLabel: OverridableComponent<InputLabelTypeMap>;

export type InputLabelProps<
  RootComponent extends React.ElementType = InputLabelTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<InputLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};
```

### vendor/src/OutlinedInput/OutlinedInput.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { InputBaseProps } from '../InputBase';

import { OutlinedInputClasses } from './outlinedInputClasses';

interface OutlinedInputSlots {
  /**
   * The component that renders the notchedOutline slot.
   * @default NotchedOutline
   */
  notchedOutline: React.ElementType;
}

type OutlinedInputSlotsAndSlotProps = CreateSlotsAndSlotProps<
  OutlinedInputSlots,
  {
    notchedOutline: SlotProps<'fieldset', {}, OutlinedInputOwnerState>;
  }
> & {
  slots?: InputBaseProps['slots'] | undefined;
  slotProps?: InputBaseProps['slotProps'] | undefined;
};

export interface OutlinedInputProps
  extends
    Omit<StandardProps<InputBaseProps>, 'slots' | 'slotProps'>,
    OutlinedInputSlotsAndSlotProps {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<OutlinedInputClasses> | undefined;
  /**
   * The label of the `input`. It is only used for layout. The actual labelling
   * is handled by `InputLabel`.
   */
  label?: React.ReactNode;
  /**
   * If `true`, the outline is notched to accommodate the label.
   */
  notched?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface OutlinedInputOwnerState extends Omit<OutlinedInputProps, 'slots' | 'slotProps'> {}

declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
  muiName: string;
};
```

### vendor/src/TextField/TextField.d.ts

```ts
import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableStringUnion } from '@mui/types';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { FormControlProps } from '../FormControl';

import { FormHelperTextProps } from '../FormHelperText';

import { InputBaseProps } from '../InputBase';

import { InputProps as StandardInputProps } from '../Input';

import { FilledInputProps } from '../FilledInput';

import { OutlinedInputProps } from '../OutlinedInput';

import { InputLabelProps } from '../InputLabel';

import { SelectProps } from '../Select';

import { TextFieldClasses } from './textFieldClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

export interface TextFieldPropsColorOverrides {}

export interface TextFieldPropsSizeOverrides {}

export interface TextFieldSlots {
  /**
   * The component that renders the root.
   * @default FormControl
   */
  root: React.ElementType;
  /**
   * The component that renders the input.
   * @default OutlinedInput
   */
  input: React.ElementType;
  /**
   * The component that renders the input's label.
   * @default InputLabel
   */
  inputLabel: React.ElementType;
  /**
   * The html input element.
   * @default 'input'
   */
  htmlInput: React.ElementType;
  /**
   * The component that renders the helper text.
   * @default FormHelperText
   */
  formHelperText: React.ElementType;
  /**
   * The component that renders the select.
   * @default Select
   */
  select: React.ElementType;
}

export interface TextFieldRootSlotPropsOverrides {}

export interface TextFieldInputSlotPropsOverrides {}

export interface TextFieldInputLabelSlotPropsOverrides {}

export interface TextFieldFormHelperTextSlotPropsOverrides {}

export interface TextFieldSelectSlotPropsOverrides {}

export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<
  TextFieldSlots,
  {
    /**
     * Props forwarded to the root slot.
     * By default, the available props are based on the [FormControl](https://mui.com/material-ui/api/form-control/#props) component.
     */
    root: SlotProps<
      React.ElementType<FormControlProps>,
      TextFieldRootSlotPropsOverrides,
      TextFieldOwnerState
    >;
    /**
     * Props forwarded to the input slot.
     * By default, the available props are based on the [Input](https://mui.com/material-ui/api/input/#props) component.
     */
    input: SlotProps<
      React.ElementType<InputPropsType>,
      TextFieldInputSlotPropsOverrides,
      TextFieldOwnerState
    >;
    /**
     * Props forwarded to the input label slot.
     * By default, the available props are based on the [InputLabel](https://mui.com/material-ui/api/input-label/#props) component.
     */
    inputLabel: SlotProps<
      React.ElementType<InputLabelProps>,
      TextFieldInputLabelSlotPropsOverrides,
      TextFieldOwnerState
    >;
    /**
     * Props forwarded to the html input slot.
     * By default, the available props are based on the html input element.
     */
    htmlInput: SlotProps<React.ElementType<InputBaseProps['inputProps']>, {}, TextFieldOwnerState>;
    /**
     * Props forwarded to the form helper text slot.
     * By default, the available props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text/#props) component.
     */
    formHelperText: SlotProps<
      React.ElementType<FormHelperTextProps>,
      TextFieldFormHelperTextSlotPropsOverrides,
      TextFieldOwnerState
    >;
    /**
     * Props forwarded to the select slot.
     * By default, the available props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
     */
    select: SlotProps<
      React.ElementType<SelectProps>,
      TextFieldSelectSlotPropsOverrides,
      TextFieldOwnerState
    >;
  }
>;

export interface BaseTextFieldProps extends StandardProps<
  FormControlProps,
  // event handlers are declared on derived interfaces
  'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'
> {
  /**
   * This prop helps users to fill forms faster, especially on mobile devices.
   * The name can be confusing, as it's more like an autofill.
   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
   */
  autoComplete?: string | undefined;
  /**
   * If `true`, the `input` element is focused during the first mount.
   * @default false
   */
  autoFocus?: boolean | undefined;
  /**
   * @ignore
   */
  children?: FormControlProps['children'] | undefined;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<TextFieldClasses> | undefined;
  /**
   * The color of the component.
   * It supports both default and custom theme colors, which can be added as shown in the
   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
   * @default 'primary'
   */
  color?:
    | OverridableStringUnion<
        'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
        TextFieldPropsColorOverrides
      >
    | undefined;
  /**
   * The default value. Use when the component is not controlled.
   */
  defaultValue?: unknown;
  /**
   * If `true`, the component is disabled.
   * @default false
   */
  disabled?: boolean | undefined;
  /**
   * If `true`, the label is displayed in an error state.
   * @default false
   */
  error?: boolean | undefined;
  /**
   * If `true`, the input will take up the full width of its container.
   * @default false
   */
  fullWidth?: boolean | undefined;
  /**
   * The helper text content.
   */
  helperText?: React.ReactNode;
  /**
   * The id of the `input` element.
   * Use this prop to make `label` and `helperText` accessible for screen readers.
   */
  id?: string | undefined;
  /**
   * Pass a ref to the `input` element.
   */
  inputRef?: React.Ref<any> | undefined;
  /**
   * The label content.
   */
  label?: React.ReactNode;
  /**
   * If `true`, a `textarea` element is rendered instead of an input.
   * @default false
   */
  multiline?: boolean | undefined;
  /**
   * Name attribute of the `input` element.
   */
  name?: string | undefined;
  onBlur?: InputBaseProps['onBlur'] | undefined;
  onFocus?: StandardInputProps['onFocus'] | undefined;
  /**
   * The short hint displayed in the `input` before the user enters a value.
   */
  placeholder?: string | undefined;
  /**
   * If `true`, the label is displayed as required and the `input` element is required.
   * @default false
   */
  required?: boolean | undefined;
  /**
   * Number of rows to display when multiline option is set to true.
   */
  rows?: string | number | undefined;
  /**
   * Maximum number of rows to display when multiline option is set to true.
   */
  maxRows?: string | number | undefined;
  /**
   * Minimum number of rows to display when multiline option is set to true.
   */
  minRows?: string | number | undefined;
  /**
   * Render a [`Select`](https://mui.com/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
   * If this option is set you must pass the options of the select as children.
   * @default false
   */
  select?: boolean | undefined;
  /**
   * The size of the component.
   * @default 'medium'
   */
  size?: OverridableStringUnion<'small' | 'medium', TextFieldPropsSizeOverrides> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
   */
  type?: React.InputHTMLAttributes<unknown>['type'] | undefined;
  /**
   * The value of the `input` element, required for a controlled component.
   */
  value?: unknown;
}

export interface StandardTextFieldProps
  extends BaseTextFieldProps, TextFieldSlotsAndSlotProps<StandardInputProps> {
  /**
   * Callback fired when the value is changed.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value` (string).
   */
  onChange?: StandardInputProps['onChange'] | undefined;
  /**
   * The variant to use.
   * @default 'outlined'
   */
  variant?: 'standard' | undefined;
}

export interface FilledTextFieldProps
  extends BaseTextFieldProps, TextFieldSlotsAndSlotProps<FilledInputProps> {
  /**
   * Callback fired when the value is changed.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value` (string).
   */
  onChange?: FilledInputProps['onChange'] | undefined;
  /**
   * The variant to use.
   * @default 'outlined'
   */
  variant: 'filled';
}

export interface OutlinedTextFieldProps
  extends BaseTextFieldProps, TextFieldSlotsAndSlotProps<OutlinedInputProps> {
  /**
   * Callback fired when the value is changed.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value` (string).
   */
  onChange?: OutlinedInputProps['onChange'] | undefined;
  /**
   * The variant to use.
   * @default 'outlined'
   */
  variant: 'outlined';
}

export type TextFieldVariants = 'outlined' | 'standard' | 'filled';

export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> =
  Variant extends 'filled'
    ? FilledTextFieldProps
    : Variant extends 'standard'
      ? StandardTextFieldProps
      : OutlinedTextFieldProps;

export type TextFieldOwnerState = BaseTextFieldProps;

export default function TextField<Variant extends TextFieldVariants>(
  props: {
    /**
     * The variant to use.
     * @default 'outlined'
     */
    variant?: Variant | undefined;
  } & Omit<TextFieldProps, 'variant'>,
): React.JSX.Element;
```

## 安装后验收

执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。

## 来源与许可

https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e

MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt