Text Field

Text Fields let users enter and edit text.

Basic TextField

Form props

Controlling the HTML input

<TextField slotProps={{ htmlInput: { 'data-testid': '…' } }} />

<input
  aria-invalid="false"
  className="MuiInputBase-input MuiOutlinedInput-input"
  type="text"
  data-testid="…"
/>

Validation

Multiline

Select

Icons

Input Adornments

Customizing adornments

Sizes

Margin

Full width

Uncontrolled vs. Controlled

Components

Inputs

Color

Customization

Using the styled API

Using the theme style overrides API

useFormControl

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

• value.adornedStart (bool): Indicate whether the child Input or Select component has a start adornment.
• value.setAdornedStart (func): Setter function for adornedStart state value.
• value.color (string): The theme color is being used, inherited from FormControl color prop .
• value.disabled (bool): Indicate whether the component is being displayed in a disabled state, inherited from FormControl disabled prop.
• value.error (bool): Indicate whether the component is being displayed in an error state, inherited from FormControl error prop
• value.filled (bool): Indicate whether input is filled
• value.focused (bool): Indicate whether the component and its children are being displayed in a focused state
• value.fullWidth (bool): Indicate whether the component is taking up the full width of its container, inherited from FormControl fullWidth prop
• value.hiddenLabel (bool): Indicate whether the label is being hidden, inherited from FormControl hiddenLabel prop
• value.required (bool): Indicate whether the label is indicating that the input is required input, inherited from the FormControl required prop
• value.size (string): The size of the component, inherited from the FormControl size prop
• value.variant (string): The variant is being used by the FormControl component and its children, inherited from FormControl variant prop
• value.onBlur (func): Should be called when the input is blurred
• value.onFocus (func): Should be called when the input is focused
• value.onEmpty (func): Should be called when the input is emptied
• value.onFilled (func): Should be called when the input is filled

Performance

import { GlobalStyles, createTheme, ThemeProvider } from '@mui/material';

const theme = createTheme({
  components: {
    MuiInputBase: {
      defaultProps: {
        disableInjectingGlobalStyles: true,
      },
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles
        styles={{
          '@keyframes mui-auto-fill': { from: { display: 'block' } },
          '@keyframes mui-auto-fill-cancel': { from: { display: 'block' } },
        
      />
      ...
    </ThemeProvider>
  );
}

Limitations

Shrink

<TextField slotProps={{ inputLabel: { shrink: true } }} />

<InputLabel shrink>Count</InputLabel>

Floating label

type="number"

• it allows certain non-numeric characters ('e', '+', '-', '.') and silently discards others
• the functionality of scrolling to increment/decrement the number can cause accidental and hard-to-notice changes
• and more—see Why the GOV.UK Design System team changed the input type for numbers for a more detailed explanation of the limitations of <input type="number">
  :::

Helper text

Integration with 3rd party input libraries

interface InputElement {
  focus(): void;
  value?: string;
}

const MyInputComponent = React.forwardRef((props, ref) => {
  const { component: Component, ...other } = props;

  // implement `InputElement` interface
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      // logic to focus the rendered component from 3rd party belongs here
    },
    // hiding the value e.g. react-stripe-elements
  }));

  // `Component` will be your `SomeThirdPartyComponent` from below
  return <Component {...other} />;
});

// usage
<TextField
  slotProps={{
    input: {
      inputComponent: MyInputComponent,
      inputProps: {
        component: SomeThirdPartyComponent,
      },
    },
  
/>;

Accessibility

<div className="form-control">
  <label for="my-input">Email address</label>
  <input id="my-input" aria-describedby="my-helper-text" />
  <span id="my-helper-text">We'll never share your email.</span>
</div>

• If you are using the TextField component, you just have to provide a unique id unless you're using the TextField only client-side. Until the UI is hydrated TextField without an explicit id will not have associated labels.
• If you are composing the component:

<FormControl>
  <InputLabel htmlFor="my-input">Email address</InputLabel>
  <Input id="my-input" aria-describedby="my-helper-text" />
  <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>

Supplementary projects

• react-hook-form-mui: Material UI and react-hook-form combined.
• formik-material-ui: Bindings for using Material UI with formik.
• mui-rff: Bindings for using Material UI with React Final Form.
• @ui-schema/ds-material Bindings for using Material UI with UI Schema. JSON Schema compatible.