Text Field

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

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.

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.

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

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

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

FormControl

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

FormHelperText

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

Input

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

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

InputAdornment

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

InputBase

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

InputLabel

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

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

OutlinedInput

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

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

TextField

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

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

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

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

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

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

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

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

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

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

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

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.