<script setup lang="ts">
import { PasswordField, PasswordFieldInput, PasswordFieldToggle } from "@/components/password-field";
import { ref } from "vue";
const password = ref("");
</script>
<template>
<PasswordField v-model="password" class="w-72">
<PasswordFieldInput placeholder="Enter your password" />
<PasswordFieldToggle />
</PasswordField>
</template>
Features
- Reset on click outside — Password visibility resets to hidden when clicking outside the field
- Show/hide password — Toggle password visibility with a button
Installation
Install from the Vuzeno registry with the shadcn-vue CLI:
bunx --bun shadcn-vue@latest add https://vuzeno.com/r/password-field.json
API Reference
| Prop | Type | Default |
|---|---|---|
modelValue | string | — |
disabled | boolean | false |
type | "text" | "password" | — |
defaultType | "text" | "password" | "password" |
resetOnClickOutside | boolean | true |