Component
PasswordInput
A password field with a reveal toggle, focus return, and reset-on-submit.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/password-inputExamples
Live previews render through the docs app's PandaCSS codegen.
<PasswordInput aria-label="Password" placeholder="Enter your password" />
<PasswordInput aria-label="Password" defaultValue="hunter2" invalid />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `align` | `InputAlign` | No | - | - |
| `className` | `string` | No | - | Root className. |
| `defaultVisible` | `boolean` | No | - | Start the field revealed (uncontrolled). Defaults to hidden. |
| `showPasswordLabel` | `string` | No | - | Accessible label for the reveal button while the password is hidden. |
| `hidePasswordLabel` | `string` | No | - | Accessible label for the reveal button while the password is shown. |
| `invalid` | `boolean` | No | - | - |
| `resetOnSubmit` | `boolean` | No | - | Re-hide the password when the surrounding form submits. Defaults to true. |
| `rootProps` | `Omit<InputRootProps, 'children' \ | 'className' \ | 'disabled' \ | 'size'>` |
| `size` | `InputSize` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/password-input.json`
- Recipe: ``
- Files: `src/components/ui/password-input.tsx`