Password Field

Source

<script setup lang="ts">
import { ref } from "vue";
import MtPasswordField from "@shopware-ag/meteor-component-library/MtPasswordField";

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

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

Usage

Password Field is a masked input for passwords, secrets, or other credential input that can optionally reveal its value when users need to confirm briefly what they typed. Use it in sign-in, account setup, or credential update flows.

import { MtPasswordField } from "@shopware-ag/meteor-component-library";

Examples

Disabled

<script setup lang="ts">
import MtPasswordField from "@shopware-ag/meteor-component-library/MtPasswordField";
</script>

<template>
  <mt-password-field label="Password" disabled model-value="hunter2" />
</template>

Error

<script setup lang="ts">
import { ref } from "vue";
import MtPasswordField from "@shopware-ag/meteor-component-library/MtPasswordField";

const value = ref("");
</script>

<template>
  <mt-password-field
    v-model="value"
    label="Password"
    placeholder="Enter a password"
    :error="{ code: 0, detail: 'Password is required.' }"
  />
</template>

Hint

<script setup lang="ts">
import { ref } from "vue";
import MtPasswordField from "@shopware-ag/meteor-component-library/MtPasswordField";

const value = ref("");
</script>

<template>
  <mt-password-field v-model="value" label="Password" placeholder="Enter a password">
    <template #hint>Use at least 8 characters.</template>
  </mt-password-field>
</template>

API reference

Props

Prop	Type	Default
`label`	`string \| null`	`null`
`placeholder`	`string`	`""`
`disabled`	`boolean`
`error`	`{ code: number; detail: string; } \| null`	`null`
`hint`	`string \| null`	`null`
`toggable`	`boolean`	`true`
`name`	`string`	`undefined`
`required`	`boolean`	`false`
`help-text`	`string`	`""`
`size`	`"default" \| "small"`	`"default"`
`is-inherited`	`boolean`	`false`
`is-inheritance-field`	`boolean`	`false`
`disable-inheritance-toggle`	`boolean`	`false`
`id-suffix`	`string`	`""`
`model-value`	`string`

Events

Event	Payload
`update:modelValue`	`[value: string \| undefined]`
`change`	`[value: string \| undefined]`
`inheritance-remove`	`[value: unknown]`
`inheritance-restore`	`[value: unknown]`
`submit`	`[]`

Slots

Slot	Bindings
`prefix`	`any`
`suffix`	`any`
`hint`	`any`

Best practices

Use a clear label such as Password or New password.
Add help text or hint content when users need password rules.
Keep the visibility toggle enabled when it helps users avoid typing mistakes.

Don't

Do not use Password Field for non-sensitive text.
Do not rely on placeholder text as the only instruction.
Do not hide password requirements if the field enforces them.

Behavior

Password Field masks input by default and can reveal the value with the visibility toggle when toggable is enabled.
The component supports shared field patterns such as hint, helpText, error, and inheritance handling.
It emits submit on Enter, which can help in credential flows.

Accessibility

Always provide a visible label so users know what credential is expected.
Make sure the show or hide password control has a clear accessible name, especially if the field appears more than once on a page.

Text Field: when the value is not sensitive and does not need reveal behavior.

Edit this pageorReport an issue

Pagination

A control for moving through larger result sets one page at a time.

Popover

An experimental floating surface that reveals contextual settings and nested option views from a trigger.