Password Field

Password input with a visibility toggle, Caps Lock detection, and a pluggable strength meter.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { PasswordField, PasswordFieldInput, PasswordFieldToggle } from "@vizejs/ui/password-field";

Or copy the source into your project with vize lib pull password-field (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- New-password field with a visibility toggle, Caps Lock warning, and strength meter. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import {
  PasswordField,
  PasswordFieldInput,
  PasswordFieldToggle,
  estimatePasswordStrength,
} from "@vizejs/ui/password-field";

const password = ref("");
const inputId = useId();
const strengthId = useId();
</script>

<template>
  <div>
    <label :for="inputId">New password</label>
    <PasswordField
      :id="inputId"
      v-slot="{ capsLock, strength }"
      v-model="password"
      name="password"
      autocomplete="new-password"
      :evaluate-strength="estimatePasswordStrength"
      :aria-describedby="strengthId"
    >
      <PasswordFieldInput />
      <PasswordFieldToggle v-slot="{ visible }">{{
        visible ? "Hide" : "Show"
      }}</PasswordFieldToggle>
      <meter aria-label="Password strength" :min="0" :max="4" :value="strength?.score ?? 0"></meter>
      <p :id="strengthId">Strength: {{ strength?.label ?? "none" }}</p>
      <p v-if="capsLock" role="status">Caps Lock is on.</p>
    </PasswordField>
  </div>
</template>

API

PasswordField<Strength>

Source: src/families/form/password-field/password-field.vue

Props

Events

Slots

Exposed

PasswordFieldInput

Source: src/families/form/password-field/password-field-input.vue

Props

PasswordFieldToggle

Source: src/families/form/password-field/password-field-toggle.vue

Props

Slots

Behavior

Normative state x input -> outcome table for password-field.vue, password-field-input.vue, and password-field-toggle.vue (@vizejs/ui/password-field). The root is generic over the strength hook's return type. Every row is proven by the named test in password-field.test.ts or password-field-ssr.test.ts; compile-only assertions live in password-field.types.test-d.ts.

Public extension contract

The subpath is tree-shakable and ships no CSS; those package contracts are pinned by distribution.test.ts, check:size, and check:tree-shaking.