WtPassword

Props

v-model:

Prop: value

Event: input

Props:

Name	Required	Type	Default	Example code	Description
modelValue		String		<wt-password v-model="value"></wt-password>	Input value (v-model)
label		String		<wt-password label="Password"></wt-password>	Input label
placeholder		String		<wt-password placeholder="Enter password"></wt-password>	Input placeholder
disabled		Boolean	false	<wt-password disabled></wt-password>	Disable input
required		Boolean	false	<wt-password required></wt-password>	Show required asterisk in label
invalid		Boolean	false	<wt-password invalid></wt-password>	Show invalid state
toggleMask		Boolean	true	<wt-password :toggle-mask="true"></wt-password>	Show toggle button to show/hide password

Events:

Name	Params	Description
update:modelValue	[ { "name": "value", "type": "String" } ]	Emitted when input value changes

Slots:

Name	Scope	Description
label	[ { "name": "label" } ]	Custom label slot

Basic Password

Password

Code

<script setup>
import { ref } from 'vue';

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

<template>
  <wt-password
    v-model="password"
    label="Password"
    placeholder="Enter your password"
  />
</template>

<style scoped lang="scss"></style>