diff --git a/.changeset/form-field-hint-prop.md b/.changeset/form-field-hint-prop.md
new file mode 100644
index 000000000..d6e07c620
--- /dev/null
+++ b/.changeset/form-field-hint-prop.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Add an optional `hint` prop to all form fields for rendering a caption below the field. The existing `#hint` slot still works and takes precedence. Hint content now renders with a consistent info-icon style, which also applies to existing `#hint` slot usage.
diff --git a/packages/component-library/__snapshots__/components-colorpicker-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-colorpicker-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..d81211aca
Binary files /dev/null and b/packages/component-library/__snapshots__/components-colorpicker-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-colorpicker-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-colorpicker-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..fc22a96c6
Binary files /dev/null and b/packages/component-library/__snapshots__/components-colorpicker-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-email-field-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-email-field-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..4501f1c83
Binary files /dev/null and b/packages/component-library/__snapshots__/components-email-field-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-email-field-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-email-field-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..9e58c5991
Binary files /dev/null and b/packages/component-library/__snapshots__/components-email-field-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-email-field-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-email-field-interaction-tests--visual-test-hint-snap.png
index dc7fc52d3..5c0344ab1 100644
Binary files a/packages/component-library/__snapshots__/components-mt-email-field-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-email-field-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-number-field-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-number-field-interaction-tests--visual-test-hint-snap.png
index 0605eab7e..8fb1184d9 100644
Binary files a/packages/component-library/__snapshots__/components-mt-number-field-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-number-field-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-password-field-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-password-field-interaction-tests--visual-test-hint-snap.png
index 0cef6ee1f..716013161 100644
Binary files a/packages/component-library/__snapshots__/components-mt-password-field-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-password-field-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-radio-group-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-radio-group-interaction-tests--visual-test-hint-snap.png
index 683d6441f..3922bb688 100644
Binary files a/packages/component-library/__snapshots__/components-mt-radio-group-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-radio-group-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-select-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-select-interaction-tests--visual-test-hint-snap.png
index 0d9ab407c..bd1b54a14 100644
Binary files a/packages/component-library/__snapshots__/components-mt-select-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-select-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-character-count-with-hint-snap.png b/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-character-count-with-hint-snap.png
index 8aa9b1216..f808c0eb3 100644
Binary files a/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-character-count-with-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-character-count-with-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-hint-snap.png
index 44605b7ac..f539a4067 100644
Binary files a/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-text-field-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-character-count-with-hint-snap.png b/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-character-count-with-hint-snap.png
index d40c6eead..3ebd1555b 100644
Binary files a/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-character-count-with-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-character-count-with-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-hint-snap.png
index 22d4166ec..40477539b 100644
Binary files a/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-textarea-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-mt-url-field-interaction-tests--visual-test-hint-snap.png b/packages/component-library/__snapshots__/components-mt-url-field-interaction-tests--visual-test-hint-snap.png
index c189b874d..39c6d6161 100644
Binary files a/packages/component-library/__snapshots__/components-mt-url-field-interaction-tests--visual-test-hint-snap.png and b/packages/component-library/__snapshots__/components-mt-url-field-interaction-tests--visual-test-hint-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-number-field-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-number-field-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..f3260f9b5
Binary files /dev/null and b/packages/component-library/__snapshots__/components-number-field-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-number-field-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-number-field-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..4b9f88798
Binary files /dev/null and b/packages/component-library/__snapshots__/components-number-field-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-password-field-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-password-field-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..45eb05987
Binary files /dev/null and b/packages/component-library/__snapshots__/components-password-field-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-password-field-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-password-field-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..2edcb8bc4
Binary files /dev/null and b/packages/component-library/__snapshots__/components-password-field-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-radio-group-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-radio-group-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..2859483b8
Binary files /dev/null and b/packages/component-library/__snapshots__/components-radio-group-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-radio-group-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-radio-group-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..aa8d5e1b4
Binary files /dev/null and b/packages/component-library/__snapshots__/components-radio-group-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-select-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-select-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..877ae6dca
Binary files /dev/null and b/packages/component-library/__snapshots__/components-select-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-select-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-select-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..ddcfd5019
Binary files /dev/null and b/packages/component-library/__snapshots__/components-select-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-slider-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-slider-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..4cab36be2
Binary files /dev/null and b/packages/component-library/__snapshots__/components-slider-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-slider-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-slider-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..22d226dc7
Binary files /dev/null and b/packages/component-library/__snapshots__/components-slider-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-text-field-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-text-field-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..31910df33
Binary files /dev/null and b/packages/component-library/__snapshots__/components-text-field-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-text-field-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-text-field-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..70915f4c2
Binary files /dev/null and b/packages/component-library/__snapshots__/components-text-field-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-textarea-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-textarea-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..2b02f5e5f
Binary files /dev/null and b/packages/component-library/__snapshots__/components-textarea-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-textarea-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-textarea-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..778984e66
Binary files /dev/null and b/packages/component-library/__snapshots__/components-textarea-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-unit-field-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-unit-field-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..21377e753
Binary files /dev/null and b/packages/component-library/__snapshots__/components-unit-field-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-unit-field-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-unit-field-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..807b960ba
Binary files /dev/null and b/packages/component-library/__snapshots__/components-unit-field-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-url-field-interaction-tests--visual-test-hint-prop-snap.png b/packages/component-library/__snapshots__/components-url-field-interaction-tests--visual-test-hint-prop-snap.png
new file mode 100644
index 000000000..34a0d2ba3
Binary files /dev/null and b/packages/component-library/__snapshots__/components-url-field-interaction-tests--visual-test-hint-prop-snap.png differ
diff --git a/packages/component-library/__snapshots__/components-url-field-interaction-tests--visual-test-hint-slot-snap.png b/packages/component-library/__snapshots__/components-url-field-interaction-tests--visual-test-hint-slot-snap.png
new file mode 100644
index 000000000..c659f3a71
Binary files /dev/null and b/packages/component-library/__snapshots__/components-url-field-interaction-tests--visual-test-hint-slot-snap.png differ
diff --git a/packages/component-library/src/components/_internal/mt-field-hint/mt-field-hint.spec.ts b/packages/component-library/src/components/_internal/mt-field-hint/mt-field-hint.spec.ts
new file mode 100644
index 000000000..af2871fb1
--- /dev/null
+++ b/packages/component-library/src/components/_internal/mt-field-hint/mt-field-hint.spec.ts
@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/vue";
+import { describe, it, expect } from "vitest";
+import MtFieldHint from "./mt-field-hint.vue";
+
+describe("mt-field-hint", () => {
+  it("renders markup passed into the default slot", () => {
+    // ARRANGE
+    render(MtFieldHint, {
+      slots: {
+        default: '<span data-testid="custom-hint">Some <strong>hint</strong></span>',
+      },
+    });
+
+    // ASSERT
+    const slotContent = screen.getByTestId("custom-hint");
+    expect(slotContent).toBeVisible();
+    expect(slotContent.querySelector("strong")).toHaveTextContent("hint");
+  });
+
+  it("renders a decorative info icon that is hidden from assistive technology", () => {
+    // ARRANGE
+    const { container } = render(MtFieldHint, {
+      slots: {
+        default: "Some hint",
+      },
+    });
+
+    // ASSERT
+    // the icon is purely decorative, so it must be hidden from screen readers
+    const icon = container.querySelector(".mt-field-hint__icon");
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("aria-hidden", "true");
+  });
+});
diff --git a/packages/component-library/src/components/_internal/mt-field-hint/mt-field-hint.vue b/packages/component-library/src/components/_internal/mt-field-hint/mt-field-hint.vue
new file mode 100644
index 000000000..d53cad38e
--- /dev/null
+++ b/packages/component-library/src/components/_internal/mt-field-hint/mt-field-hint.vue
@@ -0,0 +1,55 @@
+<template>
+  <span class="mt-field-hint">
+    <mt-icon
+      v-if="!hideIcon"
+      class="mt-field-hint__icon"
+      name="solid-info-circle"
+      size="var(--scale-size-12)"
+      color="var(--color-icon-secondary-default)"
+      decorative
+    />
+    <span class="mt-field-hint__text">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import MtIcon from "@/components/mt-icon/mt-icon.vue";
+
+withDefaults(
+  defineProps<{
+    /**
+     * Hides the default info icon. Used when the hint content is fully custom
+     * (e.g. provided via the `#hint` slot with its own icon).
+     */
+    hideIcon?: boolean;
+  }>(),
+  {
+    hideIcon: false,
+  },
+);
+</script>
+
+<style scoped>
+.mt-field-hint {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--scale-size-4);
+  padding: var(--scale-size-3);
+  min-width: 0;
+}
+
+.mt-field-hint__icon {
+  flex-shrink: 0;
+}
+
+.mt-field-hint__text {
+  color: var(--color-text-secondary-default);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-xs, 14px);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-xs);
+}
+</style>
diff --git a/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.interactive.stories.ts b/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.interactive.stories.ts
index 06bb2c521..b1be644db 100644
--- a/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.interactive.stories.ts
@@ -1,6 +1,7 @@
 import { within, userEvent, fireEvent } from "@storybook/test";
 import { expect } from "@storybook/test";
 
