logo

PasswordInput

A styled password input ready to be used containing all input attributes. It is responsible and has validations by default.

Props:

showsIcon

Description: Define if icons will be rendered. Type: Boolean.

passwordIsVisible

Description: Define if password can be visible. Type: Boolean.

togglePassword

Description: Toggle between visible and hidden password. Type: Function.

inputStyle

Description: Input style. Type: CSS Properties.

inputClassName

Description: Input className. Type: String.

iconStyle

Description: Icon style. Type: CSS Properties.

iconClassName

Description: Icon className. Type: String.

Code const [passwordVisibility, setPasswordVisibility] = useState(false)
function togglePassword() { setPasswordVisibility(!passwordVisibility) }
<PasswordInputComponent placeholder='your password' showsIcon passwordIsVisible={passwordVisibility} togglePassword={togglePassword} />

PabloSilvaDev - © Copyright 2022