Component
Password Input
A password field with a built-in reveal/hide toggle, layered on the styled @refraction-ui/react-input. Supports the same validationState affordance.
Basic
A password input with a show/hide toggle.
A password field with a built-in show/hide toggle.
Installation
$
pnpm add @refraction-ui/react-password-inputUsage
tsx
import { PasswordInput } from '@refraction-ui/react-password-input'
export function SignInForm() {
return (
<form className="space-y-4">
<PasswordInput placeholder="Password" minLength={8} />
<PasswordInput
placeholder="Confirm password"
validationState="invalid"
/>
</form>
)
}With validation
The validationState prop tints the border and wires aria-invalid. It is shared with the base Input.
Green tint and a check icon signal a passing field.
Destructive tint signals a validation error.
The same validationState affordance is available on the base Input.
Reveal toggle
The toggle is accessible, with customizable labels.
The toggle button is keyboard accessible and exposes its state via aria-pressed. Labels are customizable.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
validationState | 'valid' | 'invalid' | -- | Validation affordance — tints the border and wires aria-invalid. |
revealLabel | string | 'Show password' | Accessible label for the reveal (show password) action. |
hideLabel | string | 'Hide password' | Accessible label for the hide action. |
size | 'sm' | 'default' | 'lg' | 'default' | Size of the input. |
minLength | number | -- | Minimum length, forwarded to the underlying input. |
disabled | boolean | false | Disables the input. |
placeholder | string | -- | Placeholder text. |
className | string | -- | Additional CSS classes applied to the input. |