An input for passwords with visibility toggle functionality

PasswordInput wraps Input with a content visibility toggle, triggered by interaction with an eye Icon.

For most use cases it is better to use PasswordField, which includes a label, hooks into our Form component and shows validation errors where appropriate. Only use PasswordInput if you need to compose something that behaves differently to the PasswordField and be sure to include a label manually.

<PasswordInput name="password" />

API Reference

PropTypeDefaultRequired
size
"sm" | "md"
md

-

state
"error"

-

-

namestring

-

cssCSSProperties

-

-

asJSX.IntrinsicElements

-

-

hidePasswordText
string
Hide password

-

showPasswordText
string
Show password

-