effect-app · MakhBeth · Oct 30, 2025 · Oct 29, 2025
diff --git a/.changeset/silly-colts-make.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }