Components / Forms

PasswordInput

A native password field with a localized visibility toggle.

Preview

Install

Run in your project

npx @getweini/cli@latest add password-input

Use cases

Sign in

Use password manager autocomplete while allowing temporary visibility.

Create credentials

Show application-owned password guidance beside a new-password field.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import PasswordInput from './components/ui/password-input/PasswordInput.vue'
const password = ref('')
const messages = { showPassword: 'Show password', hidePassword: 'Hide password' }
</script>

<template>
  <label for="account-password">Password</label>
  <PasswordInput
    id="account-password"
    v-model="password"
    name="password"
    autocomplete="current-password"
    :messages="messages"
  />
</template>

More examples

Current password

The visibility button keeps focus in the field.

Current password

<script setup lang="ts">
import { ref } from 'vue'
import PasswordInput from './components/ui/password-input/PasswordInput.vue'
const password = ref('')
const messages = { showPassword: 'Show password', hidePassword: 'Hide password' }
</script>
<template>
  <label for="password">Password</label>
  <PasswordInput id="password" v-model="password" name="password" autocomplete="current-password" :messages="messages" required />
</template>

New password with help

The application supplies its own password rules.

New password with help

<script setup lang="ts">
import { ref } from 'vue'
import PasswordInput from './components/ui/password-input/PasswordInput.vue'
const password = ref('')
const messages = { showPassword: 'Show password', hidePassword: 'Hide password' }
</script>
<template>
  <label for="new-password">New password</label>
  <PasswordInput id="new-password" v-model="password" autocomplete="new-password" :messages="messages" aria-describedby="password-help" required />
  <p id="password-help">Use at least 12 characters.</p>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for PasswordInput
Name	Type	Default or requirement
`v-model`	string \| undefined	undefined
`messages`	{ showPassword; hidePassword }	required
`id`	string	generated
`size`	sm \| md \| lg	md
`invalid / disabled / readonly`	boolean	false
`defaultVisible`	boolean	false

The native input handles validation, autocomplete, focus, and form submission. The trailing button changes visibility without moving focus. Connect your help and error text with aria-describedby.

Implementation notes

Visibility changes the input type; it does not validate password strength.
Use current-password or new-password autocomplete to help password managers.

Accessibility and localization

Translate both visibility action labels and associate any rules or errors with aria-describedby.