npx shadcn@latest add https://shuip.plvo.dev/r/tsf-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
• Linked field validation via onChangeListenTo for confirmation fields

Password security patterns

Common validation pattern for strong passwords:

<PasswordField
  form={form}
  name='password'
  label='Password'
  tooltip='Must contain: 8+ characters, uppercase, number, special char'
  formProps={{
    validators: {
      onChange: ({ value }) => {
        if (value.length < 8) return 'At least 8 characters required'
        if (!/[A-Z]/.test(value)) return 'Must include uppercase letter'
        if (!/[0-9]/.test(value)) return 'Must include number'
        if (!/[!@#$%^&*]/.test(value)) return 'Must include special character'
        return undefined
      }
    }
  }}
/>

Confirm password with linked validation:

<PasswordField
  form={form}
  name='confirmPassword'
  label='Confirm Password'
  formProps={{
    validators: {
      onChangeListenTo: ['password'],
      onChange: ({ value, fieldApi }) => {
        const password = fieldApi.form.getFieldValue('password')
        return value !== password ? 'Passwords do not match' : undefined
      }
    }
  }}
/>

Examples

Props