Text Field
Text fields let users enter and edit text.
Migration
Codemod
Run this codemod in your project's terminal:
npx @mui/codemod@latest 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>
+ <Input
+ placeholder="Placeholder"
+ name="Name"
+ type="tel"
+ autoComplete="on"
+ autoFocus
+ error
+ fullWidth
+ defaultValue="DefaultValue"
+ variant="outlined" />
+ <FormHelperText>
+ Help!
+ </FormHelperText>
+</FormControl>
Unstyled
Use the Base UI Text Field for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.