React Material UI Tutorial - 7 - Text Field

📱 Follow Codevolution

React Material UI Tutorial
Text Field in Material UI

[KeyPairKarma]

I just started learning react. This is by far the best set of tutorials for MUI I’ve found that I entirely understand. Thanks!

[lazyhacker]

For password visibility on and off

const [viewer, setViewer] = useState(false);
const handleVisibility = () => {
setViewer((prev) => !prev);
};
<TextField
label="password"
type={viewer ? "text" : "password"}
InputProps={{
endAdornment: (
<InputAdornment position="end" onClick={handleVisibility}>
{viewer ? <VisibilityOffIcon /> : <VisibilityIcon />}

</InputAdornment>
),
}}
/>

[ojalafsenior]

Well, I got the visibility Icon done. You teaching style is so intuitive and makes learning very enjoyable. You are heaven sent.

[JM-stle]

Thank you for making these well organized tutorials.

[PixelTB]

I started this course today, and I am amazed. I like your teaching style, especially because you give examples of how these components could be used in a real world application. Thank you so much!

[rastapoile]

Dude all of your videos are awesome and very well explained. You're helping me a lot thank you so much !

[surij]

Can't thank you enough for creating this tutorial. MUI has always been hard to learn for me. This tutorial makes it easier.

[andresbeltran]

Visibility exercise: I was able to complete it with useState, returning a boolean for the password prop. Thank you, I learned a lot doing it.

[dsacppracticequestion]

I have successfully implemented password visibility toggler. Thanks for all valuable content that you provided us.

[avijitdam]

import React, { useState } from 'react';

const MuiTextField = () => {
const [showPassword, setShowPassword] = useState(false);

const handleShowPassword = () => {

};

return (
<Stack spacing={4}>
<Stack direction='row' spacing={2}>
<TextField label='Enter Your Name' variant='outlined' />
<TextField label='Enter Your Bio' variant='filled' />
<TextField label='Enter Your Statement' variant='standard' />
</Stack>

<Stack direction='row' spacing={2}>
<TextField label='Enter Your Name' variant='outlined' size='small' color='secondary' required />

<TextField
label='Enter Your Name'
variant='outlined'
size='small'
color='secondary'
helperText='Do not share password with anyone'
/>

<TextField
label='Password'
variant='outlined'
size='small'
color='secondary'
helperText='Do not share password with anyone'
type='password'
/>

<TextField label='Read-only' InputProps={{ readOnly: true }} />
</Stack>

<Stack direction='row' spacing={2}>
<TextField
label='Amount'
InputProps={{
startAdornment: <InputAdornment position='start'>$</InputAdornment>,
}}
/>
<TextField
label='Weight'
InputProps={{
endAdornment: <InputAdornment position='end'>Kg</InputAdornment>,
}}
/>

<TextField
label='Password'
type={showPassword ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<IconButton onClick={handleShowPassword} edge='end'>
{showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
variant='standard'
required
/>
</Stack>
</Stack>
);
};

export default MuiTextField;

[Bettyweb]

I was able to get the password visibility done . Thanks for the tutorial 😊

[DanielRodrigues-bxlr]

So many helpful tips in one video, thanks!

[milindvlogs]

great resource to learn MUI, and yes was able to use the icon as an end adornment for the password field.

[JSSpeaks]

Awesome Job & Well Explained Sir!🤗

[ytpeerz]

Struggled a bit to get the toggle visibility function working, but ended up getting it to work

[coffee]

Thanks had problems using the InputAdorment, now it works, even with the icon! Thanks

[kumuduwijewardhana]

This playlist is very useful. Thank you so much!❤

[xiaotingshao]

I did the exercise and use visible and invisible icons together to toggle the password render

[VijayTamada]

Awesome series!! BTW what is vs code theme name used in this video?

[sokealy]

how to separate label from input? label on top or left input as normal textbox.