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/src/components/form/_internal/mt-field-hint/mt-field-hint.vue b/packages/component-library/src/components/form/_internal/mt-field-hint/mt-field-hint.vue
new file mode 100644
index 000000000..43ffdca30
--- /dev/null
+++ b/packages/component-library/src/components/form/_internal/mt-field-hint/mt-field-hint.vue
@@ -0,0 +1,41 @@
+<template>
+  <span class="mt-field-hint">
+    <mt-icon
+      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/icons-media/mt-icon/mt-icon.vue";
+</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/form/mt-colorpicker/mt-colorpicker.vue b/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue
index bb326ca87..64b0c2e43 100644
--- a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue
+++ b/packages/component-library/src/components/form/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">
+        <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 "../../_internal/mt-floating-ui/mt-floating-ui.vue";
 import MtText from "@/components/content/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/form/mt-email-field/mt-email-field.vue b/packages/component-library/src/components/form/mt-email-field/mt-email-field.vue
index 13fe8f8b3..13b087ec6 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
@@ -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>
+        <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 "../../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";
@@ -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/form/mt-number-field/mt-number-field.vue b/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
index 0111ae489..e820d9d78 100644
--- a/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
+++ b/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
@@ -83,7 +83,11 @@
     </template>
 
     <template #field-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </mt-field-hint>
     </template>
   </mt-base-field>
 </template>
@@ -94,6 +98,7 @@ import type { PropType } from "vue";
 import { defineComponent } from "vue";
 import MtTextField from "../mt-text-field/mt-text-field.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
+import MtFieldHint from "../_internal/mt-field-hint/mt-field-hint.vue";
 import { useI18n } from "vue-i18n";
 
 export default defineComponent({
@@ -101,6 +106,7 @@ export default defineComponent({
 
   components: {
     "mt-icon": MtIcon,
+    "mt-field-hint": MtFieldHint,
   },
 
   extends: MtTextField,
diff --git a/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue b/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
index 9891b9d15..e099435e4 100644
--- a/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
+++ b/packages/component-library/src/components/form/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">
+        <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 "../../icons-media/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/form/mt-radio-group/mt-radio-group-root.vue b/packages/component-library/src/components/form/mt-radio-group/mt-radio-group-root.vue
index 4d161e665..ba1f2f318 100644
--- a/packages/component-library/src/components/form/mt-radio-group/mt-radio-group-root.vue
+++ b/packages/component-library/src/components/form/mt-radio-group/mt-radio-group-root.vue
@@ -25,18 +25,21 @@
 
     <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>
+        <slot name="hint">{{ hint }}</slot>
+      </mt-field-hint>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, provide, readonly } from "vue";
+import { computed, provide, readonly, useSlots } from "vue";
 import { useId } from "@/composables/useId";
 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 props = withDefaults(
   defineProps<{
@@ -49,6 +52,10 @@ const props = withDefaults(
     error?: {
       detail: string;
     };
+    /**
+     * Optional caption below the field. The `#hint` slot takes precedence when provided.
+     */
+    hint?: string | null;
   }>(),
   {
     modelValue: null,
@@ -58,9 +65,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/form/mt-select/mt-select.vue b/packages/component-library/src/components/form/mt-select/mt-select.vue
index 196191498..abdeefd2b 100644
--- a/packages/component-library/src/components/form/mt-select/mt-select.vue
+++ b/packages/component-library/src/components/form/mt-select/mt-select.vue
@@ -112,7 +112,11 @@
     </template>
 
     <template #mt-select-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint">
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </mt-field-hint>
     </template>
   </mt-select-base>
 </template>
@@ -124,6 +128,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";
@@ -135,6 +140,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,
@@ -353,6 +359,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: [
@@ -395,6 +410,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/form/mt-slider/mt-slider.vue b/packages/component-library/src/components/form/mt-slider/mt-slider.vue
index e895cd5f1..fbbd979c3 100644
--- a/packages/component-library/src/components/form/mt-slider/mt-slider.vue
+++ b/packages/component-library/src/components/form/mt-slider/mt-slider.vue
@@ -99,7 +99,11 @@
     </template>
 
     <template #field-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint">
+        <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/form/_internal/mt-base-field/mt-base-field.vue";
 import MtNumberField from "@/components/form/mt-number-field/mt-number-field.vue";
+import MtFieldHint from "@/components/form/_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();
     },
diff --git a/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue b/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue
index b71eeb7a9..2afa9e95d 100644
--- a/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue
+++ b/packages/component-library/src/components/form/mt-text-field/mt-text-field.vue
@@ -50,7 +50,9 @@
     </template>
 
     <template #field-hint>
-      <slot name="hint" />
+      <mt-field-hint v-if="showFieldHint">
+        <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/form/mt-textarea/mt-textarea.stories.ts b/packages/component-library/src/components/form/mt-textarea/mt-textarea.stories.ts
index 6a184e057..ce4a613d8 100644
--- a/packages/component-library/src/components/form/mt-textarea/mt-textarea.stories.ts
+++ b/packages/component-library/src/components/form/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/form/mt-textarea/mt-textarea.vue b/packages/component-library/src/components/form/mt-textarea/mt-textarea.vue
index 40f3d21b9..4b438e4b2 100644
--- a/packages/component-library/src/components/form/mt-textarea/mt-textarea.vue
+++ b/packages/component-library/src/components/form/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>
+        <slot name="hint">{{ hint }}</slot>
+      </mt-field-hint>
     </div>
 
     <span v-if="!!maxLength" class="mt-textarea__max-length"
@@ -63,26 +65,28 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue";
 import { useId } from "@/composables/useId";
 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,
 });
 
-const id = useId();
-
 defineEmits<{
-  change: [typeof model.value];
-  "inheritance-remove": void;
-  "inheritance-restore": void;
-  focus: void;
-  blur: void;
+  change: [string | undefined];
+  "inheritance-remove": [];
+  "inheritance-restore": [];
+  focus: [];
+  blur: [];
 }>();
 
-defineProps<{
+const id = useId();
+
+const props = defineProps<{
   required?: boolean;
   disabled?: boolean;
   name?: string;
@@ -95,7 +99,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/form/mt-unit-field/mt-unit-field.vue b/packages/component-library/src/components/form/mt-unit-field/mt-unit-field.vue
index d2c494fbe..126dca696 100644
--- a/packages/component-library/src/components/form/mt-unit-field/mt-unit-field.vue
+++ b/packages/component-library/src/components/form/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/form/mt-url-field/mt-url-field.vue b/packages/component-library/src/components/form/mt-url-field/mt-url-field.vue
index 6ca82588e..837d28653 100644
--- a/packages/component-library/src/components/form/mt-url-field/mt-url-field.vue
+++ b/packages/component-library/src/components/form/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>
+        <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 "../../icons-media/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 "../../overlay/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);