Material-UI hide input & add min/max character length

Question

I have a text input field and a sign up button. Since it's a password the user is going to enter in the field I want the input to be hidden. Any ideas on how to implement this feature?

I also want the field to be sort of disabled if the length of the password is less than 5 characters and longer than 12. (UPDATE: SOLVED IN BACKEND!)

I would be able to figure out at least the min and max length if I was using ''normal'' frontend styling, but I'm trying out Material UI for the first time and I can't really find the right information on how to make this work now.

<TextField
 id="Password"
 label="Password"
 value={password}    
 onChange={handlePasswordChange}
 variant="outlined"
/>

<Button variant="contained" color="primary">
   Sign up!
 </Button>

Answer 1

Add the type attribute like this:

<TextField
 id="Password"
 label="Password"
 type="password"
 value={password}    
 onChange={handlePasswordChange}
 variant="outlined"
/>