diff --git a/.changeset/silly-colts-make.md b/.changeset/silly-colts-make.md
new file mode 100644
index 0000000000..3fa61867fe
--- /dev/null
+++ b/.changeset/silly-colts-make.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": minor
+---
+
+Adds custom label feature to OmegaForm
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
index d2afbd7282..cab49bb1c7 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
+++ b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
@@ -20,7 +20,11 @@ export type FlexibleArrayPath<T extends string> = T extends `${string}[${string}
   : never
 
 export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
-  /** Will fallback to i18n when not specified */
+  /**
+   * Will fallback to i18n when not specified.
+   * Can also be provided via #label slot for custom HTML labels.
+   * When using the slot, it receives bindings: { required, id, label }
+   */
   label?: string
   validators?: FieldValidators<From>
   // Use FlexibleArrayPath: if name contains [], just use TName; otherwise intersect with Leaves<From>
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
index 3acf610a66..9da3d19995 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
@@ -17,6 +17,15 @@
         :label="label ?? i18n()"
         :meta="meta"
       >
+        <template
+          v-if="$slots.label"
+          #label="labelProps"
+        >
+          <slot
+            name="label"
+            v-bind="labelProps"
+          />
+        </template>
         <template #default="inputProps">
           <slot v-bind="inputProps" />
         </template>
@@ -42,8 +51,13 @@ import OmegaInternalInput from "./OmegaInternalInput.vue"
 
 const props = defineProps<OmegaInputPropsBase<From, To>>()
 
-// downgrade to DeepKeys<From> to avoid useless and possible infinite recursion in TS
-const propsName: Ref<DeepKeys<From>> = computed(() => props.name)
+// downgrade to *as* DeepKeys<From> to avoid useless and possible infinite recursion in TS
+const propsName = computed(() => props.name as DeepKeys<From>)
+
+defineSlots<{
+  label?: (props: { required?: boolean; id: string; label: string }) => any
+  default?: (props: any) => any
+}>()
 
 defineOptions({
   inheritAttrs: false
@@ -64,7 +78,7 @@ const getMetaFromArray = inject<Ref<(name: string) => FieldMeta | null> | null>(
 )
 
 const meta = computed(() => {
-  if (getMetaFromArray?.value && getMetaFromArray.value(props.name)) {
+  if (getMetaFromArray?.value && getMetaFromArray.value(props.name as DeepKeys<From>)) {
     return getMetaFromArray.value(propsName.value)
   }
   return props.form.meta[propsName.value]
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
index ad513f86fe..7a1ed9db82 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue
@@ -16,7 +16,17 @@
       v-bind="$attrs"
       :model-value="state.value"
       @change="(e: any) => field.handleChange(e.target.checked)"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </component>
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string' || inputProps.type === 'password'"
       :id="inputProps.id"
@@ -31,7 +41,17 @@
       v-bind="$attrs"
       :model-value="state.value"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-text-field>
     <v-textarea
       v-if="inputProps.type === 'text'"
       :id="inputProps.id"
@@ -45,7 +65,17 @@
       v-bind="$attrs"
       :model-value="state.value"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-textarea>
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
       v-if="inputProps.type === 'number' || inputProps.type === 'range'"
@@ -67,7 +97,17 @@
           field.handleChange(undefined as any)
         }
       }"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </component>
     <template v-if="inputProps.type === 'radio'">
       <v-radio-group
         :id="inputProps.id"
@@ -79,6 +119,15 @@
         :model-value="state.value"
         @update:model-value="field.handleChange"
       >
+        <template
+          v-if="$slots.label"
+          #label
+        >
+          <slot
+            name="label"
+            v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+          />
+        </template>
         <v-radio
           v-for="option in inputProps.options"
           :key="option.value"
@@ -103,7 +152,17 @@
       :model-value="state.value"
       @clear="field.handleChange(undefined as any)"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-select>
 
     <v-autocomplete
       v-if="inputProps.type === 'autocomplete'
@@ -122,7 +181,17 @@
       :model-value="state.value"
       @clear="field.handleChange(undefined as any)"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-autocomplete>
   </div>
 </template>
 
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index 69c971bab1..b099d85c99 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -4,7 +4,17 @@
       <OmegaInputVuetify
         v-if="vuetified"
         v-bind="{ ...attrsWithoutClass, ...inputProps, class: props.inputClass }"
-      />
+      >
+        <template
+          v-if="$slots.label"
+          #label="labelProps"
+        >
+          <slot
+            name="label"
+            v-bind="labelProps"
+          />
+        </template>
+      </OmegaInputVuetify>
     </div>
   </slot>
 </template>
@@ -15,7 +25,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, useAttrs, useId } from "vue"
+import { computed, type ComputedRef, getCurrentInstance, useAttrs, useId, useSlots } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -60,6 +70,7 @@ const isRequired = computed(() => props.required ?? props?.meta?.required)
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VTextField"]
 const attrs = useAttrs()
+const slots = useSlots()
 
 // Create attrs without the class property to avoid duplication
 const attrsWithoutClass = computed(() => {
@@ -148,7 +159,8 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,
-    label: `${props.label}${isRequired.value ? " *" : ""}`,
+    // Only add asterisk if label slot is not provided (slot has full control)
+    label: slots.label ? props.label : `${props.label}${isRequired.value ? " *" : ""}`,
     options: props.options,
     inputClass: props.inputClass
   },
diff --git a/packages/vue-components/src/components/OmegaForm/createUseFormWithCustomInput.ts b/packages/vue-components/src/components/OmegaForm/createUseFormWithCustomInput.ts
index 18dba349e3..62c0ff9b38 100644
--- a/packages/vue-components/src/components/OmegaForm/createUseFormWithCustomInput.ts
+++ b/packages/vue-components/src/components/OmegaForm/createUseFormWithCustomInput.ts
@@ -20,7 +20,7 @@ export const createUseFormWithCustomInput = <
     const WrappedInput = {
       name: "WrappedInput",
       inheritAttrs: false,
-      setup(props: any, { attrs }: any) {
+      setup(props: any, { attrs, slots }: any) {
         return () =>
           h(OmegaInput, {
             ...props,
@@ -35,8 +35,17 @@ export const createUseFormWithCustomInput = <
                   && key !== "form"
                 )
               )
-              return h(CustomInputComponent, { ...filteredAttrs, field, state, inputProps })
-            }
+              return h(CustomInputComponent, { ...filteredAttrs, field, state, inputProps }, {
+                // Pass through label slot if it exists
+                ...(slots.label && {
+                  label: (labelProps: any) => slots.label(labelProps)
+                })
+              })
+            },
+            // Pass through label slot to OmegaInput
+            ...(slots.label && {
+              label: (labelProps: any) => slots.label(labelProps)
+            })
           })
       }
     }
diff --git a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
index 7e7229119f..d771a20efb 100644
--- a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
+++ b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
@@ -236,7 +236,8 @@ export interface OmegaFormReturn<
       expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
       attrs: any
       slots: {
-        default(props: MergedInputProps<From, Name>): void
+        default?(props: MergedInputProps<From, Name>): void
+        label?: (props: { required: boolean; id: string; label: string }) => void
       }
       emit: {}
     }>
diff --git a/packages/vue-components/stories/OmegaForm.stories.ts b/packages/vue-components/stories/OmegaForm.stories.ts
index 93fcc8c2af..420bfedf4e 100644
--- a/packages/vue-components/stories/OmegaForm.stories.ts
+++ b/packages/vue-components/stories/OmegaForm.stories.ts
@@ -10,6 +10,7 @@ import ClearableComponent from "./OmegaForm/Clearable.vue"
 import ComplexFormComponent from "./OmegaForm/ComplexForm.vue"
 import CreateUseFormWithCustomInputComponent from "./OmegaForm/createUseFormWIthCustomInput.vue"
 import CustomInputClassNameComponent from "./OmegaForm/CustomInputClassName.vue"
+import CustomLabelSlotComponent from "./OmegaForm/CustomLabelSlot.vue"
 import DateComponent from "./OmegaForm/Date.vue"
 import DialogBlockingExamplesComponent from "./OmegaForm/DialogBlockingExamples.vue"
 import EmailFormComponent from "./OmegaForm/EmailForm.vue"
@@ -230,3 +231,10 @@ export const CustomInputClassName: Story = {
     template: "<CustomInputClassNameComponent />"
   })
 }
+
+export const CustomLabelSlot: Story = {
+  render: () => ({
+    components: { CustomLabelSlotComponent },
+    template: "<CustomLabelSlotComponent />"
+  })
+}
diff --git a/packages/vue-components/stories/OmegaForm/CustomInput.vue b/packages/vue-components/stories/OmegaForm/CustomInput.vue
index 6e7242e101..c522699bbc 100644
--- a/packages/vue-components/stories/OmegaForm/CustomInput.vue
+++ b/packages/vue-components/stories/OmegaForm/CustomInput.vue
@@ -1,7 +1,17 @@
 <template>
   <div :class="$attrs.class">
+    <label :for="inputProps.id">
+      <slot
+        v-if="$slots.label"
+        name="label"
+        v-bind="{ required: inputProps.required ?? false, id: inputProps.id, label: inputProps.label }"
+      />
+      <template v-else>
+        {{ inputProps.label }}
+      </template>
+    </label>
     <input
-      :id="field.name"
+      :id="inputProps.id"
       :name="field.name"
       :value="state.value"
       :class="inputProps.inputClass"
@@ -25,12 +35,16 @@ defineEmits<{
   (e: "blur", event: Event): void
 }>()
 
+defineSlots<{
+  label?: (props: { required: boolean; id: string; label: string }) => any
+}>()
+
 defineOptions({
   inheritAttrs: false
 })
 </script>
 
-<style>
+<style scoped>
 label {
   display: block;
 }
diff --git a/packages/vue-components/stories/OmegaForm/CustomLabelSlot.vue b/packages/vue-components/stories/OmegaForm/CustomLabelSlot.vue
new file mode 100644
index 0000000000..e4b3265193
--- /dev/null
+++ b/packages/vue-components/stories/OmegaForm/CustomLabelSlot.vue
@@ -0,0 +1,146 @@
+<template>
+  <div style="max-width: 600px; margin: 0 auto">
+    <h2>Custom Label Slot Examples</h2>
+    <form.Form :subscribe="['values']">
+      <template #default="{ subscribedValues: { values } }">
+        <div style="margin-bottom: 20px">
+          <h3>Standard Label (no slot)</h3>
+          <form.Input
+            label="Standard Email Field"
+            name="standardEmail"
+          />
+        </div>
+
+        <div style="margin-bottom: 20px">
+          <h3>Custom HTML Label with Icon</h3>
+          <form.Input name="emailWithIcon">
+            <template #label="{ required }">
+              <span style="display: flex; align-items: center; gap: 4px">
+                <span style="font-size: 18px">📧</span>
+                <span>Email Address</span>
+                <span
+                  v-if="required"
+                  style="color: red"
+                >*</span>
+              </span>
+            </template>
+          </form.Input>
+        </div>
+
+        <div style="margin-bottom: 20px">
+          <h3>Styled Required Label</h3>
+          <form.Input name="styledRequired">
+            <template #label="{ required, label }">
+              <span style="color: #1976d2; font-weight: 600">
+                {{ label }}
+                <sup
+                  v-if="required"
+                  style="color: #d32f2f; font-size: 14px"
+                >required</sup>
+              </span>
+            </template>
+          </form.Input>
+        </div>
+
+        <div style="margin-bottom: 20px">
+          <h3>Label with Tooltip Info</h3>
+          <form.Input
+            name="password"
+            type="password"
+          >
+            <template #label="{ required }">
+              <span style="display: flex; align-items: center; gap: 8px">
+                <span>Password</span>
+                <span
+                  v-if="required"
+                  style="color: red"
+                >*</span>
+                <span
+                  style="background: #e3f2fd; padding: 2px 8px; border-radius: 4px; font-size: 12px; color: #1976d2"
+                  title="Must be at least 8 characters"
+                >ℹ️ min 8 chars</span>
+              </span>
+            </template>
+          </form.Input>
+        </div>
+
+        <div style="margin-bottom: 20px">
+          <h3>Select with Custom Badge</h3>
+          <form.Input
+            name="country"
+            type="select"
+            :options="[
+              { title: 'United States', value: 'us' },
+              { title: 'Canada', value: 'ca' },
+              { title: 'Mexico', value: 'mx' }
+            ]"
+          >
+            <template #label="{ required }">
+              <span style="display: flex; align-items: center; gap: 8px">
+                <span>Country</span>
+                <span
+                  v-if="required"
+                  style="color: red"
+                >*</span>
+                <span
+                  style="background: #4caf50; color: white; padding: 2px 6px; border-radius: 12px; font-size: 10px; font-weight: bold"
+                >NEW</span>
+              </span>
+            </template>
+          </form.Input>
+        </div>
+
+        <div style="margin-bottom: 20px">
+          <h3>Optional Field with Custom Styling</h3>
+          <form.Input name="optionalField">
+            <template #label="{ required }">
+              <span style="color: #666">
+                Optional Notes
+                <span
+                  v-if="!required"
+                  style="font-size: 12px; color: #999; font-style: italic"
+                >(optional)</span>
+              </span>
+            </template>
+          </form.Input>
+        </div>
+
+        <div style="margin-top: 30px; padding: 20px; background: #f5f5f5; border-radius: 8px">
+          <h4 style="margin-top: 0">
+            Form Values:
+          </h4>
+          <pre style="background: white; padding: 12px; border-radius: 4px; overflow: auto">{{ JSON.stringify(values, null, 2) }}</pre>
+        </div>
+
+        <v-btn
+          type="submit"
+          style="margin-top: 20px"
+          color="primary"
+        >
+          Submit Form
+        </v-btn>
+      </template>
+    </form.Form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { useOmegaForm } from "../../src/components/OmegaForm"
+
+const schema = S.Struct({
+  standardEmail: S.String,
+  emailWithIcon: S.String,
+  styledRequired: S.String,
+  password: S.String,
+  country: S.String,
+  optionalField: S.optional(S.String)
+})
+
+const form = useOmegaForm(schema, {
+  onSubmit: async ({ value }) => {
+    console.log("Form submitted:", value)
+    alert("Form submitted! Check console for values.")
+  }
+})
+</script>
diff --git a/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue b/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
index c021953bb8..2a2e7816b6 100644
--- a/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
+++ b/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
@@ -8,6 +8,17 @@
         class="test"
         input-class="testina"
       />
+      <form.Input name="customLabel">
+        <template #label="{ required }">
+          <span style="color: blue; font-weight: bold">
+            Custom HTML Label
+            <span
+              v-if="required"
+              style="color: red"
+            >*</span>
+          </span>
+        </template>
+      </form.Input>
       <v-btn type="submit">
         submit
       </v-btn>
@@ -22,7 +33,10 @@ import CustomInput from "./CustomInput.vue"
 
 const useForm = createUseFormWithCustomInput(CustomInput)
 
-const schema = S.Struct({ asder2: S.String })
+const schema = S.Struct({
+  asder2: S.String,
+  customLabel: S.String
+})
 const form = useForm(schema, {
   onSubmit: async ({ value }) => {
     console.log(value)