diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-disabled-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-disabled-snap.png
index fc983bb89..681816327 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-disabled-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-disabled-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-error-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-error-snap.png
index 9927f053e..ed75767aa 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-error-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-error-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-hint-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-hint-snap.png
index 15e057926..31b007d65 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-linked-inheritanec-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-linked-inheritanec-snap.png
new file mode 100644
index 000000000..cb019e6e2
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-linked-inheritanec-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-small-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-small-snap.png
new file mode 100644
index 000000000..001e50bec
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-small-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-unlinked-inheritance-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-unlinked-inheritance-snap.png
new file mode 100644
index 000000000..a52d272ad
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-email-field--visual-test-unlinked-inheritance-snap.png differ
diff --git a/packages/component-library/src/components/form/_internal/mt-field-affix/mt-field-affix.vue b/packages/component-library/src/components/form/_internal/mt-field-affix/mt-field-affix.vue
new file mode 100644
index 000000000..fff2d8494
--- /dev/null
+++ b/packages/component-library/src/components/form/_internal/mt-field-affix/mt-field-affix.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :class="['mt-field-affix', `mt-field-affix--${type}`]">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  type: "prefix" | "suffix";
+}>();
+</script>
+
+<style scoped>
+.mt-field-affix {
+  display: grid;
+  place-items: center;
+  padding-inline: var(--scale-size-12);
+  color: var(--color-text-primary-default);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-2xs);
+  line-height: var(--line-height-2xs);
+  font-weight: var(--font-weight-medium);
+  background: var(--color-interaction-secondary-dark);
+  height: 100%;
+}
+
+.mt-field-affix--suffix {
+  border-inline-start: 1px solid var(--color-border-primary-default);
+  border-top-right-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
+}
+
+.mt-field-affix--prefix {
+  border-inline-end: 1px solid var(--color-border-primary-default);
+  border-top-left-radius: var(--border-radius-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
+}
+</style>
diff --git a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue b/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
index 3c3dd7113..19400e3a4 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
@@ -1,19 +1,21 @@
 <template>
   <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
-  <mt-icon
-    v-tooltip="{
-      message: tooltipText,
-      width: 220,
-      position: 'top',
-      showDelay: 300,
-      hideDelay: 0,
-    }"
-    class="mt-field-copyable"
-    name="regular-copy"
-    size="18"
-    @click="copyToClipboard"
-    @mouseleave="wasCopied = false"
-  />
+  <button>
+    <mt-icon
+      v-tooltip="{
+        message: tooltipText,
+        width: 220,
+        position: 'top',
+        showDelay: 300,
+        hideDelay: 0,
+      }"
+      class="mt-field-copyable"
+      name="regular-copy"
+      size="18"
+      @click="copyToClipboard"
+      @mouseleave="wasCopied = false"
+    />
+  </button>
 </template>
 
 <script lang="ts">
diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
index 303264d0b..d9e9b8051 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -2,7 +2,7 @@
   <mt-text
     v-if="!!error"
     as="span"
-    size="2xs"
+    size="xs"
     color="color-text-critical-default"
     class="mt-field__error"
   >
diff --git a/packages/component-library/src/components/form/mt-email-field/mt-email-field.interactive.stories.ts b/packages/component-library/src/components/form/mt-email-field/mt-email-field.interactive.stories.ts
index 24f50e56a..42bf154e2 100644
--- a/packages/component-library/src/components/form/mt-email-field/mt-email-field.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-email-field/mt-email-field.interactive.stories.ts
@@ -1,4 +1,4 @@
-import { within, userEvent } from "@storybook/test";
+import { within, userEvent, fn } from "@storybook/test";
 import { expect } from "@storybook/test";
 
 import meta, { type MtEmailFieldMeta, type MtEmailFieldStory } from "./mt-email-field.stories";
@@ -8,25 +8,6 @@ export default {
   title: "Interaction Tests/Form/mt-email-field",
 } as MtEmailFieldMeta;
 
