005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
1.8 KiB
1.8 KiB
productId, title, githubLabel
| productId | title | githubLabel |
|---|---|---|
| joy-ui | React Text Field component | scope: text field |
Text Field
Text fields let users enter and edit text.
:::warning
TextField component has been removed in @mui/joy@5.0.0-alpha.63. We recommend using Input, FormControl and FormLabel instead.
To learn more why it has been removed, visit the RFC. :::
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>