npx shadcn@latest add https://shuip.plvo.dev/r/rhf-password-field.json

Preview

Password inputs require special UX considerations: users need to verify their input while maintaining security. PasswordField solves this with a built-in visibility toggle (Eye/EyeOff icons) that switches between masked and plain text.

The component uses shadcn's InputGroup to position the toggle button inline with the input, avoiding layout shifts. An optional tooltip can be added via the tooltip prop to display password requirements—this appears as an InfoIcon button next to the visibility toggle.

Built-in features

• One-click visibility toggle with Eye/EyeOff icons
• InputGroup positioning for seamless button integration
• Optional tooltip for password requirements or help text
• Zod validation: Native integration for password strength rules

Usage patterns

Common validation pattern for strong passwords:

const schema = z.object({
password: z.string()
  .min(8, 'At least 8 characters required')
  .regex(/[A-Z]/, 'Must include uppercase letter')
  .regex(/[0-9]/, 'Must include number')
  .regex(/[!@#$%^&*]/, 'Must include special character'),
})

const form = useForm({
defaultValues: { password: '' },
resolver: zodResolver(schema),
})

<PasswordField
register={form.register('password')}
label='Password'
tooltip='Must contain: 8+ characters, uppercase, number, special char'
/>

Confirm password with linked validation:

const schema = z.object({
password: z.string().min(8),
confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
message: "Passwords don't match",
path: ['confirmPassword'],
})

<PasswordField
register={form.register('password')}
label='Password'
/>
<PasswordField
register={form.register('confirmPassword')}
label='Confirm Password'
/>

Examples

Props