+import MtColorpicker from "./mt-colorpicker.vue";
 import meta, { type MtColorpickerMeta, type MtColorpickerStory } from "./mt-colorpicker.stories";
 import { waitUntil } from "@/_internal/test-helper";
 
@@ -598,3 +599,34 @@ export const VisualTestColorpickerWithHelpText: MtColorpickerStory = {
     expect(canvas.getByRole("tooltip")).toBeInTheDocument();
   },
 };
+
+export const VisualTestHintProp: MtColorpickerStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtColorpicker },
+    setup: () => ({ args }),
+    template: `<mt-colorpicker :label="args.label" model-value="#0fcff5" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtColorpickerStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtColorpicker },
+    setup: () => ({ args }),
+    template: `<mt-colorpicker :label="args.label" model-value="#0fcff5"><template #hint>Hint via slot</template></mt-colorpicker>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.spec.ts b/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.spec.ts
index 609d1e8e6..e453f5216 100644
--- a/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.spec.ts
+++ b/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.spec.ts
@@ -152,4 +152,45 @@ describe("mt-colorpicker", () => {
       }),
     );
   });
+
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    render(MtColorpicker, {
+      props: {
+        modelValue: "#0fcff5",
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
+    // ARRANGE
+    render(MtColorpicker, {
+      props: {
+        modelValue: "#0fcff5",
+      },
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = render(MtColorpicker, {
+      props: {
+        modelValue: "#0fcff5",
+      },
+    });
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.vue b/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.vue
index d7201a647..d3e9bc5c4 100644
--- a/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.vue
+++ b/packages/component-library/src/components/mt-colorpicker/mt-colorpicker.vue
@@ -235,6 +235,14 @@
     <template #error>
       <mt-field-error v-if="error" :error="error" />
     </template>
+
+    <template #field-hint>
+      <mt-field-hint v-if="showFieldHint" :hide-icon="!!$slots.hint">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </mt-field-hint>
+    </template>
   </mt-base-field>
 </template>
 
@@ -244,6 +252,7 @@ import type { PropType } from "vue";
 import { defineComponent } from "vue";
 import { debounce } from "@/utils/debounce";
 import MtBaseField from "../_internal/mt-base-field/mt-base-field.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import MtFloatingUi from "../mt-floating-ui/mt-floating-ui.vue";
 import MtText from "@/components/mt-text/mt-text.vue";
 import { createFocusTrap } from "focus-trap";
@@ -257,6 +266,7 @@ export default defineComponent({
 
   components: {
     "mt-base-field": MtBaseField,
+    "mt-field-hint": MtFieldHint,
     "mt-text": MtText,
     "mt-floating-ui": MtFloatingUi,
     "mt-button": MtButton,
@@ -291,6 +301,15 @@ export default defineComponent({
       default: null,
     },
 
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null,
+    },
+
     /**
      * Change the output value which gets emitted and shown in the field.
      * @values auto, hex, hsl, rgb
@@ -494,6 +513,10 @@ export default defineComponent({
       },
     },
 
+    showFieldHint(): boolean {
+      return !!this.$slots.hint || (this.hint != null && String(this.hint).trim() !== "");
+    },
+
     integerAlpha: {
       get(): number {
         return Math.floor(this.alphaValue * 100);
diff --git a/packages/component-library/src/components/mt-email-field/mt-email-field.interactive.stories.ts b/packages/component-library/src/components/mt-email-field/mt-email-field.interactive.stories.ts
index 2c70eaf8f..361b441f1 100644
--- a/packages/component-library/src/components/mt-email-field/mt-email-field.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-email-field/mt-email-field.interactive.stories.ts
@@ -1,6 +1,7 @@
 import { within, userEvent, fn } from "@storybook/test";
 import { expect } from "@storybook/test";
 
+import MtEmailField from "./mt-email-field.vue";
 import meta, { type MtEmailFieldMeta, type MtEmailFieldStory } from "./mt-email-field.stories";
 
 export default {
@@ -33,18 +34,6 @@ export const VisualTestSuffix: MtEmailFieldStory = {
   },
 };
 
-export const VisualTestHint: MtEmailFieldStory = {
-  name: "Should display hint",
-  args: {
-    hint: "hint",
-  },
-  play: ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.getByText(args.hint)).toBeDefined();
-  },
-};
-
 export const VisualTestDisabled: MtEmailFieldStory = {
   name: "Should disable",
   args: {
@@ -143,3 +132,34 @@ export const VisualTestUnlinkedInheritance: MtEmailFieldStory = {
     modelValue: "test@shopware.com",
   },
 };
+
+export const VisualTestHintProp: MtEmailFieldStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtEmailField },
+    setup: () => ({ args }),
+    template: `<mt-email-field :label="args.label" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtEmailFieldStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtEmailField },
+    setup: () => ({ args }),
+    template: `<mt-email-field :label="args.label"><template #hint>Hint via slot</template></mt-email-field>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-email-field/mt-email-field.spec.ts b/packages/component-library/src/components/mt-email-field/mt-email-field.spec.ts
index 11b80df7d..b875ec1cd 100644
--- a/packages/component-library/src/components/mt-email-field/mt-email-field.spec.ts
+++ b/packages/component-library/src/components/mt-email-field/mt-email-field.spec.ts
@@ -568,4 +568,37 @@ describe("mt-email-field", () => {
       screen.getByRole("textbox").getAttribute("aria-describedby"),
     );
   });
+
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    render(MtEmailField, {
+      props: {
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
+    // ARRANGE
+    render(MtEmailField, {
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = render(MtEmailField);
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-email-field/mt-email-field.vue b/packages/component-library/src/components/mt-email-field/mt-email-field.vue
index 5985be397..4a5c3bcb8 100644
--- a/packages/component-library/src/components/mt-email-field/mt-email-field.vue
+++ b/packages/component-library/src/components/mt-email-field/mt-email-field.vue
@@ -101,17 +101,20 @@
       :style="{ gridArea: 'error' }"
     />
 
-    <div v-if="$slots.hint" class="mt-email-field__hint" :style="{ gridArea: 'hint' }">
-      <slot name="hint" />
+    <div v-if="showFieldHint" class="mt-email-field__hint" :style="{ gridArea: 'hint' }">
+      <mt-field-hint :hide-icon="!!$slots.hint">
+        <slot name="hint">{{ hint }}</slot>
+      </mt-field-hint>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref, useTemplateRef, useId } from "vue";
+import { computed, onMounted, ref, useTemplateRef, useId, useSlots } 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 MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import MtIcon from "../mt-icon/mt-icon.vue";
 import MtTooltip from "@/components/mt-tooltip/mt-tooltip.vue";
 import MtFieldAffix from "../_internal/mt-field-affix/mt-field-affix.vue";
@@ -125,7 +128,7 @@ const model = defineModel({
   type: String,
 });
 
-defineProps<{
+const props = defineProps<{
   disabled?: boolean;
   required?: boolean;
   modelValue?: string;
@@ -141,8 +144,18 @@ defineProps<{
   small?: boolean;
   isInherited?: boolean;
   isInheritanceField?: boolean;
+  /**
+   * Optional caption below the field. The `#hint` slot takes precedence when provided.
+   */
+  hint?: string | null;
 }>();
 
+const slots = useSlots();
+
+const showFieldHint = computed(
+  () => !!slots.hint || (props.hint != null && String(props.hint).trim() !== ""),
+);
+
 defineEmits(["change", "blur", "focus", "inheritance-restore", "inheritance-remove"]);
 
 const id = useId();
diff --git a/packages/component-library/src/components/mt-number-field/mt-number-field.interactive.stories.ts b/packages/component-library/src/components/mt-number-field/mt-number-field.interactive.stories.ts
index 13490b32c..3cb480d10 100644
--- a/packages/component-library/src/components/mt-number-field/mt-number-field.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-number-field/mt-number-field.interactive.stories.ts
@@ -1,6 +1,7 @@
 import { within, userEvent } from "@storybook/test";
 import { expect } from "@storybook/test";
 
+import MtNumberField from "./mt-number-field.vue";
 import meta, { type MtNumberFieldMeta, type MtNumberFieldStory } from "./mt-number-field.stories";
 
 export default {
@@ -237,18 +238,6 @@ export const VisualTestNumberAlignedEnd: MtNumberFieldStory = {
   },
 };
 
-export const VisualTestHint: MtNumberFieldStory = {
-  name: "Should display hint",
-  args: {
-    hint: "hint",
-  },
-  play: ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.getByText(args.hint)).toBeDefined();
-  },
-};
-
 export const VisualTestDisabled: MtNumberFieldStory = {
   name: "Should disable",
   args: {
@@ -319,3 +308,34 @@ export const VisualTestHideControls: MtNumberFieldStory = {
     expect(canvas.queryByTestId("mt-number-field-decrease-button")).not.toBeInTheDocument();
   },
 };
+
+export const VisualTestHintProp: MtNumberFieldStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtNumberField },
+    setup: () => ({ args }),
+    template: `<mt-number-field :label="args.label" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtNumberFieldStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtNumberField },
+    setup: () => ({ args }),
+    template: `<mt-number-field :label="args.label"><template #hint>Hint via slot</template></mt-number-field>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-number-field/mt-number-field.spec.ts b/packages/component-library/src/components/mt-number-field/mt-number-field.spec.ts
index f5c67b92d..7ecded48a 100644
--- a/packages/component-library/src/components/mt-number-field/mt-number-field.spec.ts
+++ b/packages/component-library/src/components/mt-number-field/mt-number-field.spec.ts
@@ -834,4 +834,37 @@ describe("mt-number-field", () => {
     // ASSERT
     expect(console.warn).not.toHaveBeenCalled();
   });
+
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    render(MtNumberField, {
+      props: {
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
+    // ARRANGE
+    render(MtNumberField, {
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = render(MtNumberField);
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-number-field/mt-number-field.vue b/packages/component-library/src/components/mt-number-field/mt-number-field.vue
index b50e63d0c..417a22f4a 100644
--- a/packages/component-library/src/components/mt-number-field/mt-number-field.vue
+++ b/packages/component-library/src/components/mt-number-field/mt-number-field.vue
@@ -78,7 +78,11 @@
     </template>
 
     <template #field-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint" :hide-icon="!!$slots.hint">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </mt-field-hint>
     </template>
   </mt-base-field>
 </template>
@@ -89,6 +93,7 @@ import type { PropType } from "vue";
 import { defineComponent } from "vue";
 import MtTextField from "../mt-text-field/mt-text-field.vue";
 import MtIcon from "../mt-icon/mt-icon.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import { useI18n } from "vue-i18n";
 
 export default defineComponent({
@@ -96,6 +101,7 @@ export default defineComponent({
 
   components: {
     "mt-icon": MtIcon,
+    "mt-field-hint": MtFieldHint,
   },
 
   extends: MtTextField,
diff --git a/packages/component-library/src/components/mt-password-field/mt-password-field.interactive.stories.ts b/packages/component-library/src/components/mt-password-field/mt-password-field.interactive.stories.ts
index 8199309fd..0ba7ccf39 100644
--- a/packages/component-library/src/components/mt-password-field/mt-password-field.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-password-field/mt-password-field.interactive.stories.ts
@@ -1,5 +1,6 @@
 import { within, userEvent, expect } from "@storybook/test";
 
+import MtPasswordField from "./mt-password-field.vue";
 import meta, {
   type MtPasswordFieldMeta,
   type MtPasswordFieldStory,
@@ -39,13 +40,6 @@ export const VisualTestSuffix: MtPasswordFieldStory = {
   },
 };
 
-export const VisualTestHint: MtPasswordFieldStory = {
-  name: "Should display hint",
-  args: {
-    hint: "hint",
-  },
-};
-
 export const VisualTestDisabled: MtPasswordFieldStory = {
   name: "Should disable",
   args: {
@@ -79,3 +73,34 @@ export const VisualTestShowPassword: MtPasswordFieldStory = {
     );
   },
 };
+
+export const VisualTestHintProp: MtPasswordFieldStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtPasswordField },
+    setup: () => ({ args }),
+    template: `<mt-password-field :label="args.label" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtPasswordFieldStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtPasswordField },
+    setup: () => ({ args }),
+    template: `<mt-password-field :label="args.label"><template #hint>Hint via slot</template></mt-password-field>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-password-field/mt-password-field.spec.ts b/packages/component-library/src/components/mt-password-field/mt-password-field.spec.ts
index 96708d3ad..a139f4a36 100644
--- a/packages/component-library/src/components/mt-password-field/mt-password-field.spec.ts
+++ b/packages/component-library/src/components/mt-password-field/mt-password-field.spec.ts
@@ -224,4 +224,37 @@ describe("mt-password-field", () => {
     // ASSERT
     expect(handler).not.toHaveBeenCalled();
   });
+
+  it("displays a hint passed via the hint prop", async () => {
+    // ARRANGE
+    await render(MtPasswordField, {
+      props: {
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", async () => {
+    // ARRANGE
+    await render(MtPasswordField, {
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", async () => {
+    // ARRANGE
+    const { container } = await render(MtPasswordField);
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-password-field/mt-password-field.vue b/packages/component-library/src/components/mt-password-field/mt-password-field.vue
index 1bfd6709a..7fc947e13 100644
--- a/packages/component-library/src/components/mt-password-field/mt-password-field.vue
+++ b/packages/component-library/src/components/mt-password-field/mt-password-field.vue
@@ -63,17 +63,20 @@
     </template>
 
     <template #field-hint>
-      <slot name="hint">
-        {{ hint }}
-      </slot>
+      <mt-field-hint v-if="showFieldHint" :hide-icon="!!$slots.hint">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </mt-field-hint>
     </template>
   </mt-base-field>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed, useSlots } from "vue";
 import MtBaseField from "../_internal/mt-base-field/mt-base-field.vue";
 import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import MtIcon from "../mt-icon/mt-icon.vue";
 import { useI18n } from "vue-i18n";
 
@@ -85,7 +88,6 @@ const props = withDefaults(
     placeholder?: string;
     disabled?: boolean;
     error?: { code: number; detail: string } | null;
-    // @deprecated - use slot "hint" instead
     hint?: string | null;
     toggable?: boolean;
     name?: string | undefined;
@@ -103,7 +105,6 @@ const props = withDefaults(
     placeholder: "",
     toggable: true,
     error: null,
-    // @deprecated - use slot "hint" instead
     hint: null,
     required: false,
     helpText: "",
@@ -116,6 +117,12 @@ const props = withDefaults(
   },
 );
 
+const slots = useSlots();
+
+const showFieldHint = computed(
+  () => !!slots.hint || (props.hint != null && String(props.hint).trim() !== ""),
+);
+
 const emit = defineEmits<{
   (e: "change", value: string | undefined): void;
   (e: "submit"): void;
diff --git a/packages/component-library/src/components/mt-radio-group/mt-radio-group-root.vue b/packages/component-library/src/components/mt-radio-group/mt-radio-group-root.vue
index c4c70c4be..79f11bbc7 100644
--- a/packages/component-library/src/components/mt-radio-group/mt-radio-group-root.vue
+++ b/packages/component-library/src/components/mt-radio-group/mt-radio-group-root.vue
@@ -30,17 +30,20 @@
 
     <mt-field-error :error="error" :style="{ gridArea: 'error' }" />
 
-    <div v-if="$slots.hint" class="mt-radio-group-root__hint" :style="{ gridArea: 'hint' }">
-      <slot name="hint" />
+    <div v-if="showFieldHint" class="mt-radio-group-root__hint" :style="{ gridArea: 'hint' }">
+      <mt-field-hint :hide-icon="!!$slots.hint">
+        <slot name="hint">{{ hint }}</slot>
+      </mt-field-hint>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, provide, readonly, useId } from "vue";
+import { computed, provide, readonly, useId, useSlots } from "vue";
 import MtFieldLabel from "../_internal/mt-field-label/mt-field-label.vue";
 import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
 import MtHelpText from "../mt-help-text/mt-help-text.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
 
 const props = withDefaults(
@@ -54,6 +57,10 @@ const props = withDefaults(
     error?: {
       detail: string;
     };
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint?: string | null;
   }>(),
   {
     modelValue: null,
@@ -63,9 +70,16 @@ const props = withDefaults(
     helpText: "",
     name: undefined,
     error: undefined,
+    hint: null,
   },
 );
 
+const slots = useSlots();
+
+const showFieldHint = computed(
+  () => !!slots.hint || (props.hint != null && String(props.hint).trim() !== ""),
+);
+
 const emit = defineEmits<{
   "update:modelValue": [value: string | number | boolean | null];
 }>();
diff --git a/packages/component-library/src/components/mt-radio-group/mt-radio-group.interactive.stories.ts b/packages/component-library/src/components/mt-radio-group/mt-radio-group.interactive.stories.ts
index fc8d058ac..e80e6addc 100644
--- a/packages/component-library/src/components/mt-radio-group/mt-radio-group.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-radio-group/mt-radio-group.interactive.stories.ts
@@ -226,56 +226,6 @@ export const VisualTestHelpText: Story = {
   },
 };
 
-export const VisualTestHint: Story = {
-  name: "Should render the radio group with hint text",
-  args: {
-    label: "Select an option",
-    hint: "Additional information about this field",
-    change: fn(),
-  },
-  render: (args: typeof meta.args) => ({
-    components: { MtRadioGroupRoot, MtRadioGroupList, MtRadioGroupItem },
-    setup() {
-      const modelValue = ref("value1");
-
-      const handleUpdate = (value: string) => {
-        modelValue.value = value;
-        args!.change(value);
-      };
-
-      return {
-        args,
-        modelValue,
-        handleUpdate,
-      };
-    },
-    template: `
-      <MtRadioGroupRoot
-        v-model="modelValue"
-        :disabled="args.disabled"
-        :label="args.label"
-        :help-text="args.helpText"
-        :name="args.name"
-        :error="args.error"
-        @update:modelValue="handleUpdate"
-      >
-        <template #default>
-          <MtRadioGroupList>
-            <MtRadioGroupItem id="option-1" value="value1" label="Option 1" />
-            <MtRadioGroupItem id="option-2" value="value2" label="Option 2" />
-            <MtRadioGroupItem id="option-3" value="value3" label="Option 3" />
-          </MtRadioGroupList>
-        </template>
-        <template v-if="args.hint" #hint>{{ args.hint }}</template>
-      </MtRadioGroupRoot>
-    `,
-  }),
-  play: ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByText("Additional information about this field")).toBeDefined();
-  },
-};
-
 export const VisualTestCustomItems: Story = {
   name: "Should render the radio group with custom items",
   args: {
@@ -368,3 +318,51 @@ export const VisualTestCustomItems: Story = {
     `,
   }),
 };
+
+export const VisualTestHintProp: Story = {
+  name: "Should display hint via prop",
+  args: {
+    label: "Select an option",
+    hint: "Hint via prop",
+  },
+  render: (args: typeof meta.args) => ({
+    components: { MtRadioGroupRoot, MtRadioGroupList, MtRadioGroupItem },
+    setup: () => ({ args }),
+    template: `
+      <MtRadioGroupRoot :label="args.label" :hint="args.hint">
+        <MtRadioGroupList>
+          <MtRadioGroupItem id="option-1" value="value1" label="Option 1" />
+          <MtRadioGroupItem id="option-2" value="value2" label="Option 2" />
+        </MtRadioGroupList>
+      </MtRadioGroupRoot>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: Story = {
+  name: "Should display hint via slot",
+  args: {
+    label: "Select an option",
+  },
+  render: (args: typeof meta.args) => ({
+    components: { MtRadioGroupRoot, MtRadioGroupList, MtRadioGroupItem },
+    setup: () => ({ args }),
+    template: `
+      <MtRadioGroupRoot :label="args.label">
+        <template #hint>Hint via slot</template>
+        <MtRadioGroupList>
+          <MtRadioGroupItem id="option-1" value="value1" label="Option 1" />
+          <MtRadioGroupItem id="option-2" value="value2" label="Option 2" />
+        </MtRadioGroupList>
+      </MtRadioGroupRoot>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-radio-group/mt-radio-group.spec.ts b/packages/component-library/src/components/mt-radio-group/mt-radio-group.spec.ts
index 6fa633cf3..7151fd27c 100644
--- a/packages/component-library/src/components/mt-radio-group/mt-radio-group.spec.ts
+++ b/packages/component-library/src/components/mt-radio-group/mt-radio-group.spec.ts
@@ -158,4 +158,37 @@ describe("mt-radio-group", () => {
     // ASSERT
     expect(screen.getByText("Please select an option")).toBeVisible();
   });
+
+  it("displays a hint passed via the hint prop", async () => {
+    // ARRANGE
+    await render(MtRadioGroupRoot, {
+      props: {
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", async () => {
+    // ARRANGE
+    await render(MtRadioGroupRoot, {
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", async () => {
+    // ARRANGE
+    const { container } = await render(MtRadioGroupRoot);
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-select/mt-select.interactive.stories.ts b/packages/component-library/src/components/mt-select/mt-select.interactive.stories.ts
index f6389042c..b4ee35800 100644
--- a/packages/component-library/src/components/mt-select/mt-select.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-select/mt-select.interactive.stories.ts
@@ -3,6 +3,7 @@ import { expect } from "@storybook/test";
 import { waitUntil } from "../../_internal/test-helper";
 import { screen } from "@storybook/test";
 
+import MtSelect from "./mt-select.vue";
 import meta, { type MtSelectMeta, type MtSelectStory } from "./mt-select.stories";
 
 export default {
@@ -595,25 +596,6 @@ export const VisualTestPlaceholderMulti: MtSelectStory = {
   },
 };
 
-export const VisualTestHint: MtSelectStory = {
-  name: "Should display hint",
-  args: {
-    hint: "hint",
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    await waitUntil(() => {
-      // Check if input item contains "Option B"
-      const selectionListItem = document.querySelector(
-        ".mt-select-selection-list__input",
-      ) as HTMLInputElement;
-      return selectionListItem?.value === "Option B";
-    });
-
-    expect(canvas.getByText(args.hint)).toBeDefined();
-  },
-};
-
 export const VisualTestDisabled: MtSelectStory = {
   name: "Should disable",
   args: {
@@ -913,3 +895,34 @@ export const VisualTestPlaceholderBehaviorFalse: MtSelectStory = {
     expect(canvas.queryByPlaceholderText(args.placeholder!)).toBeNull();
   },
 };
+
+export const VisualTestHintProp: MtSelectStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtSelect },
+    setup: () => ({ args }),
+    template: `<mt-select :label="args.label" :options="[{ id: 1, label: 'Option A', value: 'a' }]" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtSelectStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtSelect },
+    setup: () => ({ args }),
+    template: `<mt-select :label="args.label" :options="[{ id: 1, label: 'Option A', value: 'a' }]"><template #hint>Hint via slot</template></mt-select>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-select/mt-select.spec.ts b/packages/component-library/src/components/mt-select/mt-select.spec.ts
index e711c7cd3..c8246dcc1 100644
--- a/packages/component-library/src/components/mt-select/mt-select.spec.ts
+++ b/packages/component-library/src/components/mt-select/mt-select.spec.ts
@@ -1,7 +1,7 @@
 import { flushPromises, mount } from "@vue/test-utils";
 import MtSelect from "./mt-select.vue";
 
-async function createWrapper() {
+async function createWrapper({ props = {}, slots = {} } = {}) {
   const wrapper = mount(MtSelect, {
     props: {
       modelValue: "becky",
@@ -22,7 +22,9 @@ async function createWrapper() {
           value: "c",
         },
       ],
+      ...props,
     },
+    slots,
   });
 
   await wrapper.vm.$nextTick();
@@ -158,6 +160,27 @@ describe("mt-select", () => {
     expect(wrapper.vm.visibleResults[0].value).toBe("user3");
   });
 
+  it("displays a hint passed via the hint prop", async () => {
+    const wrapper = await createWrapper({ props: { hint: "Hint from prop" } });
+
+    expect(wrapper.find(".mt-field-hint").text()).toContain("Hint from prop");
+  });
+
+  it("renders markup passed via the hint slot", async () => {
+    const wrapper = await createWrapper({
+      slots: { hint: '<span data-testid="custom-hint">Hint from slot</span>' },
+    });
+
+    expect(wrapper.find('[data-testid="custom-hint"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="custom-hint"]').text()).toBe("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", async () => {
+    const wrapper = await createWrapper();
+
+    expect(wrapper.find(".mt-field-hint").exists()).toBe(false);
+  });
+
   it("should select the active item with the enter key", async () => {
     const wrapper = mount(MtSelect, {
       props: {
diff --git a/packages/component-library/src/components/mt-select/mt-select.vue b/packages/component-library/src/components/mt-select/mt-select.vue
index f988317fd..5d7a246a4 100644
--- a/packages/component-library/src/components/mt-select/mt-select.vue
+++ b/packages/component-library/src/components/mt-select/mt-select.vue
@@ -113,7 +113,11 @@
     </template>
 
     <template #mt-select-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint" :hide-icon="!!$slots.hint">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </mt-field-hint>
     </template>
   </mt-select-base>
 </template>
@@ -125,6 +129,7 @@ import { defineComponent } from "vue";
 import { debounce } from "@/utils/debounce";
 import { getPropertyValue } from "@/utils/object";
 import { isPromise } from "@/utils/promise";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import MtSelectBase from "../_internal/mt-select-base/mt-select-base.vue";
 import MtSelectResultList from "../_internal/mt-select-base/_internal/mt-select-result-list.vue";
 import MtSelectResult from "../_internal/mt-select-base/_internal/mt-select-result.vue";
@@ -136,6 +141,7 @@ export default defineComponent({
   name: "MtSelect",
 
   components: {
+    "mt-field-hint": MtFieldHint,
     "mt-select-base": MtSelectBase,
     "mt-select-result-list": MtSelectResultList,
     "mt-select-selection-list": MtSelectSelectionList,
@@ -354,6 +360,15 @@ export default defineComponent({
       required: false,
       default: false,
     },
+
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null,
+    },
   },
 
   emits: [
@@ -396,6 +411,10 @@ export default defineComponent({
   },
 
   computed: {
+    showFieldHint(): boolean {
+      return !!this.$slots.hint || (this.hint != null && String(this.hint).trim() !== "");
+    },
+
     visibleValues(): any[] {
       if (
         typeof this.currentValue === "string" ||
diff --git a/packages/component-library/src/components/mt-slider/mt-slider.interactive.stories.ts b/packages/component-library/src/components/mt-slider/mt-slider.interactive.stories.ts
index f19096435..a942021e9 100644
--- a/packages/component-library/src/components/mt-slider/mt-slider.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-slider/mt-slider.interactive.stories.ts
@@ -1,4 +1,5 @@
 import { expect, within, userEvent, fireEvent } from "@storybook/test";
+import MtSlider from "./mt-slider.vue";
 import meta, { type MtSliderMeta, type MtSliderStory } from "./mt-slider.stories";
 
 export default {
@@ -412,3 +413,34 @@ function extractElements(canvas: any) {
     rightSlider: canvas.getByTestId("right-slider"),
   };
 }
+
+export const VisualTestHintProp: MtSliderStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtSlider },
+    setup: () => ({ args }),
+    template: `<mt-slider :label="args.label" :model-value="0" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtSliderStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtSlider },
+    setup: () => ({ args }),
+    template: `<mt-slider :label="args.label" :model-value="0"><template #hint>Hint via slot</template></mt-slider>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-slider/mt-slider.spec.ts b/packages/component-library/src/components/mt-slider/mt-slider.spec.ts
new file mode 100644
index 000000000..464bb76bb
--- /dev/null
+++ b/packages/component-library/src/components/mt-slider/mt-slider.spec.ts
@@ -0,0 +1,46 @@
+import { render, screen, type RenderResult } from "@testing-library/vue";
+import { describe, it, expect } from "vitest";
+import MtSlider from "./mt-slider.vue";
+
+function renderSlider(options: Parameters<typeof render>[1] = {}): RenderResult {
+  return render(MtSlider, {
+    ...options,
+    props: {
+      label: "Slider",
+      modelValue: 0,
+      hasFocus: false,
+      ...options.props,
+    },
+  });
+}
+
+describe("mt-slider", () => {
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    renderSlider({ props: { hint: "Hint from prop" } });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
+    // ARRANGE
+    renderSlider({
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = renderSlider();
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/component-library/src/components/mt-slider/mt-slider.vue b/packages/component-library/src/components/mt-slider/mt-slider.vue
index c21cf36b3..bdf312438 100644
--- a/packages/component-library/src/components/mt-slider/mt-slider.vue
+++ b/packages/component-library/src/components/mt-slider/mt-slider.vue
@@ -99,7 +99,11 @@
     </template>
 
     <template #field-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint" :hide-icon="!!$slots.hint">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </mt-field-hint>
     </template>
   </mt-base-field>
 </template>
@@ -109,6 +113,7 @@ import type { PropType } from "vue";
 import { defineComponent } from "vue";
 import MtBaseField from "@/components/_internal/mt-base-field/mt-base-field.vue";
 import MtNumberField from "@/components/mt-number-field/mt-number-field.vue";
+import MtFieldHint from "@/components/_internal/mt-field-hint/mt-field-hint.vue";
 import MtTooltipDirective from "@/directives/tooltip.directive";
 
 export default defineComponent({
@@ -118,7 +123,7 @@ export default defineComponent({
     tooltip: MtTooltipDirective,
   },
 
-  components: { MtNumberField, MtBaseField },
+  components: { MtNumberField, MtBaseField, MtFieldHint },
 
   extends: MtBaseField,
 
@@ -202,6 +207,15 @@ export default defineComponent({
       required: false,
       default: 5,
     },
+
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null,
+    },
   },
 
   data() {
@@ -321,6 +335,10 @@ export default defineComponent({
   },
 
   computed: {
+    showFieldHint(): boolean {
+      return !!this.$slots.hint || (this.hint != null && String(this.hint).trim() !== "");
+    },
+
     stringRepresentation(): string {
       return this.modelValue.toString();
     },
@@ -405,6 +423,7 @@ export default defineComponent({
   width: 5ch;
   flex-grow: 0;
   flex-shrink: 0;
+  margin-bottom: 0;
 }
 
 .mt-slider .mt-field--default > .mt-field__label {
diff --git a/packages/component-library/src/components/mt-text-field/mt-text-field.interactive.stories.ts b/packages/component-library/src/components/mt-text-field/mt-text-field.interactive.stories.ts
index 5880918a9..cd8d4f55d 100644
--- a/packages/component-library/src/components/mt-text-field/mt-text-field.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-text-field/mt-text-field.interactive.stories.ts
@@ -1,6 +1,7 @@
 import { within, userEvent } from "@storybook/test";
 import { expect } from "@storybook/test";
 
+import MtTextField from "./mt-text-field.vue";
 import meta, { type MtTextFieldMeta, type MtTextFieldStory } from "./mt-text-field.stories";
 
 export default {
@@ -47,18 +48,6 @@ export const VisualTestSuffix: MtTextFieldStory = {
   },
 };
 
-export const VisualTestHint: MtTextFieldStory = {
-  name: "Should display hint",
-  args: {
-    hint: "hint",
-  },
-  play: ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.getByText(args.hint)).toBeDefined();
-  },
-};
-
 export const VisualTestEmptyCharacterCount: MtTextFieldStory = {
   name: "Should display empty character count",
   args: {
@@ -250,3 +239,34 @@ export const VisualTestHandleFocus: MtTextFieldStory = {
     expect(args.focus).toHaveBeenCalledOnce();
   },
 };
+
+export const VisualTestHintProp: MtTextFieldStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtTextField },
+    setup: () => ({ args }),
+    template: `<mt-text-field :label="args.label" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtTextFieldStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtTextField },
+    setup: () => ({ args }),
+    template: `<mt-text-field :label="args.label"><template #hint>Hint via slot</template></mt-text-field>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-text-field/mt-text-field.spec.ts b/packages/component-library/src/components/mt-text-field/mt-text-field.spec.ts
index db8973d39..4434298ae 100644
--- a/packages/component-library/src/components/mt-text-field/mt-text-field.spec.ts
+++ b/packages/component-library/src/components/mt-text-field/mt-text-field.spec.ts
@@ -62,4 +62,37 @@ describe("mt-text-field", () => {
     // the value resets after blur, because the input is controlled
     expect(screen.getByRole("textbox")).toHaveValue("Hello");
   });
+
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    render(MtTextField, {
+      props: {
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
+    // ARRANGE
+    render(MtTextField, {
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = render(MtTextField);
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-text-field/mt-text-field.vue b/packages/component-library/src/components/mt-text-field/mt-text-field.vue
index eabec143c..17bdf5e7b 100644
--- a/packages/component-library/src/components/mt-text-field/mt-text-field.vue
+++ b/packages/component-library/src/components/mt-text-field/mt-text-field.vue
@@ -50,7 +50,9 @@
     </template>
 
     <template #field-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint" :hide-icon="!!$slots.hint">
+        <slot name="hint">{{ hint }}</slot>
+      </mt-field-hint>
     </template>
 
     <template v-if="maxLength" #field-hint-right>
@@ -63,6 +65,7 @@
 import { defineComponent, type PropType } from "vue";
 import MtBaseField from "../_internal/mt-base-field/mt-base-field.vue";
 import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 
 export default defineComponent({
   name: "MtTextField",
@@ -70,6 +73,7 @@ export default defineComponent({
   components: {
     "mt-field-error": MtFieldError,
     "mt-base-field": MtBaseField,
+    "mt-field-hint": MtFieldHint,
   },
 
   props: {
@@ -109,6 +113,15 @@ export default defineComponent({
       default: null,
     },
 
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null,
+    },
+
     /**
      * The size of the text field.
      *
@@ -242,6 +255,10 @@ export default defineComponent({
   },
 
   computed: {
+    showFieldHint(): boolean {
+      return !!this.$slots.hint || (this.hint != null && String(this.hint).trim() !== "");
+    },
+
     hasError(): boolean {
       // @ts-expect-error - isValid gets called in the mixin
       return !this.isValid || !!this.error;
diff --git a/packages/component-library/src/components/mt-textarea/mt-textarea.interactive.stories.ts b/packages/component-library/src/components/mt-textarea/mt-textarea.interactive.stories.ts
index cad456e9a..83e068dec 100644
--- a/packages/component-library/src/components/mt-textarea/mt-textarea.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-textarea/mt-textarea.interactive.stories.ts
@@ -1,6 +1,7 @@
 import { within, userEvent } from "@storybook/test";
 import { expect } from "@storybook/test";
 
+import MtTextarea from "./mt-textarea.vue";
 import meta, { type MtTextareaMeta, type MtTextareaStory } from "./mt-textarea.stories";
 
 export default {
@@ -9,18 +10,6 @@ export default {
   tags: ["!autodocs"],
 } as MtTextareaMeta;
 
-export const VisualTestHint: MtTextareaStory = {
-  name: "Should display hint",
-  args: {
-    hint: "hint",
-  },
-  play: ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.getByText(args.hint)).toBeDefined();
-  },
-};
-
 export const VisualTestCharacterCount: MtTextareaStory = {
   name: "Should display character count with text",
   args: {
@@ -127,3 +116,34 @@ export const VisualTestHelpText: MtTextareaStory = {
     helpText: "This is a help text",
   },
 };
+
+export const VisualTestHintProp: MtTextareaStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtTextarea },
+    setup: () => ({ args }),
+    template: `<mt-textarea :label="args.label" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtTextareaStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtTextarea },
+    setup: () => ({ args }),
+    template: `<mt-textarea :label="args.label"><template #hint>Hint via slot</template></mt-textarea>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-textarea/mt-textarea.spec.ts b/packages/component-library/src/components/mt-textarea/mt-textarea.spec.ts
index 5002b953f..044683295 100644
--- a/packages/component-library/src/components/mt-textarea/mt-textarea.spec.ts
+++ b/packages/component-library/src/components/mt-textarea/mt-textarea.spec.ts
@@ -148,16 +148,37 @@ describe("mt-textarea", () => {
     expect(screen.getByRole("textbox")).toBeRequired();
   });
 
-  it("displays a hint", async () => {
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    render(MtTextarea, {
+      props: {
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
     // ARRANGE
     render(MtTextarea, {
       slots: {
-        hint: "Hint",
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
       },
     });
 
     // ASSERT
-    expect(screen.getByText("Hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = render(MtTextarea);
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
   });
 
   it("displays a helptext", async () => {
diff --git a/packages/component-library/src/components/mt-textarea/mt-textarea.stories.ts b/packages/component-library/src/components/mt-textarea/mt-textarea.stories.ts
index c1b4580d1..890b58e65 100644
--- a/packages/component-library/src/components/mt-textarea/mt-textarea.stories.ts
+++ b/packages/component-library/src/components/mt-textarea/mt-textarea.stories.ts
@@ -29,7 +29,7 @@ export default {
   @blur="args.blur"
   @focus="args.focus"
 >
-  <template #hint>{{ args.hint }}</template>
+  <template v-if="args.hint" #hint>{{ args.hint }}</template>
 </mt-textarea>`,
     components: { MtTextarea },
     setup: () => ({ args }),
diff --git a/packages/component-library/src/components/mt-textarea/mt-textarea.vue b/packages/component-library/src/components/mt-textarea/mt-textarea.vue
index 73fde2d71..78cc3687d 100644
--- a/packages/component-library/src/components/mt-textarea/mt-textarea.vue
+++ b/packages/component-library/src/components/mt-textarea/mt-textarea.vue
@@ -52,8 +52,10 @@
       :style="{ gridArea: 'error' }"
     />
 
-    <div v-if="!!$slots.hint" class="mt-textarea__hint">
-      <slot name="hint" />
+    <div v-if="showFieldHint" class="mt-textarea__hint">
+      <mt-field-hint :hide-icon="!!$slots.hint">
+        <slot name="hint">{{ hint }}</slot>
+      </mt-field-hint>
     </div>
 
     <span v-if="!!maxLength" class="mt-textarea__max-length"
@@ -63,10 +65,11 @@
 </template>
 
 <script setup lang="ts">
-import { useId } from "vue";
+import { computed, useSlots, useId } from "vue";
 import MtFieldLabel from "../_internal/mt-field-label/mt-field-label.vue";
 import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
 import MtHelpText from "../mt-help-text/mt-help-text.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 
 const model = defineModel({
   type: String,
@@ -82,7 +85,7 @@ defineEmits<{
   blur: void;
 }>();
 
-defineProps<{
+const props = defineProps<{
   required?: boolean;
   disabled?: boolean;
   name?: string;
@@ -95,7 +98,14 @@ defineProps<{
   maxLength?: number;
   isInherited?: boolean;
   isInheritanceField?: boolean;
+  hint?: string | null;
 }>();
+
+const slots = useSlots();
+
+const showFieldHint = computed(
+  () => !!slots.hint || (props.hint != null && String(props.hint).trim() !== ""),
+);
 </script>
 
 <style scoped>
diff --git a/packages/component-library/src/components/mt-unit-field/mt-unit-field.interactive.stories.ts b/packages/component-library/src/components/mt-unit-field/mt-unit-field.interactive.stories.ts
index e1d6be79f..b98b5bcb2 100644
--- a/packages/component-library/src/components/mt-unit-field/mt-unit-field.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-unit-field/mt-unit-field.interactive.stories.ts
@@ -1,6 +1,7 @@
 import { within, userEvent, screen } from "@storybook/test";
 import { expect } from "@storybook/test";
 
+import MtUnitField from "./mt-unit-field.vue";
 import meta, { type MtUnitFieldMeta, type MtUnitFieldStory } from "./mt-unit-field.stories";
 
 export default {
@@ -73,3 +74,34 @@ export const VisualTestErrorState: MtUnitFieldStory = {
     expect(errorMessage).toHaveTextContent(errorDetail);
   },
 };
+
+export const VisualTestHintProp: MtUnitFieldStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtUnitField },
+    setup: () => ({ args }),
+    template: `<mt-unit-field :label="args.label" default-unit="mm" :model-value="0" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtUnitFieldStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtUnitField },
+    setup: () => ({ args }),
+    template: `<mt-unit-field :label="args.label" default-unit="mm" :model-value="0"><template #hint>Hint via slot</template></mt-unit-field>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-unit-field/mt-unit-field.spec.ts b/packages/component-library/src/components/mt-unit-field/mt-unit-field.spec.ts
index ccf3ce245..8ac535f77 100644
--- a/packages/component-library/src/components/mt-unit-field/mt-unit-field.spec.ts
+++ b/packages/component-library/src/components/mt-unit-field/mt-unit-field.spec.ts
@@ -103,4 +103,48 @@ describe("mt-unit-field", () => {
     expect(modelValueHandler).toHaveBeenCalledWith(0.1); // 100 mm = 1 m
     expect(unitHandler).toHaveBeenCalledWith("m");
   });
+
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    render(MtUnitField, {
+      props: {
+        modelValue: 0,
+        defaultUnit: "mm",
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
+    // ARRANGE
+    render(MtUnitField, {
+      props: {
+        modelValue: 0,
+        defaultUnit: "mm",
+      },
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = render(MtUnitField, {
+      props: {
+        modelValue: 0,
+        defaultUnit: "mm",
+      },
+    });
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-unit-field/mt-unit-field.vue b/packages/component-library/src/components/mt-unit-field/mt-unit-field.vue
index 369c49011..f36b4fa21 100644
--- a/packages/component-library/src/components/mt-unit-field/mt-unit-field.vue
+++ b/packages/component-library/src/components/mt-unit-field/mt-unit-field.vue
@@ -2,6 +2,7 @@
   <div class="mt-unit-field">
     <mt-number-field
       :model-value="modelValue"
+      :hint="hint"
       :placeholder="placeholder"
       :number-type="numberType"
       :step="step"
@@ -40,18 +41,24 @@
           @update:model-value="onUnitChange"
         />
       </template>
+
+      <template v-if="slots.hint" #hint>
+        <slot name="hint" />
+      </template>
     </mt-number-field>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed, useSlots, watch } from "vue";
 import MtNumberField from "../mt-number-field/mt-number-field.vue";
 import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
 import MtUnitSelect from "../_internal/mt-unit-select/mt-unit-select.vue";
 import convert from "convert-units";
 import type { Unit } from "convert-units";
 
+const slots = useSlots();
+
 const props = withDefaults(
   defineProps<{
     defaultUnit: Unit;
@@ -79,6 +86,10 @@ const props = withDefaults(
     copyable?: boolean;
     copyableTooltip?: boolean;
     zIndex?: number | null;
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint?: string | null;
   }>(),
   {
     modelValue: undefined,
@@ -86,6 +97,7 @@ const props = withDefaults(
     step: 1,
     defaultUnit: "mm",
     zIndex: null,
+    hint: null,
   },
 );
 
diff --git a/packages/component-library/src/components/mt-url-field/mt-url-field.interactive.stories.ts b/packages/component-library/src/components/mt-url-field/mt-url-field.interactive.stories.ts
index 0576ca4b3..58636691c 100644
--- a/packages/component-library/src/components/mt-url-field/mt-url-field.interactive.stories.ts
+++ b/packages/component-library/src/components/mt-url-field/mt-url-field.interactive.stories.ts
@@ -1,4 +1,5 @@
 import { expect, fn, userEvent, within } from "@storybook/test";
+import MtUrlField from "./mt-url-field.vue";
 import meta, { type MtUrlFieldMeta, type MtUrlFieldStory } from "./mt-url-field.stories";
 import { waitUntil } from "@/_internal/test-helper";
 
@@ -108,13 +109,6 @@ export const VisualTestHelpText: MtUrlFieldStory = {
   },
 };
 
-export const VisualTestHint: MtUrlFieldStory = {
-  name: "Hint",
-  args: {
-    hint: "This is a hint",
-  },
-};
-
 export const VisualTestCopyToClipboard: MtUrlFieldStory = {
   name: "Copy to clipboard",
   args: {
@@ -149,3 +143,34 @@ export const changeModelValueFromOutside: MtUrlFieldStory = {
     expect(input.value).toBe("changed.com");
   },
 };
+
+export const VisualTestHintProp: MtUrlFieldStory = {
+  name: "Should display hint via prop",
+  args: {
+    hint: "Hint via prop",
+  },
+  render: (args) => ({
+    components: { MtUrlField },
+    setup: () => ({ args }),
+    template: `<mt-url-field :label="args.label" :hint="args.hint" />`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via prop")).toBeDefined();
+  },
+};
+
+export const VisualTestHintSlot: MtUrlFieldStory = {
+  name: "Should display hint via slot",
+  render: (args) => ({
+    components: { MtUrlField },
+    setup: () => ({ args }),
+    template: `<mt-url-field :label="args.label"><template #hint>Hint via slot</template></mt-url-field>`,
+  }),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.getByText("Hint via slot")).toBeDefined();
+  },
+};
diff --git a/packages/component-library/src/components/mt-url-field/mt-url-field.spec.ts b/packages/component-library/src/components/mt-url-field/mt-url-field.spec.ts
index ddf1b57dc..041bb656b 100644
--- a/packages/component-library/src/components/mt-url-field/mt-url-field.spec.ts
+++ b/packages/component-library/src/components/mt-url-field/mt-url-field.spec.ts
@@ -581,4 +581,37 @@ describe("mt-url-field", () => {
 
     expect(handler).not.toHaveBeenCalled();
   });
+
+  it("displays a hint passed via the hint prop", () => {
+    // ARRANGE
+    render(MtUrlField, {
+      props: {
+        hint: "Hint from prop",
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByText("Hint from prop")).toBeVisible();
+  });
+
+  it("renders markup passed via the hint slot", () => {
+    // ARRANGE
+    render(MtUrlField, {
+      slots: {
+        hint: '<span data-testid="custom-hint">Hint from slot</span>',
+      },
+    });
+
+    // ASSERT
+    expect(screen.getByTestId("custom-hint")).toBeVisible();
+    expect(screen.getByTestId("custom-hint")).toHaveTextContent("Hint from slot");
+  });
+
+  it("does not render a hint when neither prop nor slot is provided", () => {
+    // ARRANGE
+    const { container } = render(MtUrlField);
+
+    // ASSERT
+    expect(container.querySelector(".mt-field-hint")).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/components/mt-url-field/mt-url-field.vue b/packages/component-library/src/components/mt-url-field/mt-url-field.vue
index a19601008..764dc79f2 100644
--- a/packages/component-library/src/components/mt-url-field/mt-url-field.vue
+++ b/packages/component-library/src/components/mt-url-field/mt-url-field.vue
@@ -110,18 +110,21 @@
 
     <mt-field-error :error="error" :style="{ gridArea: 'error' }" />
 
-    <div v-if="$slots.hint" class="mt-url-field__hint">
-      <slot name="hint" />
+    <div v-if="showFieldHint" class="mt-url-field__hint">
+      <mt-field-hint :hide-icon="!!$slots.hint">
+        <slot name="hint">{{ hint }}</slot>
+      </mt-field-hint>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useId, computed, watch, ref, defineProps, defineEmits } from "vue";
+import { useId, computed, watch, ref, useSlots } from "vue";
 import MtIcon from "../mt-icon/mt-icon.vue";
 import MtFieldLabel from "../_internal/mt-field-label/mt-field-label.vue";
 import MtHelpText from "../mt-help-text/mt-help-text.vue";
 import MtFieldError from "../_internal/mt-field-error/mt-field-error.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import MtTooltip from "../mt-tooltip/mt-tooltip.vue";
 import { useClipboard } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
@@ -168,6 +171,10 @@ const props = withDefaults(
     placeholder?: string;
     name?: string;
     size?: "small" | "default";
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint?: string | null;
   }>(),
   {
     size: "default",
@@ -176,6 +183,12 @@ const props = withDefaults(
 
 const id = useId();
 
+const slots = useSlots();
+
+const showFieldHint = computed(
+  () => !!slots.hint || (props.hint != null && String(props.hint).trim() !== ""),
+);
+
 const currentValue = ref(modelValue.value);
 const sslActive = ref(true);