Password Input
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 |
|---|---|---|---|
appearance | "standard" | "modern" | - | - |
as | JSX.IntrinsicElements | - | - |
family | "body" | "display" | "mono" | Partial<Record<Breakpoint, "body" | "display" | "mono">> | - | - |
hidePasswordText | string | Hide password | - |
noCapsize | boolean | - | - |
showPasswordText | string | Show password | - |
size | "sm" | "md" | "lg" | "xl" | md | - |
state | "error" | - | - |
theme | "white" | "grey" | - | - |
weight | "bold" | "normal" | Partial<Record<Breakpoint, "bold" | "normal">> | - | - |