Text Field

Text fields let users enter and edit text.

Migration

Codemod

Run this codemod in your project's terminal:

npx @mui/codemod v5.0.0/joy-text-field-to-input <path>

It will go through all files under <path> and replace <TextField /> with the <Input /> composition.

Manual

Replace the TextField with composition:

-import TextField from '@mui/joy/TextField';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';

-<TextField
-  id="Id"
-  label="Label"
-  placeholder="Placeholder"
-  helperText="Help!"
-  name="Name"
-  type="tel"
-  autoComplete="on"
-  autoFocus
-  error
-  required
-  fullWidth
-  defaultValue="DefaultValue"
-  size="sm"
-  color="primary"
-  variant="outlined"
-/>
+<FormControl
+  id="Id"
+  required
+  size="sm"
+  color="primary">
+  <FormLabel>
+    Label
+  </FormLabel>
+  <JoyInput
+    placeholder="Placeholder"
+    name="Name"
+    type="tel"
+    autoComplete="on"
+    autoFocus
+    error
+    fullWidth
+    defaultValue="DefaultValue"
+    variant="outlined" />
+  <FormHelperText>
+    Help!
+  </FormHelperText>
+</FormControl>

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<TextField />