npx volt-vue add Password
import Password from '@/volt/Password.vue';
Password is used with the v-model property for two-way value binding.
<template>
<div class="card flex justify-center">
<Password v-model="value" :feedback="false" />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
Strength meter is displayed as a popup while a value is being entered.
<template>
<div class="card flex justify-center">
<Password v-model="value" />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
Labels are translated at component level by promptLabel, weakLabel, mediumLabel and strongLabel properties. In order to apply global translations for all Password components in the application, refer to the locale documentation.
<template>
<div class="card flex justify-center">
<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
When toggleMask is present, an icon is displayed to show the value as plain text.
<template>
<div class="card flex justify-center">
<Password v-model="value" toggleMask />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
3 slots are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.
<template>
<div class="card flex justify-center">
<Password v-model="value">
<template #header>
<div class="font-semibold text-xm mb-4">Pick a password</div>
</template>
<template #footer>
<Divider />
<ul class="pl-2 my-0 leading-normal">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</template>
</Password>
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<template>
<div class="card flex justify-center">
<Password v-model="value" :feedback="false" variant="filled" />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
Password provides small and large sizes as alternatives to the base.
<template>
<div class="card flex flex-col items-center gap-4">
<Password v-model="value1" size="small" placeholder="Small" />
<Password v-model="value2" placeholder="Normal" />
<Password v-model="value3" size="large" placeholder="Large" />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
<template>
<div class="card flex flex-wrap justify-center gap-4">
<Password v-model="value" :invalid="!value" placeholder="Password" />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
When disabled is present, the element cannot be edited and focused.
<template>
<div class="card flex justify-center">
<Password disabled placeholder="Disabled" />
</div>
</template>
<script setup lang="ts">
import Password from '@/volt/Password.vue';
</script>