Skip to main content
The MtEmailField component is a specialized text input for email addresses with built-in validation and optional copy functionality.

​
Import

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

​
Props

​
modelValue
string
v-model binding for the email field value.
​
label
string
A label for the email field.
​
name
string
The name attribute for the input element.
​
placeholder
string
Placeholder text displayed when the field is empty.
​
disabled
boolean
default:"false"
Disables the email field.
​
required
boolean
default:"false"
Marks the field as required.
​
small
boolean
default:"false"
Renders the field in a smaller size.
​
copyable
boolean
default:"false"
Adds a copy button to copy the email address to clipboard.
​
helpText
string
Help text with additional information.
​
error
object
Error object with a detail property for validation messages.
​
isInherited
boolean
default:"false"
Indicates if the value is inherited.
​
isInheritanceField
boolean
default:"false"
Enables inheritance functionality.

​
Events

​
update:modelValue
(value: string) => void
Emitted when the email value changes.
​
change
(value: string) => void
Emitted when the input loses focus.
​
focus
() => void
Emitted when the field gains focus.
​
blur
() => void
Emitted when the field loses focus.
​
inheritance-restore
() => void
Emitted when inheritance is restored.
​
inheritance-remove
() => void
Emitted when inheritance is removed.

​
Slots

​
prefix
slot
Content displayed before the input.
​
suffix
slot
Content displayed after the input (not shown if copyable is true).
​
hint
slot
Additional hint content below the field.

​
Usage

​
Basic Email Field

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

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

​
With Validation

<script setup>
import { ref, computed } from 'vue';
const email = ref('');
const error = computed(() => {
  if (!email.value) return null;
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
  return isValid ? null : { detail: 'Please enter a valid email address' };
});
</script>

<template>
  <mt-email-field 
    v-model="email"
    label="Email"
    :error="error"
    required
  />
</template>

​
Copyable Email

<template>
  <mt-email-field 
    v-model="contactEmail"
    label="Contact email"
    copyable
  />
</template>

​
Small Size

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

​
With Prefix Icon

<template>
  <mt-email-field v-model="email" label="Email">
    <template #prefix>
      <mt-icon name="regular-envelope" />
    </template>
  </mt-email-field>
</template>

​
Accessibility

  • Uses native email input type for browser validation
  • Label properly associated with input
  • Error messages linked via aria-describedby
  • Invalid state communicated via aria-invalid
  • Copy button has descriptive aria-label
  • Disabled state prevents interaction

Build docs developers (and LLMs) love

Get started for freeTalk to us