PasswordInput

Password with reveal toggle and meter

A password field with a reveal button. Add meter where someone is making a password (sign-up, change password): the field then asks password managers for a new one.

Basic

Password

Fair

<script setup lang="ts">
import { ref } from "vue";
import { BlessLabel, BlessPasswordInput } from "blessing-ui";
const pw = ref("Megumi1");
</script>

<template>
  <div class="col">
    <BlessLabel for="d-pw">Password</BlessLabel>
    <BlessPasswordInput id="d-pw" v-model="pw" meter placeholder="at least 8 characters" />
  </div>
</template>

• autocomplete is current-password, or new-password with meter; pass your own to override.
• The reveal button keeps one name (showLabel) and says whether it's on by its pressed state.
• Label it with a Field like any input.

Usage

import { BlessPasswordInput } from "blessing-ui";

API

Props

Name	Type	Default	Description
meter	boolean	—	show the strength meter under the field
showLabel	string	"Show password"	the reveal button's name; its pressed state says whether it's showing
modelValue	string	""

Events

Name	Payload	Description
update:modelValue	[value: string]