-export const TestInputValue: MtEmailFieldStory = {
-  name: "Should keep input value",
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const TEST_EMAIL = "admin@shopware.com";
-
-    await userEvent.type(canvas.getByRole("textbox"), TEST_EMAIL);
-    await userEvent.click(canvas.getByText("hidden"));
-
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe(TEST_EMAIL);
-
-    // Input to be called once for each letter
-
-    expect(args.updateModelValue).toHaveBeenCalledTimes(18);
-
-    expect(args.change).toHaveBeenCalledWith(TEST_EMAIL);
-  },
-};
-
 export const VisualTestPrefix: MtEmailFieldStory = {
   name: "Should display prefix",
   args: {
@@ -63,18 +44,6 @@ export const VisualTestHint: MtEmailFieldStory = {
   },
 };
 
-export const TestLabel: MtEmailFieldStory = {
-  name: "Should display label",
-  args: {
-    label: "label",
-  },
-  play: ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.getByText(args.label!)).toBeDefined();
-  },
-};
-
 export const VisualTestDisabled: MtEmailFieldStory = {
   name: "Should disable",
   args: {
@@ -114,16 +83,42 @@ export const VisualTestError: MtEmailFieldStory = {
   },
 };
 
-export const VisualTestValidationError: MtEmailFieldStory = {
-  name: "Should validate email",
+export const VisualTestSmall: MtEmailFieldStory = {
+  name: "Should display small",
   args: {
-    modelValue: "admin@",
+    small: true,
   },
-  play: ({ canvasElement }) => {
+};
+
+export const TestShouldCopyValue: MtEmailFieldStory = {
+  name: "Should copy value",
+  args: {
+    modelValue: "test@shopware.com",
+    copyable: true,
+  },
+  async play({ canvasElement }) {
+    window.navigator.clipboard.writeText = fn();
     const canvas = within(canvasElement);
 
-    expect(
-      canvas.getByText("Please enter a part following '@'. 'admin@' is incomplete."),
-    ).toBeDefined();
+    await userEvent.click(canvas.getByRole("button", { name: "Copy to clipboard" }));
+    expect(window.navigator.clipboard.writeText).toHaveBeenCalledOnce();
+  },
+};
+
+export const VisualTestLinkedInheritanec: MtEmailFieldStory = {
+  name: "Linked inheritance",
+  args: {
+    isInheritanceField: true,
+    isInherited: true,
+    modelValue: "test@shopware.com",
+  },
+};
+
+export const VisualTestUnlinkedInheritance: MtEmailFieldStory = {
+  name: "Unlinked inheritance",
+  args: {
+    isInheritanceField: true,
+    isInherited: false,
+    modelValue: "test@shopware.com",
   },
 };
diff --git a/packages/component-library/src/components/form/mt-email-field/mt-email-field.spec.ts b/packages/component-library/src/components/form/mt-email-field/mt-email-field.spec.ts
new file mode 100644
index 000000000..c0bc00408
--- /dev/null
+++ b/packages/component-library/src/components/form/mt-email-field/mt-email-field.spec.ts
@@ -0,0 +1,483 @@
+import { describe, expect, it, vi } from "vitest";
+import { userEvent } from "@storybook/test";
+import { render, screen } from "@testing-library/vue";
+import MtEmailField from "./mt-email-field.vue";
+import { flushPromises } from "@vue/test-utils";
+
+describe("mt-email-field", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+
+    vi.restoreAllMocks();
+  });
+
+  it("has displays the provided value", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        modelValue: "the-value",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toHaveValue("the-value");
+  });
+
+  it("updates the value when typing in the input", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.type(screen.getByRole("textbox"), "a");
+
+    // ASSERT
+    expect(handler).toHaveBeenNthCalledWith(1, "a");
+  });
+
+  it("emits a change event when the focus moves to another element", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        onChange: handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.type(screen.getByRole("textbox"), "a");
+    await user.tab();
+
+    // ASSERT
+    expect(handler).toHaveBeenNthCalledWith(1, "a");
+  });
+
+  it("displays an error when the input appears and the provided value is invalid", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        modelValue: "asdf@",
+      },
+    });
+
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByText(/Constraints/)).toHaveTextContent("Constraints not satisfied");
+  });
+
+  it("displays an error when typing an invalid value and then moving the focus to another element", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        modelValue: "valid@email.address",
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.type(screen.getByRole("textbox"), "a@");
+
+    await user.tab();
+
+    // ASSERT
+    expect(screen.getByText(/Constraints/)).toHaveTextContent("Constraints not satisfied");
+  });
+
+  it("only shows the invalid email format error even when the input has another error", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        modelValue: "asdf@",
+        error: {
+          detail: "Some other error",
+        },
+      },
+    });
+
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByText(/Constraints/)).toHaveTextContent("Constraints not satisfied");
+    expect(screen.queryByText("Some other error")).not.toBeInTheDocument();
+  });
+
+  it("focuses the input when clicking the label", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        label: "Some label",
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.click(screen.getByText("Some label"));
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toHaveFocus();
+  });
+
+  it("does not show a label when none is specified", async () => {
+    // ARRANGE
+    render(MtEmailField);
+
+    // ASSERT
+    expect(screen.queryByText("Some label")).not.toBeInTheDocument();
+  });
+
+  it("displays no help text by default", async () => {
+    // ARRANGE
+    render(MtEmailField);
+
+    // ASSERT
+    expect(screen.queryByRole("tooltip", { name: "help-text" })).not.toBeInTheDocument();
+  });
+
+  it("displays a help text when one is specified", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        helpText: "Some helptext",
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.hover(screen.getByRole("button"));
+
+    vi.advanceTimersByTime(500);
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByRole("tooltip")).toBeVisible();
+    expect(screen.getByRole("tooltip")).toHaveTextContent("Some helptext");
+  });
+
+  it("displays an error message when there is an error", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        error: {
+          detail: "There is an error",
+        },
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("There is an error")).toBeVisible();
+  });
+
+  it("displays an prefix before the input when one is defined", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      slots: {
+        prefix: "Some prefix",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Some prefix")).toBeVisible();
+  });
+
+  it("does not display a prefix when none is defined", async () => {
+    // ARRANGE
+    render(MtEmailField);
+
+    // ASSERT
+    expect(screen.queryByText("Some prefix")).not.toBeInTheDocument();
+  });
+
+  it("displays an suffix after the input when one is defined", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      slots: {
+        suffix: "Some suffix",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Some suffix")).toBeVisible();
+  });
+
+  it("does not display a suffix when none is defined", async () => {
+    // ARRANGE
+    render(MtEmailField);
+
+    // ASSERT
+    expect(screen.queryByText("Some suffix")).not.toBeInTheDocument();
+  });
+
+  it("replaces the suffix with an copy button when the value of the field can be copied", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        copyable: true,
+      },
+      slots: {
+        suffix: "Some suffix",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("button")).toBeVisible();
+    expect(screen.queryByText("Some suffix")).not.toBeInTheDocument();
+  });
+
+  it("can be an required input field", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        required: true,
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toBeRequired();
+  });
+
+  it("can be disabled", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        disabled: true,
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+
+  it("is enabled by default", async () => {
+    // ARRANGE
+    render(MtEmailField);
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toBeEnabled();
+  });
+
+  it("has the specified name value", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        name: "some-name",
+      },
+    });
+
+    // ACT
+    expect(screen.getByRole("textbox")).toHaveAttribute("name", "some-name");
+  });
+
+  it("has the specified placeholder value", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        placeholder: "some-placeholder",
+      },
+    });
+
+    // ACT
+    expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "some-placeholder");
+  });
+
+  it("emits an blur event when the input loses focus", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        onBlur: handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.tab();
+    await user.tab();
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("emits an focus event when the input gains focus", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        onFocus: handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.tab();
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("shows a hint when one is specified", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      slots: {
+        hint: "Some hint",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Some hint")).toBeVisible();
+  });
+
+  it("emits an event when inheritance got removed", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        label: "Some label",
+        isInherited: true,
+        isInheritanceField: true,
+        "onInheritance-remove": handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.click(screen.getByRole("button", { name: "Unlink inheritance" }));
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("emits an event when inheritance got restored", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        label: "Some label",
+        isInherited: false,
+        isInheritanceField: true,
+        "onInheritance-restore": handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.click(screen.getByRole("button", { name: "Link inheritance" }));
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("is disabled when the inheritance is linked", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        isInheritanceField: true,
+        isInherited: true,
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.type(screen.getByRole("textbox"), "a");
+
+    // ASSERT
+    expect(screen.getByRole("textbox")).toBeDisabled();
+
+    expect(handler).not.toHaveBeenCalled();
+    expect(screen.getByRole("textbox")).toHaveValue("");
+  });
+
+  it("it is possible to edit the value when the inheritance is unlinked", async () => {
+    // ARRANGE
+    const handler = vi.fn();
+
+    render(MtEmailField, {
+      props: {
+        isInheritanceField: true,
+        isInherited: false,
+        "onUpdate:modelValue": handler,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.type(screen.getByRole("textbox"), "a");
+
+    // ASSERT
+    expect(handler).toHaveBeenCalledOnce();
+    expect(screen.getByRole("textbox")).toHaveValue("a");
+  });
+
+  it("shows a tooltip when focusing the button to copy the input value", async () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        copyable: true,
+      },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.tab();
+    await user.tab();
+
+    // ASSERT
+    expect(screen.getByRole("tooltip")).toBeVisible();
+  });
+});
diff --git a/packages/component-library/src/components/form/mt-email-field/mt-email-field.stories.ts b/packages/component-library/src/components/form/mt-email-field/mt-email-field.stories.ts
index 302b1268d..968d84324 100644
--- a/packages/component-library/src/components/form/mt-email-field/mt-email-field.stories.ts
+++ b/packages/component-library/src/components/form/mt-email-field/mt-email-field.stories.ts
@@ -1,9 +1,7 @@
-import { action } from "@storybook/addon-actions";
 import MtEmailField from "./mt-email-field.vue";
 import baseFieldArgTypes from "../_internal/mt-base-field/arg-types";
 import type { StoryObj } from "@storybook/vue3";
 import type { SlottedMeta } from "@/_internal/story-helper";
-import { fn } from "@storybook/test";
 
 export type MtEmailFieldMeta = SlottedMeta<
   typeof MtEmailField,
@@ -74,13 +72,11 @@ export default {
         args.change(e);
       },
 
-      inheritanceRemoveWrapper(a: any) {
-        this.inheritanceRemove(...a);
+      inheritanceRemoveWrapper() {
         this.isInherited = false;
       },
 
-      inheritanceRestoreWrapper(a: any) {
-        this.inheritanceRestore(...a);
+      inheritanceRestoreWrapper() {
         this.isInherited = true;
       },
     },
@@ -95,8 +91,6 @@ export default {
   },
   args: {
     label: "Emailfield",
-    updateModelValue: fn(action("updateModelValue")),
-    change: fn(action("change")),
   },
 } as MtEmailFieldMeta;
 
diff --git a/packages/component-library/src/components/form/mt-email-field/mt-email-field.vue b/packages/component-library/src/components/form/mt-email-field/mt-email-field.vue
index 715809440..8b10274b5 100644
--- a/packages/component-library/src/components/form/mt-email-field/mt-email-field.vue
+++ b/packages/component-library/src/components/form/mt-email-field/mt-email-field.vue
@@ -1,119 +1,291 @@
 <template>
-  <mt-base-field
-    class="mt-field--email"
-    v-bind="$attrs"
-    :name="name"
-    :has-focus="hasFocus"
-    :copyable="copyable"
-    :copyable-tooltip="copyableTooltip"
-    :copyable-text="currentValue"
-    :help-text="helpText"
-    :size="size"
-    :required="required"
-    :disabled="disabled"
-    :is-inherited="isInherited"
-    :is-inheritance-field="isInheritanceField"
-    @inheritance-restore="$emit('inheritance-restore', $event)"
-    @inheritance-remove="$emit('inheritance-remove', $event)"
+  <div
+    :class="[
+      'mt-email-field',
+      {
+        'mt-email-field--future-no-default-margin': futureFlags.removeDefaultMargin,
+      },
+    ]"
   >
-    <template #label>
+    <mt-field-label
+      v-if="label"
+      :id="id ?? ''"
+      :has-error="!!error || !!errorMessage"
+      :required="required"
+      :style="{ gridArea: 'label', marginBottom: 'var(--scale-size-2)' }"
+      :inheritance="!isInheritanceField ? 'none' : isInherited ? 'linked' : 'unlinked'"
+      @update:inheritance="
+        if (isInherited) {
+          $emit('inheritance-remove');
+        } else {
+          $emit('inheritance-restore');
+        }
+      "
+    >
       {{ label }}
-    </template>
+    </mt-field-label>
 
-    <template #field-prefix>
-      <slot name="prefix" />
-    </template>
+    <mt-help-text v-if="!!helpText" :text="helpText" :style="{ gridArea: 'help-text' }" />
+
+    <div
+      :class="[
+        'mt-email-field__block',
+        {
+          'mt-email-field__block--error': !!error || !!errorMessage,
+          'mt-email-field__block--small': small,
+        },
+      ]"
+      :style="{ gridArea: 'input' }"
+    >
+      <mt-field-affix v-if="$slots.prefix" type="prefix">
+        <slot name="prefix" />
+      </mt-field-affix>
 
