Docs/PasswordInput

PasswordInput

Password input with built-in visibility toggle button.

Usage

tsx

1import { PasswordInput, Label } from '@storm-ds/ui'
2
3<div className="space-y-2">
4  <Label htmlFor="pw">Password</Label>
5  <PasswordInput id="pw" placeholder="Enter password" />
6</div>

Basic

tsx

1<PasswordInput placeholder="Enter password" />

Sizes

tsx

1<PasswordInput size="sm" placeholder="Small" />
2<PasswordInput size="md" placeholder="Medium" />
3<PasswordInput size="lg" placeholder="Large" />

Error State

tsx

1<PasswordInput error placeholder="Invalid password" />

Props

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Input size
error	boolean	false	Shows error styling
placeholder	string	-	Placeholder text
className	string	-	Custom classes

Use with AI

Create a password field using Storm UI's PasswordInput. Import: `import { PasswordInput } from '@storm-ds/ui'`. Requires 'use client'. Props: size ('sm'|'md'|'lg'), error (boolean for red border), plus standard input attributes (except type and size). Has built-in eye toggle to show/hide password. Example: `<PasswordInput placeholder="Enter password" />`

InputOTP

Field