Password Input

View source Report an issue Edit this page

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

Prop	Type	Default	Required
`size`	`"sm"` \| `"md"`	`md`	-
`state`	`"error"`	-	-
`name`	`string`	-
`css`	`CSSProperties`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`hidePasswordText`	`string`	`Hide password`	-
`showPasswordText`	`string`	`Show password`	-