Password input with visibility toggle button and tooltip. Wraps Input with a show/hide eye icon.
| Name | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "lg" | default | Size variant (matches Input sizes) |
| placeholder | string | — | Placeholder text |
| disabled | boolean | — | Disable input and toggle |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.input-background | var(--input-background) | Inherits from Input component | |
| Border | color.input | var(--input) | Inherits from Input component | |
| Toggle Icon | color.muted-foreground | var(--muted-foreground) | Eye icon color (default state) | |
| Toggle Icon (hover) | color.foreground | var(--foreground) | Eye icon color on hover | |
| Hover Background | color.accent | var(--accent) | Background on toggle button hover | |
| Focus Ring | color.ring | var(--ring) | Focus indicator on toggle button | |
| Tooltip Background | color.tooltip | var(--tooltip) | Tooltip background from Tooltip component | |
| Tooltip Text | color.tooltip-foreground | var(--tooltip-foreground) | Tooltip text from Tooltip component |
Available size variants matching the Input component.
<PasswordInput size="sm" placeholder="••••••••" /> <PasswordInput placeholder="••••••••" /> <PasswordInput size="lg" placeholder="••••••••" />
Interactive and disabled states.
<PasswordInput placeholder="Enter password" /> <PasswordInput placeholder="Disabled" disabled />