-    <template #element="{ identification, disabled }">
       <input
-        :id="identification"
-        ref="input"
+        v-model="model"
+        class="mt-email-field__input"
         type="email"
-        :name="identification"
-        :disabled="disabled"
-        :value="currentValue"
-        :placeHolder="placeholder"
-        @input.stop="onInput"
-        @change.stop="onChange"
-        @focus="setFocus"
-        @blur="removeFocus"
+        ref="inputRef"
+        :id="id"
+        :required="required"
+        :disabled="disabled || isInherited"
+        :name="name"
+        :placeholder="placeholder"
+        @change="$emit('change', ($event.target as HTMLInputElement).value)"
+        @focus="$emit('focus')"
+        @blur="
+          () => {
+            checkValidity();
+            $emit('blur');
+          }
+        "
       />
-    </template>
 
-    <template #field-suffix>
-      <slot name="suffix" />
-    </template>
+      <mt-tooltip v-if="copyable" :content="t('copyTooltip')">
+        <template #default="params">
+          <button
+            v-bind="params"
+            class="mt-email-field__copy-button"
+            :aria-label="
+              copied ? t('copyButtonDescriptionValueCopied') : t('copyButtonDescription')
+            "
+            @click="
+              () => {
+                if (!model) return;
+
+                copy(model);
+              }
+            "
+          >
+            <mt-icon
+              :name="copied ? 'regular-checkmark' : 'regular-copy'"
+              size="var(--scale-size-18)"
+              color="var(--color-icon-primary-default)"
+            />
+          </button>
+        </template>
+      </mt-tooltip>
 
