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 <span class="token operator">&lt;</span>path<span class="token operator">></span>

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

Manual

Replace the TextField with composition:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import TextField from '@mui/joy/TextField';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import FormControl from '@mui/joy/FormControl';
</span><span class="token prefix inserted">+</span><span class="token line">import FormLabel from '@mui/joy/FormLabel';
</span><span class="token prefix inserted">+</span><span class="token line">import FormHelperText from '@mui/joy/FormHelperText';
</span><span class="token prefix inserted">+</span><span class="token line">import Input from '@mui/joy/Input';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">&lt;TextField
</span><span class="token prefix deleted">-</span><span class="token line">  id="Id"
</span><span class="token prefix deleted">-</span><span class="token line">  label="Label"
</span><span class="token prefix deleted">-</span><span class="token line">  placeholder="Placeholder"
</span><span class="token prefix deleted">-</span><span class="token line">  helperText="Help!"
</span><span class="token prefix deleted">-</span><span class="token line">  name="Name"
</span><span class="token prefix deleted">-</span><span class="token line">  type="tel"
</span><span class="token prefix deleted">-</span><span class="token line">  autoComplete="on"
</span><span class="token prefix deleted">-</span><span class="token line">  autoFocus
</span><span class="token prefix deleted">-</span><span class="token line">  error
</span><span class="token prefix deleted">-</span><span class="token line">  required
</span><span class="token prefix deleted">-</span><span class="token line">  fullWidth
</span><span class="token prefix deleted">-</span><span class="token line">  defaultValue="DefaultValue"
</span><span class="token prefix deleted">-</span><span class="token line">  size="sm"
</span><span class="token prefix deleted">-</span><span class="token line">  color="primary"
</span><span class="token prefix deleted">-</span><span class="token line">  variant="outlined"
</span><span class="token prefix deleted">-</span><span class="token line">/>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">&lt;FormControl
</span><span class="token prefix inserted">+</span><span class="token line">  id="Id"
</span><span class="token prefix inserted">+</span><span class="token line">  required
</span><span class="token prefix inserted">+</span><span class="token line">  size="sm"
</span><span class="token prefix inserted">+</span><span class="token line">  color="primary">
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;FormLabel>
</span><span class="token prefix inserted">+</span><span class="token line">    Label
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;/FormLabel>
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;Input
</span><span class="token prefix inserted">+</span><span class="token line">    placeholder="Placeholder"
</span><span class="token prefix inserted">+</span><span class="token line">    name="Name"
</span><span class="token prefix inserted">+</span><span class="token line">    type="tel"
</span><span class="token prefix inserted">+</span><span class="token line">    autoComplete="on"
</span><span class="token prefix inserted">+</span><span class="token line">    autoFocus
</span><span class="token prefix inserted">+</span><span class="token line">    error
</span><span class="token prefix inserted">+</span><span class="token line">    fullWidth
</span><span class="token prefix inserted">+</span><span class="token line">    defaultValue="DefaultValue"
</span><span class="token prefix inserted">+</span><span class="token line">    variant="outlined" />
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;FormHelperText>
</span><span class="token prefix inserted">+</span><span class="token line">    Help!
</span><span class="token prefix inserted">+</span><span class="token line">  &lt;/FormHelperText>
</span><span class="token prefix inserted">+</span><span class="token line">&lt;/FormControl></span></span>