From 755a3cb06bf560789aa039ef03738cb9dc691adb Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 29 Oct 2025 21:51:22 +0100
Subject: [PATCH 1/2] feat: add inputClass prop to customize input element
 styling

---
 .../components/OmegaForm/OmegaFormStuff.ts    |  7 ++++++
 .../OmegaForm/OmegaInternalInput.vue          | 23 +++++++++++++++----
 .../stories/OmegaForm/CustomInput.vue         |  4 +++-
 .../OmegaForm/SimpleFormVuetifyDefault.vue    | 20 ++++++++++++++--
 .../createUseFormWIthCustomInput.vue          |  5 ++++
 5 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
index 2700a8be77..d2afbd7282 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
+++ b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts
@@ -25,6 +25,13 @@ export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
   validators?: FieldValidators<From>
   // Use FlexibleArrayPath: if name contains [], just use TName; otherwise intersect with Leaves<From>
   name: FlexibleArrayPath<TName> extends never ? Leaves<From> : TName
+  /**
+   * 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"
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index 82ab17a9e8..db008d1ae5 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -3,7 +3,7 @@
     <div :class="$attrs.class">
       <OmegaInputVuetify
         v-if="vuetified"
-        v-bind="{ ...$attrs, ...inputProps }"
+        v-bind="{ ...attrsWithoutClass, ...inputProps, class: computedClass }"
       />
     </div>
   </slot>
@@ -15,7 +15,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 } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -33,6 +33,7 @@ const props = withDefaults(
     type?: TypeOverride
     validators?: FieldValidators<From>
     required?: boolean
+    inputClass?: string | null
 
     register: (
       field: ComputedRef<{
@@ -49,7 +50,8 @@ const props = withDefaults(
     required: undefined,
     type: undefined,
     options: undefined,
-    validators: undefined
+    validators: undefined,
+    inputClass: undefined
   }
 )
 
@@ -57,6 +59,20 @@ const isRequired = computed(() => props.required ?? props?.meta?.required)
 
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VTextField"]
+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
+})
+
+// Create attrs without the class property to avoid duplication
+const attrsWithoutClass = computed(() => {
+  const { class: _, ...rest } = attrs
+  return rest
+})
 
 const id = useId()
 
@@ -75,7 +91,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(() =>
diff --git a/packages/vue-components/stories/OmegaForm/CustomInput.vue b/packages/vue-components/stories/OmegaForm/CustomInput.vue
index 5439022487..e8ca2be886 100644
--- a/packages/vue-components/stories/OmegaForm/CustomInput.vue
+++ b/packages/vue-components/stories/OmegaForm/CustomInput.vue
@@ -1,9 +1,11 @@
 <template>
-  <div>
+  <div :class="$attrs.class">
+    {{ $attrs["input-class"] }}
     <input
       :id="field.name"
       :name="field.name"
       :value="state.value"
+      :class="$attrs['input-class']"
       @change="(e: any) => field.handleChange(e.target.value)"
     >
   </div>
diff --git a/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue b/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue
index 9615136f39..d2382f60be 100644
--- a/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue
+++ b/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue
@@ -2,12 +2,16 @@
   <form.Form :subscribe="['values']">
     <template #default="{ subscribedValues: { values } }">
       <form.Input
-        label="aString"
+        label="aString (uses inputClass)"
         name="aString"
+        class="generalClassName"
+        input-class="custom-input-class"
       />
       <form.Input
-        label="bString"
+        label="bString (inputClass=null, no class applied)"
         name="bString"
+        class="generalClassName"
+        :input-class="null"
       />
       <pre>{{ values }}</pre>
       <button>submit</button>
@@ -35,3 +39,15 @@ const form = useOmegaForm(schema, {
   defaultValues
 })
 </script>
+
+<style scoped>
+:deep(.generalClassName) {
+  outline: 2px solid red;
+  opacity: 0.5;
+}
+
+:deep(.custom-input-class) {
+  outline: 2px solid blue;
+  opacity: 0.8;
+}
+</style>
diff --git a/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue b/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
index f5d98ecba4..e48c485404 100644
--- a/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
+++ b/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
@@ -5,6 +5,8 @@
       <form.Input
         label="asder2"
         name="asder2"
+        class="test"
+        input-class="testina"
       />
       <v-btn type="submit">
         submit
@@ -27,3 +29,6 @@ const form = useForm(schema, {
   }
 })
 </script>
+
+<style>
+</style>

From fd23af959afd26094f510c17bca55ce1a6e4c1d1 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 29 Oct 2025 21:55:01 +0100
Subject: [PATCH 2/2] adds example

---
 .changeset/curvy-parts-invite.md              |  5 ++
 .../stories/OmegaForm.stories.ts              |  8 +++
 .../OmegaForm/CustomInputClassName.vue        | 53 +++++++++++++++++++
 .../OmegaForm/SimpleFormVuetifyDefault.vue    | 20 +------
 4 files changed, 68 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/curvy-parts-invite.md
 create mode 100644 packages/vue-components/stories/OmegaForm/CustomInputClassName.vue

diff --git a/.changeset/curvy-parts-invite.md b/.changeset/curvy-parts-invite.md
new file mode 100644
index 0000000000..f5ff7a26cc
--- /dev/null
+++ b/.changeset/curvy-parts-invite.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": minor
+---
+
+Adds custom class names to inputs
diff --git a/packages/vue-components/stories/OmegaForm.stories.ts b/packages/vue-components/stories/OmegaForm.stories.ts
index 7642e7e172..5d8a259b39 100644
--- a/packages/vue-components/stories/OmegaForm.stories.ts
+++ b/packages/vue-components/stories/OmegaForm.stories.ts
@@ -9,6 +9,7 @@ import BooleansComponent from "./OmegaForm/Booleans.vue"
 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 DateComponent from "./OmegaForm/Date.vue"
 import DialogBlockingExamplesComponent from "./OmegaForm/DialogBlockingExamples.vue"
 import EmailFormComponent from "./OmegaForm/EmailForm.vue"
@@ -222,3 +223,10 @@ export const WindowExitPrevention: Story = {
     template: "<WindowExitPreventionComponent />"
   })
 }
+
+export const CustomInputClassName: Story = {
+  render: () => ({
+    components: { CustomInputClassNameComponent },
+    template: "<CustomInputClassNameComponent />"
+  })
+}
diff --git a/packages/vue-components/stories/OmegaForm/CustomInputClassName.vue b/packages/vue-components/stories/OmegaForm/CustomInputClassName.vue
new file mode 100644
index 0000000000..d2382f60be
--- /dev/null
+++ b/packages/vue-components/stories/OmegaForm/CustomInputClassName.vue
@@ -0,0 +1,53 @@
+<template>
+  <form.Form :subscribe="['values']">
+    <template #default="{ subscribedValues: { values } }">
+      <form.Input
+        label="aString (uses inputClass)"
+        name="aString"
+        class="generalClassName"
+        input-class="custom-input-class"
+      />
+      <form.Input
+        label="bString (inputClass=null, no class applied)"
+        name="bString"
+        class="generalClassName"
+        :input-class="null"
+      />
+      <pre>{{ values }}</pre>
+      <button>submit</button>
+
+      <form.Errors />
+    </template>
+  </form.Form>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { useOmegaForm } from "../../src"
+
+const schema = S.Struct({
+  aString: S.NullOr(S.NonEmptyString255).withDefault,
+  bString: S.NullOr(S.NonEmptyString255).withDefault
+})
+const defaultValues = {
+  aString: ""
+}
+const form = useOmegaForm(schema, {
+  onSubmit: async (values) => {
+    console.log(values)
+  },
+  defaultValues
+})
+</script>
+
+<style scoped>
+:deep(.generalClassName) {
+  outline: 2px solid red;
+  opacity: 0.5;
+}
+
+:deep(.custom-input-class) {
+  outline: 2px solid blue;
+  opacity: 0.8;
+}
+</style>
diff --git a/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue b/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue
index d2382f60be..9615136f39 100644
--- a/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue
+++ b/packages/vue-components/stories/OmegaForm/SimpleFormVuetifyDefault.vue
@@ -2,16 +2,12 @@
   <form.Form :subscribe="['values']">
     <template #default="{ subscribedValues: { values } }">
       <form.Input
-        label="aString (uses inputClass)"
+        label="aString"
         name="aString"
-        class="generalClassName"
-        input-class="custom-input-class"
       />
       <form.Input
-        label="bString (inputClass=null, no class applied)"
+        label="bString"
         name="bString"
-        class="generalClassName"
-        :input-class="null"
       />
       <pre>{{ values }}</pre>
       <button>submit</button>
@@ -39,15 +35,3 @@ const form = useOmegaForm(schema, {
   defaultValues
 })
 </script>
-
-<style scoped>
-:deep(.generalClassName) {
-  outline: 2px solid red;
-  opacity: 0.5;
-}
-
-:deep(.custom-input-class) {
-  outline: 2px solid blue;
-  opacity: 0.8;
-}
-</style>