Text Field
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Use the CustomTextField component for the custom variant.
Use variant={'filled' | 'standard'} prop for different
text fields.
Standard form attributes are supported e.g. required,
disabled, type, etc. as well as
helperText which is used to give context about a field's
input, such as how the input will be used.
helper text
Some important text
Manage value prop with the help of a state for controlled
TextField and use defaultChecked prop for
uncontrolled TextField.
Use size prop for different sizes of text fields.
color={'secondary' | 'success' | 'error' | 'warning' | 'info'}
prop changes the highlight color of the text field when focused.
There are multiple ways to display an icon with a text field.
The main way is with an InputAdornment. This can be used to
add a prefix, a suffix or an action to an input. For instance, you can
use an icon button to hide or reveal the password.
fullWidth can be used to make the input take up the full
width of its container.
margin prop can be used to alter the vertical spacing of
inputs. Using none
(default) doesn't apply margins to the FormControl whereas
dense
and
normal do.
Some important text
Some important text
Some important text
The error prop toggles the error state, the
helperText prop can then be used to provide feedback to the
user about the error.