@effect-app/vue-components 2.1.6 → 2.3.0

package/dist/types/components/OmegaForm/InputProps.d.ts

@@ -12,6 +12,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
         error: boolean;
         label: string;
         type: string;
+        inputClass: string | undefined | null;
     };
     field: OmegaFieldInternalApi<From, TName>;
     /** be sure to use this state and not `field.state` as it is not reactive */

package/dist/types/components/OmegaForm/OmegaFormInput.vue.d.ts

@@ -2,7 +2,7 @@ import { type DeepKeys } from "@tanstack/vue-form";
 import type { MergedInputProps } from "./InputProps";
 import type { BaseProps, DefaultTypeProps } from "./OmegaFormStuff";
 declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<BaseProps<From, Name> & DefaultTypeProps> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<BaseProps<From> & DefaultTypeProps> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {

package/dist/types/components/OmegaForm/OmegaFormStuff.d.ts

@@ -3,15 +3,25 @@ import { type DeepKeys, type DeepValue, type FieldAsyncValidateOrFn, type FieldV
 import { type RuntimeFiber } from "effect/Fiber";
 import { type OmegaFieldInternalApi } from "./InputProps";
 import { type OF, type OmegaFormReturn } from "./useOmegaForm";
-export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[number]`> & {} : {
+export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[${number}]`> & {} : {
     [K in keyof T]: T[K] extends string | boolean | number | null | undefined | symbol | bigint ? `${Path extends "" ? "" : `${Path}.`}${K & string}` : Leaves<T[K], `${Path extends "" ? "" : `${Path}.`}${K & string}`> & {};
 }[keyof T];
-export type FlexibleArrayPath<T extends string> = T extends `${infer Before}[number]${infer After}` ? T | `${Before}[${number}]${FlexibleArrayPath<After>}` : T;
-export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
-    /** Will fallback to i18n when not specified */
+export type BaseProps<From> = {
+    /**
+     * 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>;
-    name: TName;
+    name: Leaves<From>;
+    /**
+     * Optional class to apply to the input element.
+     * - If a string is provided, it will be used instead of the general class
+     * - If null is provided, no class will be applied (neither inputClass nor general class)
+     * - If undefined (not provided), the general class will be used
+     */
+    inputClass?: string | null;
 };
 export type TypesWithOptions = "radio" | "select" | "multiple" | "autocomplete" | "autocompletemultiple";
 export type DefaultTypeProps = {
@@ -29,13 +39,13 @@ export type OmegaInputPropsBase<From extends Record<PropertyKey, any>, To extend
         meta: MetaRecord<From>;
         i18nNamespace?: string;
     };
-} & BaseProps<From, NestedKeyOf<From>>;
+} & BaseProps<From>;
 export type OmegaInputProps<From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, TypeProps = DefaultTypeProps> = {
     form: OmegaFormReturn<From, To, TypeProps> & {
         meta: MetaRecord<From>;
         i18nNamespace?: string;
     };
-} & BaseProps<From, NestedKeyOf<From>>;
+} & BaseProps<From>;
 export type OmegaArrayProps<From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>> = Omit<OmegaInputProps<From, To>, "validators" | "options" | "label" | "type" | "items" | "name"> & {
     name: DeepKeys<From>;
     defaultItems?: DeepValue<From, DeepKeys<From>>;

package/dist/types/components/OmegaForm/OmegaInput.vue.d.ts

@@ -4,20 +4,12 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends R
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        default?: (props: {
-            field: import("./InputProps").OmegaFieldInternalApi<From, any>;
-            state: import("@tanstack/vue-form").FieldState<From, any, import("@tanstack/vue-form").DeepValue<From, any>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, any>, unknown> | import("@tanstack/vue-form").FieldValidateFn<From, any>, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, any>, unknown> | import("@tanstack/vue-form").FieldValidateAsyncFn<From, any>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>>, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, any, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
-            id: string;
+        label?: (props: {
             required?: boolean;
-            minLength?: number | false;
-            maxLength?: number | false;
-            max?: number | false;
-            min?: number | false;
-            errorMessages: string[];
-            error: boolean;
+            id: string;
             label: string;
-            type: string;
         }) => any;
+        default?: (props: any) => any;
     };
     emit: {};
 }>) => import("vue").VNode & {

package/dist/types/components/OmegaForm/OmegaInputVuetify.vue.d.ts

@@ -7,7 +7,49 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    };
     emit: {
         (e: "focus", event: Event): void;
         (e: "blur", event: Event): void;

package/dist/types/components/OmegaForm/OmegaInternalInput.vue.d.ts

@@ -11,6 +11,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
         type?: TypeOverride;
         validators?: FieldValidators<From>;
         required?: boolean;
+        inputClass?: string | null;
         register: (field: ComputedRef<{
             name: string;
             label: string;
@@ -37,6 +38,13 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
             error: boolean;
             label: string;
             type: string;
+            inputClass: string | undefined | null;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
         }) => any;
     };
     emit: {};