-    <template #error>
-      <mt-field-error v-if="computedError" :error="computedError" />
-    </template>
+      <mt-field-affix type="suffix" v-else-if="$slots.suffix">
+        <slot name="suffix" />
+      </mt-field-affix>
+    </div>
 
-    <template #field-hint>
+    <mt-field-error
+      v-if="error || errorMessage"
+      :error="errorMessage || error"
+      :style="{ gridArea: 'error' }"
+    />
+
+    <div v-if="$slots.hint" class="mt-email-field__hint" :style="{ gridArea: 'hint' }">
       <slot name="hint" />
-    </template>
-  </mt-base-field>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import MtTextField from "../mt-text-field/mt-text-field.vue";
+<script setup lang="ts">
+import { defineProps, onMounted, ref, useTemplateRef, useId } from "vue";
+import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
+import MtFieldLabel from "../_internal/mt-field-label/mt-field-label.vue";
+import MtHelpText from "../mt-help-text/mt-help-text.vue";
+import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
+import MtTooltip from "@/components/overlay/mt-tooltip/mt-tooltip.vue";
+import MtFieldAffix from "../_internal/mt-field-affix/mt-field-affix.vue";
+import { useI18n } from "vue-i18n";
+import { useClipboard } from "@vueuse/core";
+import { useFutureFlags } from "@/composables/useFutureFlags";
 
