React Material UI Tutorial - 7 - Text Field

[@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!

[@ojalafsenior4757]

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

[@lazyhacker8288]

For password visibility on and off
const [viewer, setViewer] = useState(false);
const handleVisibility = () => {
setViewer((prev) => !prev);
};

[@engkunasya]

Thanks lazy genius

[@LinuxForLife]

Do NOT forget to import:
import VisibilityIcon from "@mui/icons-material/Visibility";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
😉

[@santiagoleklere6103]

Thanks! I had to use the icons in the most recent way and i went on and implemented IconButton for a slight better look.

[@JM-st1le]

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!

[@andresbeltran5245]

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.

[@dsacppracticequestion1123]

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

[@rastapoile]

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

[@surij8376]

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

[@milindvlogs]

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

[@Betty4web]

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

[@coffee80119]

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

[@ytpeerz]

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

[@DanielRodrigues-bx6lr]

So many helpful tips in one video, thanks!

[@VijayTamada]

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

[@avijitdam1998]

import React, { useState } from 'react';
import { Stack, TextField, InputAdornment, IconButton } from '@mui/material';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
const MuiTextField = () => {
const [showPassword, setShowPassword] = useState(false);
const handleShowPassword = () => {
setShowPassword(!showPassword);
};
return (


















);
};
export default MuiTextField;

[@kumuduwijewardhana9879]

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

[@ithisrinu9593]

awsome explaining

[@pranjalgogoigaming-1209]

Nice explanation

[@MohamedAshraf-wh8ig]

when i do rtl for text field label still in dir ltr why that i give this value for layout for full website

[@xiaotingshao3689]

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

[@royjincalipayan1760]

is the Textfield default position is absolute ?

[@JSSpeaks]

Awesome Job & Well Explained Sir!🤗

[@sokealy5003]

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

[@umergillani5046]

Please make a playlist on MERN STACK project from scratch

[@amitbhattacharya356]

How to prevent the error in TextField on page load?

[@pavan305]

Coolest one!

[@papa_ethan]

Adornment does not work now. Please confirm this.

[@mrrishiraj88]

Thanks

[@sangram597]

Thanks sir

[@caninelover]

thank you so much

[@rohithsinghthakur968]

[@whateverzdred]

I did the password exercise, here's the code:
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'
import { useState } from 'react'
const MuiTextFIeld = () = {
const [passwordType, setPasswordType] = useState('password')
const handleClick = () => {
if (passwordType === 'password') {
setPasswordType('text')
} else {
setPasswordType('password')
}
}
return (
)
}
export default MuiTextField

[@sxp6200]

Is there a way to customize the text field component so that inputs look like conventional input fields? i.e. label above text field, flush left.

[@alexjones420]

There are other input components you could use. Check out the OutlinedInput component.

[@taufiquechaudhary7112]

[@crashcoding6667]

Done!

[@Arnip_Italiya]

import CurrencyRupeeIcon from '@mui/icons-material/CurrencyRupee';
then tag replace with $