package/dist/types/components/OmegaForm/useOmegaForm.d.ts

@@ -78,11 +78,16 @@ type __VLS_PrettifyLocal<T> = {
 } & {};
 export interface OmegaFormReturn<From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, TypeProps = DefaultTypeProps> extends OF<From, To> {
     Input: <Name extends DeepKeys<From>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-        props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BaseProps<From, Name> & TypeProps & Partial<{}>> & import("vue").PublicProps;
+        props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BaseProps<From> & TypeProps & Partial<{}>> & import("vue").PublicProps;
         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: {};
     }>) => import("vue").VNode & {

package/dist/vue-components.es13.js

@@ -1,29 +1,38 @@
-import { h as o } from "vue";
-import l from "./vue-components.es6.js";
+import { h as a } from "vue";
+import b from "./vue-components.es6.js";
 import { useOmegaForm as O } from "./vue-components.es10.js";
-const g = (n) => (...m) => {
-  const [p, s, a] = m;
+const j = (m) => (...p) => {
+  const [l, c, f] = p;
   return O(
-    p,
-    s,
+    l,
+    c,
     {
-      ...a,
+      ...f,
       input: {
         name: "WrappedInput",
         inheritAttrs: !1,
-        setup(c, { attrs: t }) {
-          return () => o(l, {
-            ...c,
-            ...t
+        setup(i, { attrs: n, slots: e }) {
+          return () => a(b, {
+            ...i,
+            ...n
           }, {
             // Override the default slot that OmegaInternalInput provides
-            default: ({ field: f, state: i, ...r }) => {
-              const u = Object.fromEntries(
-                Object.entries(t).filter(
-                  ([e]) => !Object.prototype.hasOwnProperty.call(r, e) && e !== "form"
+            default: ({ field: r, state: u, ...o }) => {
+              const s = Object.fromEntries(
+                Object.entries(n).filter(
+                  ([t]) => !Object.prototype.hasOwnProperty.call(o, t) && t !== "form"
                 )
               );
-              return o(n, { ...u, field: f, state: i, inputProps: r });
+              return a(m, { ...s, field: r, state: u, inputProps: o }, {
+                // Pass through label slot if it exists
+                ...e.label && {
+                  label: (t) => e.label(t)
+                }
+              });
+            },
+            // Pass through label slot to OmegaInput
+            ...e.label && {
+              label: (r) => e.label(r)
             }
           });
         }
@@ -32,5 +41,5 @@ const g = (n) => (...m) => {
   );
 };
 export {
-  g as createUseFormWithCustomInput
+  j as createUseFormWithCustomInput
 };

package/dist/vue-components.es18.js

@@ -1,15 +1,16 @@
-import { defineComponent as F, computed as i, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as b, mergeProps as B } from "vue";
+import { defineComponent as F, computed as f, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as C, mergeProps as b } from "vue";
 const N = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaArray",
   props: {
     form: {},
+    inputClass: {},
     name: {},
     defaultItems: {},
     items: {}
   },
   setup(n) {
-    const a = n, y = a.form.useStore((e) => e.values), d = i(() => {
+    const a = n, y = a.form.useStore((e) => e.values), i = f(() => {
       const e = a.name.replace(/\[/g, ".").replace(/\]/g, "");
       try {
         return e.split(".").reduce((r, t) => r && r[t], y.value);
@@ -18,16 +19,16 @@ const N = /* @__PURE__ */ F({
       }
     });
     M(async () => {
-      a.defaultItems && !d.value && a.form.setFieldValue(a.name, a.defaultItems);
+      a.defaultItems && !i.value && a.form.setFieldValue(a.name, a.defaultItems);
     });
-    const $ = i(() => (r) => {
+    const $ = f(() => (r) => {
       const t = r.replace(/\[\d+\]/g, "");
       return a.form.meta[t];
     });
     return P("getMetaFromArray", $), (e, r) => (s(), c(p(n.form.Field), { name: n.name }, {
-      default: g(({ field: t, state: f }) => [
-        o(e.$slots, "pre-array", l(u({ field: t, state: f }))),
-        (s(!0), k(A, null, b(d.value, (C, m) => (s(), c(p(n.form.Field), {
+      default: g(({ field: t, state: d }) => [
+        o(e.$slots, "pre-array", l(u({ field: t, state: d }))),
+        (s(!0), k(A, null, C(i.value, (B, m) => (s(), c(p(n.form.Field), {
           key: `${n.name}[${Number(m)}]`,
           name: (
             // eslint-disable-next-line
@@ -35,7 +36,7 @@ const N = /* @__PURE__ */ F({
           )
         }, {
           default: g(({ field: v, state: h }) => [
-            o(e.$slots, "default", B({ ref_for: !0 }, {
+            o(e.$slots, "default", b({ ref_for: !0 }, {
               subField: v,
               subState: h,
               index: Number(m),
@@ -44,7 +45,7 @@ const N = /* @__PURE__ */ F({
           ]),
           _: 2
         }, 1032, ["name"]))), 128)),
-        o(e.$slots, "post-array", l(u({ field: t, state: f }))),
+        o(e.$slots, "post-array", l(u({ field: t, state: d }))),
         o(e.$slots, "field", l(u({ field: t })))
       ]),
       _: 3

package/dist/vue-components.es21.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-8a2f9d6f]{display:contents}fieldset[disabled][data-v-8a2f9d6f]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-8a2f9d6f]{display:contents}fieldset[disabled][data-v-8a2f9d6f]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-05e510ab]{display:contents}fieldset[disabled][data-v-05e510ab]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-05e510ab]{display:contents}fieldset[disabled][data-v-05e510ab]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import o from "./vue-components.es36.js";
 
 import m from "./vue-components.es35.js";
-const f = /* @__PURE__ */ m(o, [["__scopeId", "data-v-8a2f9d6f"]]);
+const e = /* @__PURE__ */ m(o, [["__scopeId", "data-v-05e510ab"]]);
 export {
-  f as default
+  e as default
 };

package/dist/vue-components.es38.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, resolveComponent as o, createElementBlock as m, openBlock as n, createBlock as a, createCommentVNode as i, resolveDynamicComponent as d, mergeProps as u, unref as f, withCtx as h, Fragment as c, renderList as C } from "vue";
-import { getInputType as q } from "./vue-components.es12.js";
-const U = /* @__PURE__ */ b({
+import { defineComponent as k, resolveComponent as b, createElementBlock as v, openBlock as a, createBlock as n, createCommentVNode as u, resolveDynamicComponent as g, mergeProps as o, createSlots as d, withCtx as r, renderSlot as m, normalizeProps as s, guardReactiveProps as P, unref as C, Fragment as V, renderList as U } from "vue";
+import { getInputType as c } from "./vue-components.es12.js";
+const w = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "OmegaInputVuetify",
   props: {
@@ -10,14 +10,14 @@ const U = /* @__PURE__ */ b({
   },
   emits: ["focus", "blur"],
   setup(e) {
-    return (r, l) => {
-      const s = o("v-text-field"), P = o("v-textarea"), g = o("v-radio"), v = o("v-radio-group"), p = o("v-select"), y = o("v-autocomplete");
-      return n(), m("div", {
+    return (l, i) => {
+      const y = b("v-text-field"), p = b("v-textarea"), f = b("v-radio"), h = b("v-radio-group"), q = b("v-select"), $ = b("v-autocomplete");
+      return a(), v("div", {
         class: "omega-input",
-        onFocusout: l[4] || (l[4] = (t) => r.$emit("blur", t)),
-        onFocusin: l[5] || (l[5] = (t) => r.$emit("focus", t))
+        onFocusout: i[4] || (i[4] = (t) => l.$emit("blur", t)),
+        onFocusin: i[5] || (i[5] = (t) => l.$emit("focus", t))
       }, [
-        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (n(), a(d(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), u({
+        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (a(), n(g(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), o({
           key: 0,
           id: e.inputProps.id,
           name: e.field.name,
@@ -25,26 +25,42 @@ const U = /* @__PURE__ */ b({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error,
           ripple: ""
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          onChange: l[0] || (l[0] = (t) => e.field.handleChange(t.target.checked))
-        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : i("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" ? (n(), a(s, u({
+          onChange: i[0] || (i[0] = (t) => e.field.handleChange(t.target.checked))
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
+        e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" ? (a(), n(y, o({
           key: 1,
           id: e.inputProps.id,
           required: e.inputProps.required,
           "min-length": e.inputProps.minLength,
           "max-length": e.inputProps.maxLength,
-          type: f(q)(e.inputProps.type),
+          type: C(c)(e.inputProps.type),
           name: e.field.name,
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "text" ? (n(), a(P, u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "text" ? (a(), n(p, o({
           key: 2,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -54,11 +70,19 @@ const U = /* @__PURE__ */ b({
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "number" || e.inputProps.type === "range" ? (n(), a(d(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "number" || e.inputProps.type === "range" ? (a(), n(g(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), o({
           key: 3,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -69,33 +93,49 @@ const U = /* @__PURE__ */ b({
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          "onUpdate:modelValue": l[1] || (l[1] = (t) => {
+          "onUpdate:modelValue": i[1] || (i[1] = (t) => {
             t || t === 0 ? e.field.handleChange(Number(t)) : e.field.handleChange(void 0);
           })
-        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : i("", !0),
-        e.inputProps.type === "radio" ? (n(), a(v, u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
+        e.inputProps.type === "radio" ? (a(), n(h, o({
           key: 4,
           id: e.inputProps.id,
           name: e.field.name,
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
-        }), {
-          default: h(() => [
-            (n(!0), m(c, null, C(e.inputProps.options, (t) => (n(), a(g, {
+        }), d({
+          default: r(() => [
+            (a(!0), v(V, null, U(e.inputProps.options, (t) => (a(), n(f, {
               key: t.value,
               label: t.title,
               value: t.value
             }, null, 8, ["label", "value"]))), 128))
           ]),
-          _: 1
-        }, 16, ["id", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (n(), a(p, u({
+          _: 2
+        }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (a(), n(q, o({
           key: 5,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "select",
@@ -107,12 +147,20 @@ const U = /* @__PURE__ */ b({
           items: e.inputProps.options,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          onClear: l[2] || (l[2] = (t) => e.field.handleChange(void 0)),
+          onClear: i[2] || (i[2] = (t) => e.field.handleChange(void 0)),
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (n(), a(y, u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (a(), n($, o({
           key: 6,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "autocomplete",
@@ -124,15 +172,23 @@ const U = /* @__PURE__ */ b({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error,
           chips: e.inputProps.type === "autocompletemultiple"
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          onClear: l[3] || (l[3] = (t) => e.field.handleChange(void 0)),
+          onClear: i[3] || (i[3] = (t) => e.field.handleChange(void 0)),
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : i("", !0)
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : u("", !0)
       ], 32);
     };
   }
 });
 export {
-  U as default
+  w as default
 };

package/dist/vue-components.es6.js

@@ -1,50 +1,62 @@
-import { defineComponent as M, computed as l, inject as b, createBlock as f, openBlock as c, resolveDynamicComponent as C, withCtx as d, createCommentVNode as F, mergeProps as k, renderSlot as y, normalizeProps as A, guardReactiveProps as N } from "vue";
-import { useIntl as w } from "./vue-components.es3.js";
-import { generateInputStandardSchemaFromFieldMeta as I } from "./vue-components.es12.js";
-import P from "./vue-components.es7.js";
-const O = /* @__PURE__ */ M({
+import { defineComponent as F, computed as n, useAttrs as A, inject as N, createBlock as d, openBlock as p, resolveDynamicComponent as S, withCtx as i, createCommentVNode as w, mergeProps as I, createSlots as P, renderSlot as v, normalizeProps as g, guardReactiveProps as C } from "vue";
+import { useIntl as j } from "./vue-components.es3.js";
+import { generateInputStandardSchemaFromFieldMeta as z } from "./vue-components.es12.js";
+import B from "./vue-components.es7.js";
+const U = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaInput",
   props: {
     form: {},
     label: {},
     validators: {},
-    name: {}
+    name: {},
+    inputClass: {}
   },
-  setup(a) {
-    const e = a, r = l(() => e.name), n = b(
+  setup(t) {
+    const e = t, r = n(() => e.name), $ = A(), b = n(() => {
+      if (e.inputClass !== null)
+        return e.inputClass !== void 0 ? e.inputClass : $.class;
+    }), s = N(
       "getMetaFromArray",
       null
-    ), o = l(() => n?.value && n.value(e.name) ? n.value(r.value) : e.form.meta[r.value]), p = l(() => {
-      if (!o.value)
+    ), l = n(() => s?.value && s.value(e.name) ? s.value(r.value) : e.form.meta[r.value]), h = n(() => {
+      if (!l.value)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return I(o.value);
-    }), { formatMessage: m } = w(), s = (t) => t.replace(/([A-Z])/g, " $1").replace(/^./, (u) => u.toUpperCase()).trim(), i = () => m ? m({ id: `general.fields.${r.value}`, defaultMessage: s(e.name) }) : s(e.name), v = () => e.form.i18nNamespace ? m({ id: `${e.form.i18nNamespace}.fields.${r.value}`, defaultMessage: i() }) : i();
-    return (t, u) => (c(), f(C(a.form.Field), {
-      name: a.name,
+      return z(l.value);
+    }), { formatMessage: o } = j(), u = (a) => a.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim(), f = () => o ? o({ id: `general.fields.${r.value}`, defaultMessage: u(e.name) }) : u(e.name), M = () => e.form.i18nNamespace ? o({ id: `${e.form.i18nNamespace}.fields.${r.value}`, defaultMessage: f() }) : f();
+    return (a, c) => (p(), d(S(t.form.Field), {
+      name: t.name,
       validators: {
-        onChange: p.value,
-        ...a.validators
+        onChange: h.value,
+        ...t.validators
       }
     }, {
-      default: d(({ field: g, state: h }) => [
-        o.value ? (c(), f(P, k({ key: 0 }, { ...t.$attrs, ...t.$props }, {
-          field: g,
-          state: h,
-          register: a.form.registerField,
-          label: a.label ?? v(),
-          meta: o.value
-        }), {
-          default: d(($) => [
-            y(t.$slots, "default", A(N($)))
+      default: i(({ field: k, state: y }) => [
+        l.value ? (p(), d(B, I({ key: 0 }, { ...a.$attrs, ...a.$props, inputClass: b.value }, {
+          field: k,
+          state: y,
+          register: t.form.registerField,
+          label: t.label ?? M(),
+          meta: l.value
+        }), P({
+          default: i((m) => [
+            v(a.$slots, "default", g(C(m)))
           ]),
-          _: 3
-        }, 16, ["field", "state", "register", "label", "meta"])) : F("", !0)
+          _: 2
+        }, [
+          a.$slots.label ? {
+            name: "label",
+            fn: i((m) => [
+              v(a.$slots, "label", g(C(m)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["field", "state", "register", "label", "meta"])) : w("", !0)
       ]),
       _: 3
     }, 8, ["name", "validators"]));
   }
 });
 export {
-  O as default
+  U as default
 };

package/dist/vue-components.es7.js

@@ -1,9 +1,9 @@
 (function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as b, computed as r, getCurrentInstance as C, useId as x, renderSlot as _, normalizeProps as m, guardReactiveProps as P, createElementVNode as N, normalizeClass as $, createBlock as q, createCommentVNode as B, unref as k, openBlock as I, mergeProps as L } from "vue";
-import { useStore as M } from "@tanstack/vue-form";
-import S from "./vue-components.es38.js";
+import { defineComponent as N, computed as n, getCurrentInstance as S, useAttrs as k, useSlots as q, useId as B, renderSlot as m, normalizeProps as s, guardReactiveProps as d, createElementVNode as w, normalizeClass as I, createBlock as L, createCommentVNode as M, unref as A, openBlock as F, mergeProps as O, createSlots as R, withCtx as V } from "vue";
+import { useStore as z } from "@tanstack/vue-form";
+import T from "./vue-components.es38.js";
 
-const U = /* @__PURE__ */ b({
+const H = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -14,54 +14,68 @@ const U = /* @__PURE__ */ b({
     type: { default: void 0 },
     validators: { default: void 0 },
     required: { type: Boolean, default: void 0 },
+    inputClass: { default: void 0 },
     register: {},
     options: { default: void 0 }
   },
-  setup(u) {
-    const e = u, o = r(() => e.required ?? e?.meta?.required), d = C()?.appContext.components.VTextField, l = x(), p = e.field, i = M(p.store, (t) => t), f = r(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
-    e.register(r(() => ({ name: e.field.name, label: e.label, id: l }))), r(() => i.value.value);
-    const c = r(() => i.value.meta.errors ?? []), s = r(
+  setup(p) {
+    const e = p, l = n(() => e.required ?? e?.meta?.required), f = S()?.appContext.components.VTextField, c = k(), g = q(), h = n(() => {
+      const { class: t, ...a } = c;
+      return a;
+    }), o = B(), v = e.field, y = z(v.store, (t) => t), b = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
+    e.register(n(() => ({ name: e.field.name, label: e.label, id: o })));
+    const C = n(() => y.value.meta.errors ?? []), i = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        c.value.map((t) => t?.message).filter(Boolean)
+        C.value.map((t) => t?.message).filter(Boolean)
       )
-    ), g = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), v = (t) => {
-      g(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
+    ), _ = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), x = (t) => {
+      _(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
         e.meta.nullableOrUndefined === "undefined" ? void 0 : null
-      ) : e.field.handleChange(t), e.field.setMeta((n) => ({ ...n, errorMap: { ...n.errorMap, onSubmit: void 0 } }));
-    }, h = (t) => {
-      const n = {
-        get(O, y, R) {
-          return y === "handleChange" ? v : Reflect.get(...arguments);
+      ) : e.field.handleChange(t), e.field.setMeta((a) => ({ ...a, errorMap: { ...a.errorMap, onSubmit: void 0 } }));
+    }, P = (t) => {
+      const a = {
+        get(E, $, W) {
+          return $ === "handleChange" ? x : Reflect.get(...arguments);
         }
       };
-      return new Proxy(t, n);
-    }, a = r(() => ({
+      return new Proxy(t, a);
+    }, r = n(() => ({
       inputProps: {
-        id: l,
-        required: o.value,
+        id: o,
+        required: l.value,
         minLength: e.meta?.type === "string" && e.meta?.minLength,
         maxLength: e.meta?.type === "string" && e.meta?.maxLength,
         max: e.meta?.type === "number" && e.meta?.maximum,
         min: e.meta?.type === "number" && e.meta?.minimum,
-        errorMessages: s.value,
-        error: !!s.value.length,
-        type: f.value,
-        label: `${e.label}${o.value ? " *" : ""}`,
-        options: e.options
+        errorMessages: i.value,
+        error: !!i.value.length,
+        type: b.value,
+        // Only add asterisk if label slot is not provided (slot has full control)
+        label: g.label ? e.label : `${e.label}${l.value ? " *" : ""}`,
+        options: e.options,
+        inputClass: e.inputClass
       },
       state: e.state,
-      field: h(e.field)
+      field: P(e.field)
     }));
-    return (t, n) => _(t.$slots, "default", m(P({ ...a.value.inputProps, field: a.value.field, state: a.value.state })), () => [
-      N("div", {
-        class: $(t.$attrs.class)
+    return (t, a) => m(t.$slots, "default", s(d({ ...r.value.inputProps, field: r.value.field, state: r.value.state })), () => [
+      w("div", {
+        class: I(t.$attrs.class)
       }, [
-        k(d) ? (I(), q(S, m(L({ key: 0 }, { ...t.$attrs, ...a.value })), null, 16)) : B("", !0)
+        A(f) ? (F(), L(T, s(O({ key: 0 }, { ...h.value, ...r.value, class: e.inputClass })), R({ _: 2 }, [
+          t.$slots.label ? {
+            name: "label",
+            fn: V((u) => [
+              m(t.$slots, "label", s(d(u)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040)) : M("", !0)
       ], 2)
     ]);
   }
 });
 export {
-  U as default
+  H as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "2.1.6",
+  "version": "2.3.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",
@@ -53,8 +53,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.92.1",
-    "effect-app": "3.12.0"
+    "effect-app": "3.12.0",
+    "@effect-app/vue": "2.92.1"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/InputProps.ts

@@ -39,6 +39,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     error: boolean
     label: string
     type: string
+    inputClass: string | undefined | null
   }
   field: OmegaFieldInternalApi<From, TName>
   /** be sure to use this state and not `field.state` as it is not reactive */

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -35,7 +35,7 @@ if (!form) {
 }
 
 defineProps<
-  BaseProps<From, Name> & DefaultTypeProps
+  BaseProps<From> & DefaultTypeProps
 >()
 
 defineSlots<{

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -7,24 +7,31 @@ import { getTransformationFrom, useIntl } from "../../utils"
 import { type OmegaFieldInternalApi } from "./InputProps"
 import { type OF, type OmegaFormReturn } from "./useOmegaForm"
 
-export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[number]`> & {}
+export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U>
+  ? Leaves<U, `${Path}[${number}]`> & {}
   : {
     [K in keyof T]: T[K] extends string | boolean | number | null | undefined | symbol | bigint
       ? `${Path extends "" ? "" : `${Path}.`}${K & string}`
       : Leaves<T[K], `${Path extends "" ? "" : `${Path}.`}${K & string}`> & {}
   }[keyof T]
 
-// Helper type to make array indices flexible - accepts both [number] and numeric literals [0], [1], etc.
-export type FlexibleArrayPath<T extends string> = T extends `${infer Before}[number]${infer After}`
-  ? T | `${Before}[${number}]${FlexibleArrayPath<After>}`
-  : T
-
-export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
-  /** Will fallback to i18n when not specified */
+export type BaseProps<From> = {
+  /**
+   * 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>
-  // disabled FlexibleArrayPath as it causes excessive complexity in type resolution inside user projects
-  name: TName // & FlexibleArrayPath<Leaves<From>>
+  // Use FlexibleArrayPath: if name contains [], just use TName; otherwise intersect with Leaves<From>
+  name: Leaves<From>
+  /**
+   * Optional class to apply to the input element.
+   * - If a string is provided, it will be used instead of the general class
+   * - If null is provided, no class will be applied (neither inputClass nor general class)
+   * - If undefined (not provided), the general class will be used
+   */
+  inputClass?: string | null
 }
 
 export type TypesWithOptions = "radio" | "select" | "multiple" | "autocomplete" | "autocompletemultiple"
@@ -49,7 +56,7 @@ export type OmegaInputPropsBase<
     meta: MetaRecord<From>
     i18nNamespace?: string
   }
-} & BaseProps<From, NestedKeyOf<From>>
+} & BaseProps<From>
 
 export type OmegaInputProps<
   From extends Record<PropertyKey, any>,
@@ -60,7 +67,7 @@ export type OmegaInputProps<
     meta: MetaRecord<From>
     i18nNamespace?: string
   }
-} & BaseProps<From, NestedKeyOf<From>>
+} & BaseProps<From>
 
 export type OmegaArrayProps<
   From extends Record<PropertyKey, any>,

package/src/components/OmegaForm/OmegaInput.vue

@@ -10,13 +10,22 @@
     <template #default="{ field, state }">
       <OmegaInternalInput
         v-if="meta"
-        v-bind="{ ...$attrs, ...$props }"
+        v-bind="{ ...$attrs, ...$props, inputClass: computedClass }"
         :field="field"
         :state="state"
         :register="form.registerField"
         :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>
@@ -35,27 +44,41 @@
 "
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { computed, inject, type Ref } from "vue"
+import { computed, inject, type Ref, useAttrs } from "vue"
 import { useIntl } from "../../utils"
 import { type FieldMeta, generateInputStandardSchemaFromFieldMeta, type OmegaInputPropsBase } from "./OmegaFormStuff"
 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
 })
 
+const attrs = useAttrs()
+
+// Compute the class to use based on inputClass prop
+const computedClass = computed(() => {
+  if (props.inputClass === null) return undefined
+  if (props.inputClass !== undefined) return props.inputClass
+  return attrs.class as string | undefined
+})
+
 const getMetaFromArray = inject<Ref<(name: string) => FieldMeta | null> | null>(
   "getMetaFromArray",
   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]

package/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>
 

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -3,8 +3,18 @@
     <div :class="$attrs.class">
       <OmegaInputVuetify
         v-if="vuetified"
-        v-bind="{ ...$attrs, ...inputProps }"
-      />
+        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, 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"
@@ -33,6 +43,7 @@ const props = withDefaults(
     type?: TypeOverride
     validators?: FieldValidators<From>
     required?: boolean
+    inputClass?: string | null
 
     register: (
       field: ComputedRef<{
@@ -49,7 +60,8 @@ const props = withDefaults(
     required: undefined,
     type: undefined,
     options: undefined,
-    validators: undefined
+    validators: undefined,
+    inputClass: undefined
   }
 )
 
@@ -57,6 +69,14 @@ 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(() => {
+  const { class: _, ...rest } = attrs
+  return rest
+})
 
 const id = useId()
 
@@ -75,7 +95,6 @@ const fieldType = computed(() => {
 
 props.register(computed(() => ({ name: props.field.name, label: props.label, id })))
 
-const fieldValue = computed(() => fieldState.value.value)
 // workaround strange tanstack form issue where the errors key becomes undefined ???
 const _errors = computed(() => fieldState.value.meta.errors ?? [])
 const errors = computed(() =>
@@ -140,8 +159,10 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,
-    label: `${props.label}${isRequired.value ? " *" : ""}`,
-    options: props.options
+    // 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
   },
 
   state: props.state,

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -30,7 +30,6 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useStore } from "@tanstack/vue-form"
-import { defineSlots } from "vue"
 import { usePreventClose } from "./blockDialog"
 import { getOmegaStore } from "./getOmegaStore"
 import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"

package/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)
+            })
           })
       }
     }

package/src/components/OmegaForm/useOmegaForm.ts

@@ -228,7 +228,7 @@ export interface OmegaFormReturn<
             >,
             never
           >
-          & BaseProps<From, Name>
+          & BaseProps<From>
           & TypeProps
           & Partial<{}>
         >
@@ -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: {}
     }>