# Text Field

- Page: https://jiguang132.com/resources/material-ui/docs/text-fields
- Resource: Material UI (https://jiguang132.com/resources/material-ui.md)
- All guides: https://jiguang132.com/resources/material-ui/docs.md

Compose text entry, labels, helper text and native validation presentation.

This guide covers Material UI Core with the default Emotion engine; extensions and additional demos are explicitly classified.

## Use case and business boundary

TextField is a composition; error is visual, not a validation engine. Use native slot APIs rather than removed legacy props.

## Native composition and scope

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

Preserve native Material UI composition and types; do not substitute JGuang UI/Base UI/Radix APIs. Example entries are not extra components.

## Native installation and initialization

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

Use native npm and Emotion, not an invented JGuang UI Registry URL. Place examples inside native ThemeProvider; choose CssBaseline or ScopedCssBaseline for the project. Inspect React, existing providers, lockfile and SSR first. Never overwrite files or conceal peer conflicts. This batch verified React 19.2.8; React 18 and below require matching react-is. See the included bilingual setup guide.

## Practical native parameters

These selected parameters are not a flattened universal API. Preserve the native declaring owner, slot structure, nullable values and generics.

| Owner.prop | Practical role | Declaration source |
| --- | --- | --- |
| `TextField.value` | Controlled native value; its scalar/array/nullable type is owner-specific. | `TextField` |
| `TextField.onChange` | Owning control's native callback; preserve its exact event/value/nullable signature. | `TextField` |
| `TextField.error` | Native visual error state; the host supplies validation and recovery. | `TextField` |
| `TextField.helperText` | TextField supporting or error text; associate it with the input. | `TextField` |
| `TextField.multiline` | Compose a multiline TextField rather than a single-line input. | `TextField` |
| `TextField.slotProps` | Props for named native slots; slot owners and callback shapes must be preserved. | `TextField` |

## Runnable native examples

Machine keys select example entries, not universal variant props. Native demo JSX/data stay unchanged; JGuang-authored acceptance fixtures are explicitly labelled.

- Basic TextField · `BasicTextFields` · upstream native demo
- Form props · `FormPropsTextFields` · upstream native demo
- Validation · `ValidationTextFields` · upstream native demo
- Multiline · `MultilineTextFields` · upstream native demo
- Select · `SelectTextFields` · upstream native demo
- Icons · `InputWithIcon` · upstream native demo
- Input Adornments · `InputAdornments` · upstream native demo
- Customizing adornments · `InputSuffixShrink` · upstream native demo
- Sizes · `TextFieldSizes` · upstream native demo
- Sizes · `TextFieldHiddenLabel` · upstream native demo
- Margin · `LayoutTextFields` · upstream native demo
- Full width · `FullWidthTextField` · upstream native demo
- Uncontrolled vs. Controlled · `StateTextFields` · upstream native demo
- Components · `ComposedTextField` · upstream native demo
- Inputs · `Inputs` · upstream native demo
- Color · `ColorTextFields` · upstream native demo
- Using the styled API · `CustomizedInputsStyled` · upstream native demo
- Using the theme style overrides API · `CustomizedInputsStyleOverrides` · upstream native demo
- Using the theme style overrides API · `CustomizedInputBase` · upstream native demo
- `useFormControl` · `UseFormControl` · upstream native demo
- Helper text · `HelperTextMisaligned` · upstream native demo
- Helper text · `HelperTextAligned` · upstream native demo

## Explicitly unsupported additional examples

These remain in the upstream inventory, not silently skipped or presented as working previews. Additional dependency/framework acceptance is required.

- Integration with 3rd party input libraries · `FormattedInputs`: `react-imask`, `react-number-format`

## Actual usage example

Unmodified pinned native demo; copy its required local helper files together.

```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>
  );
}

```

## Example dependency boundaries

`@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`

Direct Icons/System/Utils example imports require their matching 9.4.0 packages. Relative data/helpers are part of the example closure, not extra components. Remote images and simulated operations do not supply a backend.

## Pinned upstream API metadata reference

These tables retain the upstream metadata, not a newly inferred generic type system. Conditional generics, inherited props and callback details are defined by the source declarations below. Theme defaults may override metadata defaults.

### FilledInput

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

Native inheritance: `InputBase`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `autoComplete` | no | `string` | — |
| `autoFocus` | no | `bool` | — |
| `classes` | no | `object` | — |
| `color` | no | `'primary' \| 'secondary' \| string` | — |
| `defaultValue` | no | `any` | — |
| `disabled` | no | `bool` | — |
| `disableUnderline` | no | `bool` | `false` |
| `endAdornment` | no | `node` | — |
| `error` | no | `bool` | — |
| `fullWidth` | no | `bool` | `false` |
| `hiddenLabel` | no | `bool` | `false` |
| `id` | no | `string` | — |
| `inputComponent` | no | `elementType` | `'input'` |
| `inputProps` | no | `object` | `{}` |
| `inputRef` | no | `ref` | — |
| `margin` | no | `'dense' \| 'none'` | — |
| `maxRows` | no | `number \| string` | — |
| `minRows` | no | `number \| string` | — |
| `multiline` | no | `bool` | `false` |
| `name` | no | `string` | — |
| `onChange` | no | `func` | — |
| `placeholder` | no | `string` | — |
| `readOnly` | no | `bool` | — |
| `required` | no | `bool` | — |
| `rows` | no | `number \| string` | — |
| `slotProps` | no | `{ input?: object, root?: object }` | `{}` |
| `slots` | no | `{ input?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | no | `node` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | no | `string` | `'text'` |
| `value` | no | `any` | — |



### FormControl

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `color` | no | `'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string` | `'primary'` |
| `component` | no | `elementType` | — |
| `disabled` | no | `bool` | `false` |
| `error` | no | `bool` | `false` |
| `focused` | no | `bool` | — |
| `fullWidth` | no | `bool` | `false` |
| `hiddenLabel` | no | `bool` | `false` |
| `margin` | no | `'dense' \| 'none' \| 'normal'` | `'none'` |
| `required` | no | `bool` | `false` |
| `size` | no | `'medium' \| 'small' \| string` | `'medium'` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | no | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` |



### FormHelperText

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `disabled` | no | `bool` | — |
| `error` | no | `bool` | — |
| `filled` | no | `bool` | — |
| `focused` | no | `bool` | — |
| `margin` | no | `'dense'` | — |
| `required` | no | `bool` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | no | `'filled' \| 'outlined' \| 'standard' \| string` | — |



### Input

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

Native inheritance: `InputBase`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `autoComplete` | no | `string` | — |
| `autoFocus` | no | `bool` | — |
| `classes` | no | `object` | — |
| `color` | no | `'primary' \| 'secondary' \| string` | — |
| `defaultValue` | no | `any` | — |
| `disabled` | no | `bool` | — |
| `disableUnderline` | no | `bool` | `false` |
| `endAdornment` | no | `node` | — |
| `error` | no | `bool` | — |
| `fullWidth` | no | `bool` | `false` |
| `id` | no | `string` | — |
| `inputComponent` | no | `elementType` | `'input'` |
| `inputProps` | no | `object` | `{}` |
| `inputRef` | no | `ref` | — |
| `margin` | no | `'dense' \| 'none'` | — |
| `maxRows` | no | `number \| string` | — |
| `minRows` | no | `number \| string` | — |
| `multiline` | no | `bool` | `false` |
| `name` | no | `string` | — |
| `onChange` | no | `func` | — |
| `placeholder` | no | `string` | — |
| `readOnly` | no | `bool` | — |
| `required` | no | `bool` | — |
| `rows` | no | `number \| string` | — |
| `slotProps` | no | `{ input?: object, root?: object }` | `{}` |
| `slots` | no | `{ input?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | no | `node` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | no | `string` | `'text'` |
| `value` | no | `any` | — |



### InputAdornment

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `position` | yes | `'end' \| 'start'` | — |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `component` | no | `elementType` | — |
| `disablePointerEvents` | no | `bool` | `false` |
| `disableTypography` | no | `bool` | `false` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | no | `'filled' \| 'outlined' \| 'standard'` | — |



### InputBase

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

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `autoComplete` | no | `string` | — |
| `autoFocus` | no | `bool` | — |
| `classes` | no | `object` | — |
| `color` | no | `'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string` | — |
| `defaultValue` | no | `any` | — |
| `disabled` | no | `bool` | — |
| `disableInjectingGlobalStyles` | no | `bool` | `false` |
| `endAdornment` | no | `node` | — |
| `error` | no | `bool` | — |
| `fullWidth` | no | `bool` | `false` |
| `id` | no | `string` | — |
| `inputComponent` | no | `element type` | `'input'` |
| `inputProps` | no | `object` | `{}` |
| `inputRef` | no | `ref` | — |
| `margin` | no | `'dense' \| 'none'` | — |
| `maxRows` | no | `number \| string` | — |
| `minRows` | no | `number \| string` | — |
| `multiline` | no | `bool` | `false` |
| `name` | no | `string` | — |
| `onBlur` | no | `func` | — |
| `onChange` | no | `func` | — |
| `onInvalid` | no | `func` | — |
| `placeholder` | no | `string` | — |
| `readOnly` | no | `bool` | — |
| `required` | no | `bool` | — |
| `rows` | no | `number \| string` | — |
| `size` | no | `'medium' \| 'small' \| string` | — |
| `slotProps` | no | `{ input?: object, root?: object }` | `{}` |
| `slots` | no | `{ input?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | no | `node` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | no | `string` | `'text'` |
| `value` | no | `any` | — |



### InputLabel

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

Native inheritance: `FormLabel`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `children` | no | `node` | — |
| `classes` | no | `object` | — |
| `color` | no | `'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| string` | — |
| `disableAnimation` | no | `bool` | `false` |
| `disabled` | no | `bool` | — |
| `error` | no | `bool` | — |
| `focused` | no | `bool` | — |
| `margin` | no | `'dense'` | — |
| `required` | no | `bool` | — |
| `shrink` | no | `bool` | — |
| `size` | no | `'medium' \| 'small' \| string` | `'medium'` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `variant` | no | `'filled' \| 'outlined' \| 'standard'` | — |



### OutlinedInput

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

Native inheritance: `InputBase`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `autoComplete` | no | `string` | — |
| `autoFocus` | no | `bool` | — |
| `classes` | no | `object` | — |
| `color` | no | `'primary' \| 'secondary' \| string` | — |
| `defaultValue` | no | `any` | — |
| `disabled` | no | `bool` | — |
| `endAdornment` | no | `node` | — |
| `error` | no | `bool` | — |
| `fullWidth` | no | `bool` | `false` |
| `id` | no | `string` | — |
| `inputComponent` | no | `elementType` | `'input'` |
| `inputProps` | no | `object` | `{}` |
| `inputRef` | no | `ref` | — |
| `label` | no | `node` | — |
| `margin` | no | `'dense' \| 'none'` | — |
| `maxRows` | no | `number \| string` | — |
| `minRows` | no | `number \| string` | — |
| `multiline` | no | `bool` | `false` |
| `name` | no | `string` | — |
| `notched` | no | `bool` | — |
| `onChange` | no | `func` | — |
| `placeholder` | no | `string` | — |
| `readOnly` | no | `bool` | — |
| `required` | no | `bool` | — |
| `rows` | no | `number \| string` | — |
| `slotProps` | no | `{ input?: object, notchedOutline?: func \| object, root?: object }` | `{}` |
| `slots` | no | `{ input?: elementType, notchedOutline?: elementType, root?: elementType }` | `{}` |
| `startAdornment` | no | `node` | — |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | no | `string` | `'text'` |
| `value` | no | `any` | — |



### TextField

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

Native inheritance: `FormControl`. Parent/DOM props are not fabricated as additional own props.

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `autoComplete` | no | `string` | — |
| `autoFocus` | no | `bool` | `false` |
| `classes` | no | `object` | — |
| `color` | no | `'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string` | `'primary'` |
| `defaultValue` | no | `any` | — |
| `disabled` | no | `bool` | `false` |
| `error` | no | `bool` | `false` |
| `fullWidth` | no | `bool` | `false` |
| `helperText` | no | `node` | — |
| `id` | no | `string` | — |
| `inputRef` | no | `ref` | — |
| `label` | no | `node` | — |
| `margin` | no | `'dense' \| 'none' \| 'normal'` | `'none'` |
| `maxRows` | no | `number \| string` | — |
| `minRows` | no | `number \| string` | — |
| `multiline` | no | `bool` | `false` |
| `name` | no | `string` | — |
| `onChange` | no | `func` | — |
| `placeholder` | no | `string` | — |
| `required` | no | `bool` | `false` |
| `rows` | no | `number \| string` | — |
| `select` | no | `bool` | `false` |
| `size` | no | `'medium' \| 'small' \| string` | `'medium'` |
| `slotProps` | no | `{ formHelperText?: func \| object, htmlInput?: func \| object, input?: func \| object, inputLabel?: func \| object, select?: func \| object }` | `{}` |
| `slots` | no | `{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, root?: elementType, select?: elementType }` | `{}` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `type` | no | `string` | — |
| `value` | no | `any` | — |
| `variant` | no | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` |


## Native source declarations

Declarations/imports are extracted from pinned source without flattening unions or external inheritance. Original English comments/types are source reference, not a claim of translated upstream prose. Shared types stay in their native packages.

### 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;
```

## Post-install acceptance

Run strict types, production build and real interactions. Check keyboard labels/focus, disabled/error/read-only semantics where natively supported, both themes, narrow screens and reduced motion. Verify callbacks against the real host data; do not declare installation complete from copying a prompt. Initialization fixtures also require server HTML and warning-free hydration.

## Source and license

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

MIT · @mui/material@9.4.0. Vendor originals and license are preserved. Full original upstream prose remains in vendor/docs and is not represented as fully translated.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt