Skip to main content
The MtPasswordField component provides a secure input for passwords with optional visibility toggle.

​
Import

import { MtPasswordField } from '@meteroid/component-library';

​
Props

​
modelValue
string | undefined
v-model binding for the password value.
​
label
string
A label for the password field.
​
placeholder
string
default:"''"
Placeholder text for the input.
​
disabled
boolean
default:"false"
Disables the password field.
​
toggable
boolean
default:"true"
Enables the password visibility toggle button.
​
required
boolean
default:"false"
Marks the field as required.
​
name
string
The name attribute for the input.
​
helpText
string
Help text with additional information.
​
hint
string
Deprecated: Use slot “hint” instead.
​
error
object
Error object with code and detail properties.
​
size
'small' | 'default'
default:"'default'"
The size of the field.
​
isInherited
boolean
default:"false"
Toggles inheritance visualization.
​
isInheritanceField
boolean
default:"false"
Determines if the field is inheritable.
​
disableInheritanceToggle
boolean
default:"false"
Disables the inheritance toggle.

​
Events

​
update:modelValue
(value: string | undefined) => void
Emitted when the password value changes.
​
change
(value: string | undefined) => void
Emitted when input loses focus.
​
submit
() => void
Emitted when Enter key is pressed.
​
inheritance-restore
(value: unknown) => void
Emitted when inheritance is restored.
​
inheritance-remove
(value: unknown) => void
Emitted when inheritance is removed.

​
Slots

​
prefix
slot
Content before the input.
​
suffix
slot
Content after the input.
​
hint
slot
Additional hint content.

​
Usage

​
Basic Password Field

<script setup>
import { ref } from 'vue';
const password = ref('');
</script>

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

​
Without Visibility Toggle

<template>
  <mt-password-field 
    v-model="password"
    label="Password"
    :toggable="false"
  />
</template>

​
With Submit on Enter

<script setup>
const handleSubmit = () => {
  console.log('Form submitted');
};
</script>

<template>
  <mt-password-field 
    v-model="password"
    label="Password"
    @submit="handleSubmit"
  />
</template>

​
Password Confirmation

<script setup>
import { ref, computed } from 'vue';
const password = ref('');
const confirmPassword = ref('');

const passwordError = computed(() => {
  if (confirmPassword.value && password.value !== confirmPassword.value) {
    return { detail: 'Passwords do not match' };
  }
  return null;
});
</script>

<template>
  <div>
    <mt-password-field 
      v-model="password"
      label="Password"
      required
    />
    <mt-password-field 
      v-model="confirmPassword"
      label="Confirm password"
      :error="passwordError"
      required
    />
  </div>
</template>

​
Small Size

<template>
  <mt-password-field 
    v-model="password"
    label="Password"
    size="small"
  />
</template>

​
Accessibility

  • Uses native password input type
  • Visibility toggle has descriptive aria-label (“Show password” / “Hide password”)
  • Label properly associated with input
  • Error messages accessible via ARIA
  • Focus visible outline for keyboard navigation
  • Enter key triggers submit event

Build docs developers (and LLMs) love

Get started for freeTalk to us