Component

Vue Password Input Component

<DomPasswordInput>

A styled password field with show/hide control, strength feedback, and an optional compromised-password warning.

Playground

Try every prop live

Password input playground

Toggle the compromised state to preview breach messaging.

Create password

Okay password (Time to crack: 2 thousand years)

Use a strong password.

Properties

Control props

Label

Visible field label.

Description

Optional helper copy below the label.

Placeholder

Placeholder text shown before entry.

Show StrengthShow a strength meter below the field.

CompromisedShow a warning when the current password has been found in a breach.

Check CompromisedCheck the password against the Have I Been Pwned Pwned Passwords API.

Compromised Check Delay

Delay in milliseconds before checking the Pwned Passwords API after typing.

Compromised Message

Guidance shown when compromised is true.

Compromised Title

Heading shown above the compromised-password guidance.

Field props

Value

Current field value.

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or hide chrome while keeping form state wiring.

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomPasswordInput } from '@getdom/studio';

const data = reactive({
		"modelValue": "correct-horse",
		"id": "",
		"name": "",
		"label": "Create password",
		"description": "Use a strong password.",
		"placeholder": "Enter password",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"showStrength": true,
		"compromised": false,
		"checkCompromised": false,
		"compromisedCheckDelay": 600,
		"compromisedMessage": "Choose a different password that you have not used elsewhere.",
		"compromisedTitle": "Password found in a data breach"
	});
</script>

<template>
	<DomPasswordInput
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Strength and breach warning

The field keeps the native input behaviour, with a visibility toggle and lightweight strength scoring.

Create password

Okay password (Time to crack: 2 thousand years)

Use at least 12 characters, with a mix of symbols and numbers.

Signup.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomPasswordInput } from '@getdom/studio';

const password = ref('correct-horse');
</script>

<template>
	<div class="w-full max-w-sm">
		<DomPasswordInput
			v-model="password"
			label="Create password"
			description="Use at least 12 characters, with a mix of symbols and numbers."
			placeholder="Choose a password"
			:check-compromised="true"
		/>
	</div>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`label`	string	string	'Password'	Visible field label.
`description`	string	string	''	Optional helper copy below the label.
`placeholder`	string	string	'Enter password'	Placeholder text shown before entry.
`showStrength`	boolean	boolean	true	Show a strength meter below the field.
`compromised`	boolean	boolean	false	Show a warning when the current password has been found in a breach.
`checkCompromised`	boolean	boolean	false	Check the password against the Have I Been Pwned Pwned Passwords API.
`compromisedCheckDelay`	number	number	600	Delay in milliseconds before checking the Pwned Passwords API after typing.
`compromisedMessage`	string	string	'Choose a different password that you have not used elsewhere.'	Guidance shown when compromised is true.
`compromisedTitle`	string	string	'Password found in a data breach'	Heading shown above the compromised-password guidance.

Field props

Name	Type	TS	Default	Description
`modelValue`	any	any	''	Current field value.
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` ts `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	[]	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| 'none' \| false	string	'field'	Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Password input.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	string	Fired when the password text changes.
@focus	—	—
@blur	—	—

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.