-export default defineComponent({
-  name: "MtEmailField",
+const futureFlags = useFutureFlags();
 
-  extends: MtTextField,
+const model = defineModel({
+  type: String,
+});
 
-  data() {
-    return {
-      hasFocus: false,
-      validationError: null,
-    };
-  },
+defineProps<{
+  disabled?: boolean;
+  required?: boolean;
+  modelValue?: string;
+  name?: string;
+  label?: string;
+  error?: {
+    detail: string;
+  };
+  helpText?: string;
+  copyable?: boolean;
+  copyableTooltip?: boolean;
+  placeholder?: string;
+  small?: boolean;
+  isInherited?: boolean;
+  isInheritanceField?: boolean;
+}>();
 
-  computed: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    computedError(): any {
-      if (this.validationError) {
-        return this.validationError;
-      }
+defineEmits(["change", "blur", "focus", "inheritance-restore", "inheritance-remove"]);
 
-      return this.error;
-    },
-  },
+const id = useId();
 
-  mounted() {
-    if (!this.modelValue) {
-      return;
-    }
+onMounted(checkValidity);
 
-    this.checkValidity();
-  },
+const inputRef = useTemplateRef<HTMLInputElement>("inputRef");
 
-  methods: {
-    setFocus() {
-      this.hasFocus = true;
-    },
+const errorMessage = ref<
+  | undefined
+  | {
+      detail: string;
+    }
+>(undefined);
 
-    removeFocus() {
-      this.hasFocus = false;
+function checkValidity() {
+  if (!inputRef.value) return;
 
-      this.checkValidity();
-    },
+  const isValid = inputRef.value?.checkValidity();
+  if (isValid) {
+    errorMessage.value = undefined;
+    return;
+  }
 
-    checkValidity() {
-      // @ts-expect-error - ref is available
-      if (this.$refs.input.checkValidity()) {
-        this.validationError = null;
+  errorMessage.value = { detail: inputRef.value?.validationMessage };
+}
 
-        return;
-      }
+const { copy, copied } = useClipboard();
 
-      // @ts-expect-error - validationError is defined in parent component
-      this.validationError = {
-        // @ts-expect-error - ref is available
-        detail: this.$refs.input.validationMessage,
-      };
+const { t } = useI18n({
+  messages: {
+    de: {
+      copyTooltip: "In Zwischenablage kopieren",
+      copyButtonDescription: "In Zwischenablage kopieren",
+      copyButtonDescriptionValueCopied: "In Zwischenablage kopiert",
+    },
+    en: {
+      copyTooltip: "Copy to clipboard",
+      copyButtonDescription: "Copy to clipboard",
+      copyButtonDescriptionValueCopied: "Copied to clipboard",
     },
   },
 });
 </script>
+
+<style scoped>
+.mt-email-field {
+  display: grid;
+  grid-template-areas:
+    "label help-text"
+    "input input"
+    "error error"
+    "hint hint";
+  grid-template-columns: 1fr auto;
+  margin-bottom: var(--scale-size-32);
+}
+
+.mt-email-field--future-no-default-margin {
+  margin-bottom: 0;
+}
+
+.mt-email-field__block {
+  --mt-email-field-border-radius: var(--border-radius-xs);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border-primary-default);
+  border-radius: var(--mt-email-field-border-radius);
+  background-color: var(--color-elevation-surface-raised);
+  min-height: var(--scale-size-48);
+  /* stylelint-disable-next-line meteor/prefer-sizing-token -- this is a trick so that the input field take 100% of its parent's height */
+  height: 1px;
+
+  & ::placeholder {
+    color: var(--color-text-secondary-default);
+  }
+
+  &:not(.mt-email-field__block--error)&:has(.mt-email-field__input:focus-visible) {
+    border-color: var(--color-border-brand-selected);
+    box-shadow: 0px 0px 4px 0px rgba(24, 158, 255, 0.3);
+  }
+
+  &:has(.mt-email-field__input:disabled) {
+    background-color: var(--color-background-primary-disabled);
+
+    & ::placeholder {
+      color: var(--color-text-secondary-disabled);
+    }
+  }
+}
+
+.mt-email-field__block--error {
+  border-color: var(--color-border-critical-default);
+  background-color: var(--color-background-critical-dark);
+}
+
+.mt-email-field__input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  outline: none;
+
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-primary-default);
+  padding-inline: var(--scale-size-16);
+  height: 100%;
+  width: 100%;
+}
+
+.mt-email-field__copy-button {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  right: var(--scale-size-8);
+  top: 50%;
+  transform: translate(0, -50%);
+  padding: var(--scale-size-8);
+  border-radius: var(--border-radius-button);
+  transition: background-color 0.15s ease-out;
+
+  &:is(:hover, :focus-visible) {
+    background-color: var(--color-interaction-secondary-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-brand-selected);
+  }
+}
+
+.mt-email-field__hint {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  color: var(--color-text-tertiary-default);
+  margin-top: 0.1875rem;
+}
+
+.mt-email-field__block--small {
+  min-height: var(--scale-size-32);
+}
+</style>