Email Field

Source

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

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

<template>
  <mt-email-field v-model="email" label="Email address" />
</template>

Usage

Email Field is a form input for entering a single email address. Use it when the value should be an email address and browser email keyboards, autofill, or native validation improve the input flow, such as account settings, contact forms, invitations, or other flows that store one address.

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

Examples

Disabled

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

<template>
  <mt-email-field label="Email address" disabled model-value="name@example.com" />
</template>

Error

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

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

<template>
  <mt-email-field
    v-model="value"
    label="Email address"
    placeholder="name@example.com"
    :error="{ detail: 'Enter a valid email address.' }"
  />
</template>

Hint

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

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

<template>
  <mt-email-field v-model="value" label="Email address" placeholder="name@example.com">
    <template #hint>We never share your email.</template>
  </mt-email-field>
</template>

API reference

Props

Prop	Type	Default
`disabled`	`boolean`
`required`	`boolean`
`model-value`	`string`
`name`	`string`
`label`	`string`
`error`	`{ detail: string; }`
`help-text`	`string`
`copyable`	`boolean`
`copyable-tooltip`	`boolean`
`placeholder`	`string`
`small`	`boolean`
`is-inherited`	`boolean`
`is-inheritance-field`	`boolean`

Events

Event	Payload
`update:modelValue`	`[value: string \| undefined]`

Slots

Slot	Bindings
`prefix`	`{}`
`suffix`	`{}`
`hint`	`{}`

Best practices

Use a clear label such as Email address or Work email.
Add help text when users need context about how the address will be used.
Use the shared field features such as error, hint, or inheritance only when they add real value.

Don't

Do not use Email Field for general text input.
Do not rely on the placeholder as the only label.
Do not use it for multiple addresses in one field.

Behavior

Email Field uses a native type="email" input and checks browser validity on blur.
copyable adds a copy button for read-only or reference-heavy flows where copying the address is useful.
The component supports shared field patterns such as prefix, suffix, hint, helpText, error, and inheritance handling.

Accessibility

Always provide a visible label so users understand what address is expected.
Native email input behavior can improve keyboard and autofill support, especially on mobile devices.

Text Field: when the value is general text and should not be constrained to an email format.

Edit this pageorReport an issue

Datepicker

A calendar-style input for choosing a date, time, or date range.

Empty State

A placeholder surface that explains why content is missing and helps users take the next useful step.