PasswordInput

The PasswordInput is a special type of text input that hides the entered text.

Example

import { PasswordInput } from '@amalgamaco/embassy-ui';

<PasswordInput placeholder="Enter your password" width="300px" />

Props

Besides the props from TextInput, the PasswordInput has the following props:

showPasswordIcon

The icon to show the password. Defaults to UIKitIcon's eye icon.

TYPE	REQUIRED
JSX.Element	No



<PasswordInput 
    placeholder="Enter your password"
    width="300px" 
    showPasswordIcon={<Icon as={Feather} name="unlock"/>}
/>

hidePasswordIcon

The icon to hide the password. Defaults to UIKitIcon's eye-off icon.

TYPE	REQUIRED
JSX.Element	No

<PasswordInput 
    placeholder="Enter your password"
    width="300px" 
    hidePasswordIcon={<Icon as={Feather} name="lock"/>}
/>

defaultSecure

Whether the password is hidden or not by default.

TYPE	REQUIRED	DEFAULT
boolean	No	true

<VStack space="4">
    <PasswordInput 
        placeholder="Your password will be visible" 
        width="300px" 
        defaultSecure={false}
    />
    <PasswordInput
        placeholder="Your password will not be visible" 
        width="300px"
    />
</VStack>

isNewPassword (iOS only)

For iOS 12+ it sets the textContentType prop to newPassword indicating it's a new password input the user may want to save in the keychain. You can read more about it in the textContentType prop docs.

info

If you set this prop to true remember to check also the passwordRules prop in order to indicate a set of rules the new password must comply with.

TYPE	REQUIRED	DEFAULT
boolean	No	false

<PasswordInput 
    placeholder="Your password will be visible" 
    width="300px" 
    isNewPassword
/>

Pseudo props

The PasswordInput accepts the same pseudo props as TextInput. See the TextInput docs for more info.