diff --git a/examples/client/index.html b/examples/client/index.html
index 0d748c4..2f83519 100644
--- a/examples/client/index.html
+++ b/examples/client/index.html
@@ -5,6 +5,10 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/png" href="ui5-logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
+    />
   <link rel="stylesheet" href="/style.css" />
   <title>Demo Laminar SAP UI5 bindings</title>
   <style>
diff --git a/examples/client/package.json b/examples/client/package.json
index 2986f38..da74118 100644
--- a/examples/client/package.json
+++ b/examples/client/package.json
@@ -11,10 +11,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ui5/webcomponents": "2.0.1",
-    "@ui5/webcomponents-fiori": "2.0.1",
-    "@ui5/webcomponents-icons": "2.0.1",
-    "highlight.js": "^11.8.0",
+    "@ui5/webcomponents": "2.1.0",
+    "@ui5/webcomponents-fiori": "2.1.0",
+    "@ui5/webcomponents-icons": "2.1.0",
+    "highlight.js": "^11.9.0",
     "jsdom": "^9.9.0"
   },
   "devDependencies": {
diff --git a/examples/client/src/main/scala/Index.scala b/examples/client/src/main/scala/Index.scala
index 636e891..bf851f7 100644
--- a/examples/client/src/main/scala/Index.scala
+++ b/examples/client/src/main/scala/Index.scala
@@ -3,12 +3,19 @@ package samples
 import org.scalajs.dom
 import com.raquo.laminar.api.L.*
 import be.doeraene.webcomponents.ui5.*
+import demo.facades.highlightjs.{hljs, hljsScala}
 
-case class Sample(name: String, component: HtmlElement)
+case class Sample(
+    name: String,
+    component: HtmlElement,
+    debug: HtmlElement,
+    source: String = "TODO"
+)
 
 object App extends App {
+  hljs.registerLanguage("scala", hljsScala)
 
-  val sample = Var(samples.either.component)
+  val sampleVar = Var(samples.simple)
 
   private def item(name: String) = SideNavigation.item(
     _.text := name,
@@ -17,11 +24,11 @@ object App extends App {
 
   private val demos = Seq(
     samples.simple,
-    samples.sealedClasses,
     samples.either,
+    samples.validation,
     samples.enums,
+    samples.sealedClasses,
     samples.person,
-    samples.validation,
     samples.list,
     samples.tree
   )
@@ -41,10 +48,9 @@ object App extends App {
             .map(_.detail.item.dataset.get("componentName")) --> Observer[
             Option[String]
           ] { name =>
-            val el = name
+            name
               .flatMap(n => demos.find(_.name == n))
-
-            sample.set(el.map(_.component).getOrElse(div("Not found!")))
+              .foreach(sampleVar.set)
 
           },
           demos.map(_.name).map(item)
@@ -59,7 +65,44 @@ object App extends App {
           padding := "10px",
           minWidth := "40%",
           maxWidth := "calc(100% - 320px)",
-          child <-- sample.signal
+          table(
+            tr(
+              td(
+                div(
+                  child <-- sampleVar.signal.map(_.component)
+                )
+              ),
+              td(
+                div(
+                  marginTop := "1em",
+                  overflowX := "auto",
+                  border := "0.0625rem solid #C1C1C1",
+                  backgroundColor := "#f5f6fa",
+                  padding := "1rem",
+                  Title.h3("Code"),
+                  child <-- sampleVar.signal
+                    .map(_.source)
+                    .map(src =>
+                      pre(
+                        code(
+                          className := "language-scala",
+                          src,
+                          onMountCallback(ctx =>
+                            hljs.highlightElement(ctx.thisNode.ref)
+                          )
+                        )
+                      )
+                    )
+                )
+              )
+            ),
+            tr(
+              td(
+                colSpan := 2,
+                child <-- sampleVar.signal.map(_.debug)
+              )
+            )
+          )
         )
       )
     )
diff --git a/examples/client/src/main/scala/facades/highlightjs/HljsLanguage.scala b/examples/client/src/main/scala/facades/highlightjs/HljsLanguage.scala
new file mode 100644
index 0000000..e160d34
--- /dev/null
+++ b/examples/client/src/main/scala/facades/highlightjs/HljsLanguage.scala
@@ -0,0 +1,7 @@
+package demo.facades.highlightjs
+
+import scala.scalajs.js
+
+/** Marker trait for all js Object that represents languages to be registered & Hljs
+  */
+trait HljsLanguage extends js.Object
diff --git a/examples/client/src/main/scala/facades/highlightjs/hljs.scala b/examples/client/src/main/scala/facades/highlightjs/hljs.scala
new file mode 100644
index 0000000..ed0f468
--- /dev/null
+++ b/examples/client/src/main/scala/facades/highlightjs/hljs.scala
@@ -0,0 +1,16 @@
+package demo.facades.highlightjs
+
+import org.scalajs.dom
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+@js.native
+@JSImport("highlight.js/lib/core", JSImport.Default)
+object hljs extends js.Object {
+
+  def highlightElement(element: dom.HTMLElement): Unit = js.native
+
+  def registerLanguage(name: String, language: HljsLanguage): Unit = js.native
+
+}
diff --git a/examples/client/src/main/scala/facades/highlightjs/hljsScala.scala b/examples/client/src/main/scala/facades/highlightjs/hljsScala.scala
new file mode 100644
index 0000000..e3cc30f
--- /dev/null
+++ b/examples/client/src/main/scala/facades/highlightjs/hljsScala.scala
@@ -0,0 +1,8 @@
+package demo.facades.highlightjs
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+@js.native
+@JSImport("highlight.js/lib/languages/scala", JSImport.Default)
+object hljsScala extends HljsLanguage
diff --git a/examples/client/src/main/scala/samples/EitherSample.scala b/examples/client/src/main/scala/samples/EitherSample.scala
index a8fdc5e..efc8e97 100644
--- a/examples/client/src/main/scala/samples/EitherSample.scala
+++ b/examples/client/src/main/scala/samples/EitherSample.scala
@@ -20,16 +20,20 @@ val either = {
     )
   )
   Sample(
-    "Either", {
-
+    "Either",
+    eitherVar.asForm,
+    div(child <-- eitherVar.signal.map { item =>
       div(
-        child <-- eitherVar.signal.map { item =>
-          div(
-            s"$item"
-          )
-        },
-        eitherVar.asForm
+        s"$item"
       )
-    }
+    }),
+    """|
+         |@Panel("Either", false)
+         |case class EitherSample(
+         |    either: Either[Cat, Dog],
+         |    primitiveEither: Either[Cat, String],
+         |    optionalInt: Option[Int]
+  )""".stripMargin
   )
+
 }
diff --git a/examples/client/src/main/scala/samples/EnumSample.scala b/examples/client/src/main/scala/samples/EnumSample.scala
index ba78622..fb660a1 100644
--- a/examples/client/src/main/scala/samples/EnumSample.scala
+++ b/examples/client/src/main/scala/samples/EnumSample.scala
@@ -23,16 +23,31 @@ val enums = {
     Basket(Color.Black, Cat("Scala", 10, Color.White))
   )
   Sample(
-    "Enums", {
-
-      div(
-        child <-- eitherVar.signal.map { item =>
-          div(
-            s"$item"
-          )
-        },
-        eitherVar.asForm
-      )
-    }
+    "Enums",
+    eitherVar.asForm,
+    div(
+      child <-- eitherVar.signal.map { item =>
+        div(
+          s"$item"
+        )
+      }
+    ),
+    """|
+         |  enum Color(val code: String):
+         |    case Black extends Color("000")
+         |    case White extends Color("FFF")
+         |    case Isabelle extends Color("???")
+         |
+         |  given colorForm: Form[Color] = enumForm(Color.values, Color.fromOrdinal)
+         |
+         |  case class Basket(color: Color, cat: Cat)
+         |
+         |  case class Cat(
+         |      name: String,
+         |      age: Int,
+         |      color: Color
+         |  )
+         |
+         |""".stripMargin
   )
 }
diff --git a/examples/client/src/main/scala/samples/ListElement.scala b/examples/client/src/main/scala/samples/ListElement.scala
index 6c7b656..ff27fea 100644
--- a/examples/client/src/main/scala/samples/ListElement.scala
+++ b/examples/client/src/main/scala/samples/ListElement.scala
@@ -18,14 +18,18 @@ val list = {
 
   Sample(
     "List",
-    div(
-      child <-- listPersonVar.signal.map { item =>
-        div(
-          s"$item"
-        )
-      },
-      listPersonVar.asForm
-    )
+    listPersonVar.asForm,
+    div(child <-- listPersonVar.signal.map { item =>
+      div(
+        s"$item"
+      )
+    }),
+    """|case class Person2(id: Int, name: String, age: Int)
+         |
+         |case class ListElement(
+         |     ints: List[Person2]
+         |)
+         |""".stripMargin
   )
 
 }
diff --git a/examples/client/src/main/scala/samples/Persons.scala b/examples/client/src/main/scala/samples/Persons.scala
index 1038e43..1a4ed5a 100644
--- a/examples/client/src/main/scala/samples/Persons.scala
+++ b/examples/client/src/main/scala/samples/Persons.scala
@@ -20,7 +20,7 @@ val person = {
       pet: Option[Pet],
       email: Option[String],
       age: BigInt,
-      size: Double
+      size: Double :| Positive
   )
   case class Pet(
       name: String,
@@ -49,15 +49,71 @@ val person = {
     )
 
   val personVar = Var(vlad)
+
+  val errorBus = personVar.errorBus
+
   Sample(
     "Person",
     div(
-      child <-- personVar.signal.map { item =>
-        div(
-          s"$item"
-        )
-      },
-      personVar.asForm
-    )
+      personVar.asForm(errorBus),
+      div(
+        child <-- errorBus.watch
+          .map { errors =>
+            div(
+              errors.collect {
+                case (field, ValidationStatus.Invalid(message, true)) =>
+                  div(
+                    s"$field: $message"
+                  )
+              }.toSeq
+            )
+          }
+      )
+    ),
+    div(child <-- personVar.signal.map { item =>
+      div(
+        s"$item"
+      )
+    }),
+    """|
+           |  @NoPanel
+           |  case class Person(
+           |      @FieldName("First Name")
+           |      name: String,
+           |      password: Password,
+           |      birthDate: LocalDate,
+           |      fav: Pet,
+           |      pet: Option[Pet],
+           |      email: Option[String],
+           |      age: BigInt,
+           |      size: Double :| Positive
+           |  )
+           |  case class Pet(
+           |      name: String,
+           |      age: BigInt,
+           |      House: House,
+           |      size: Double :| Positive
+           |  )
+           |
+           |  case class House(capacity: Int)
+           |
+           |  // Provide default for optional
+           |  given Defaultable[Pet] with
+           |    def default = Pet("No pet", 0, House(0), 1)
+           |
+           |  // Instance your model
+           |  val vlad =
+           |    Person(
+           |      "",
+           |      Password("not a password"),
+           |      LocalDate.of(1431, 11, 8),
+           |      Pet("Batman", 666, House(2), 169),
+           |      Some(Pet("Wolfy", 12, House(1), 42)),
+           |      Some("vlad.dracul@gmail.com"),
+           |      48,
+           |      1.85
+           |    )
+           |
+           |""".stripMargin
   )
 }
diff --git a/examples/client/src/main/scala/samples/Sealed.scala b/examples/client/src/main/scala/samples/Sealed.scala
index 3c634f0..2faa3ab 100644
--- a/examples/client/src/main/scala/samples/Sealed.scala
+++ b/examples/client/src/main/scala/samples/Sealed.scala
@@ -30,59 +30,79 @@ val sealedClasses = {
 
   case class Owner(name: String, pet: Animal)
 
-  Sample(
-    "Sealed", {
-
-      val eitherVar = Var(Owner("Agnes", Horse("Niram <3", 6, Color.Isabelle)))
+  val eitherVar = Var(Owner("Agnes", Horse("Niram <3", 6, Color.Isabelle)))
 
-      case class Switcher(
-          name: String,
-          button: ReactiveHtmlElement[?]
-      )
+  case class Switcher(
+      name: String,
+      button: ReactiveHtmlElement[?]
+  )
 
-      object Switcher {
-        def apply[A <: Animal](na: => A): Switcher =
-          val a = na
-          val name = a.getClass.getSimpleName
-          Switcher(
-            name,
-            button(
-              name.filter(_.isLetter),
-              onClick.mapToUnit --> (_ => eitherVar.update(_.copy(pet = a)))
-            )
-          )
-      }
-
-      val switchers = List(
-        Switcher(
-          Horse("Niram", 13, Color.Black)
-        ),
-        Switcher(
-          Lama("Lama", 3, 2)
-        ),
-        Switcher(
-          Otter("Otter", 13)
+  object Switcher {
+    def apply[A <: Animal](na: => A): Switcher =
+      val a = na
+      val name = a.getClass.getSimpleName
+      Switcher(
+        name,
+        button(
+          name.filter(_.isLetter),
+          onClick.mapToUnit --> (_ => eitherVar.update(_.copy(pet = a)))
         )
       )
+  }
+
+  val switchers = List(
+    Switcher(
+      Horse("Niram", 13, Color.Black)
+    ),
+    Switcher(
+      Lama("Lama", 3, 2)
+    ),
+    Switcher(
+      Otter("Otter", 13)
+    )
+  )
 
-      div(
-        child <-- eitherVar.signal.map { item =>
+  Sample(
+    "Sealed",
+    div(
+      child <-- eitherVar.signal
+        .distinctByFn((old, nw) => old.pet.getClass == nw.pet.getClass)
+        .map { item =>
           div(
-            s"$item"
+            eitherVar.asForm,
+            switchers
+              .filterNot(_.name == eitherVar.now().pet.getClass.getSimpleName)
+              .map(_.button)
           )
-        },
-        child <-- eitherVar.signal
-          .distinctByFn((old, nw) => old.pet.getClass == nw.pet.getClass)
-          .map { item =>
-            div(
-              eitherVar.asForm,
-              switchers
-                .filterNot(_.name == eitherVar.now().pet.getClass.getSimpleName)
-                .map(_.button)
-            )
-          }
+        }
+    ),
+    div(child <-- eitherVar.signal.map { item =>
+      div(
+        s"$item"
       )
-
-    }
+    }),
+    """|  enum Color(val code: String):
+       |    case Black extends Color("000")
+       |    case White extends Color("FFF")
+       |    case Isabelle extends Color("???")
+       |
+       |  given colorForm: Form[Color] = enumForm(Color.values, Color.fromOrdinal)
+       |
+       |  sealed trait Animal
+       |
+       |  case class Horse(name: String, age: Int, color: Color) extends Animal
+       |
+       |  case class Lama(
+       |      name: String,
+       |      age: Int,
+       |      splitDistance: Int,
+       |      color: Color = Color.Isabelle
+       |  ) extends Animal
+       |
+       |  case class Otter(name: String, age: Int) extends Animal
+       |
+       |  case class Owner(name: String, pet: Animal)
+       |
+       |""".stripMargin
   )
 }
diff --git a/examples/client/src/main/scala/samples/SimpleSample.scala b/examples/client/src/main/scala/samples/SimpleSample.scala
index ef02cce..110ac12 100644
--- a/examples/client/src/main/scala/samples/SimpleSample.scala
+++ b/examples/client/src/main/scala/samples/SimpleSample.scala
@@ -4,18 +4,23 @@ import com.raquo.laminar.api.L.*
 import dev.cheleb.scalamigen.*
 
 val simple = {
-  val eitherVar = Var(Cat("Scala le chat", 6))
+  val simpleVar = Var(Cat("Scala le chat", 6))
   Sample(
-    "Simple", {
-
-      div(
-        child <-- eitherVar.signal.map { item =>
-          div(
-            s"$item"
-          )
-        },
-        eitherVar.asForm
-      )
-    }
+    "Simple",
+    simpleVar.asForm,
+    div(
+      child <-- simpleVar.signal.map { item =>
+        div(
+          s"$item"
+        )
+      }
+    ),
+    """
+    |case class Cat(name: String, weight: Int, kind: Boolean = true)
+    |
+    |val simpleVar = Var(Cat("Scala le chat", 6))
+    |
+    |simpleVar.asForm
+    """.stripMargin
   )
 }
diff --git a/examples/client/src/main/scala/samples/Tree.scala b/examples/client/src/main/scala/samples/Tree.scala
index bb431b1..ba8efca 100644
--- a/examples/client/src/main/scala/samples/Tree.scala
+++ b/examples/client/src/main/scala/samples/Tree.scala
@@ -18,102 +18,104 @@ val tree = {
         case (Node(_, left1, right1), Node(_, left2, right2)) =>
           isSameStructure(left1, left2) && isSameStructure(right1, right2)
 
-  given treeInstance[A](using
-      default: Defaultable[A]
-  )(using Form[A]): Form[Tree[A]] = new Form[Tree[A]] { self =>
-    override def render(
-        variable: Var[Tree[A]],
-        syncParent: () => Unit
-    )(using WidgetFactory): HtmlElement =
-      variable.now() match
-        case Tree.Empty =>
-          button(
-            "Add me",
-            onClick.mapToUnit --> { _ =>
-              variable.set(Tree.Node(default.default, Tree.Empty, Tree.Empty))
-              syncParent()
-            }
-          )
-        case Tree.Node(value, left, right) =>
-          div(
+    given treeInstance[A](using
+        default: Defaultable[A]
+    )(using Form[A]): Form[Tree[A]] = new Form[Tree[A]] { self =>
+      override def render(
+          path: List[Symbol],
+          variable: Var[Tree[A]],
+          syncParent: () => Unit
+      )(using WidgetFactory, EventBus[(String, ValidationEvent)]): HtmlElement =
+        variable.now() match
+          case Tree.Empty =>
             button(
-              "drop",
+              "Add me",
               onClick.mapToUnit --> { _ =>
-                variable.set(Tree.Empty)
+                variable.set(Tree.Node(default.default, Tree.Empty, Tree.Empty))
                 syncParent()
-
               }
-            ),
-            if false then
-              summon[Form[Tree.Node[A]]]
-                .render(variable.asInstanceOf[Var[Tree.Node[A]]], () => ())
-            else
-              val vVar = Var(value)
-              val lVar = Var(left)
-              val rVar = Var(right)
+            )
+          case Tree.Node(value, left, right) =>
+            div(
+              button(
+                "drop",
+                onClick.mapToUnit --> { _ =>
+                  variable.set(Tree.Empty)
+                  syncParent()
+
+                }
+              ), {
+                val vVar = Var(value)
+                val lVar = Var(left)
+                val rVar = Var(right)
 
-              Seq(
-                Form.renderVar(
-                  vVar,
-                  () => {
-                    variable.set(Tree.Node(vVar.now(), left, right))
-                    syncParent()
-                  }
-                ),
-                div(
-                  "left",
+                Seq(
                   Form.renderVar(
-                    lVar,
+                    path :+ Symbol("value"),
+                    vVar,
                     () => {
-                      variable.set(Tree.Node(value, lVar.now(), right))
+                      variable.set(Tree.Node(vVar.now(), left, right))
                       syncParent()
                     }
-                  )
-                ),
-                div(
-                  "right",
-                  Form.renderVar(
-                    rVar,
-                    () => {
-                      variable.set(Tree.Node(value, left, rVar.now()))
+                  ),
+                  div(
+                    "left",
+                    Form.renderVar(
+                      path :+ Symbol("left"),
+                      lVar,
+                      () => {
+                        variable.set(Tree.Node(value, lVar.now(), right))
+                        syncParent()
+                      }
+                    )
+                  ),
+                  div(
+                    "right",
+                    Form.renderVar(
+                      path :+ Symbol("right"),
+                      rVar,
+                      () => {
+                        variable.set(Tree.Node(value, left, rVar.now()))
 
-                      syncParent()
-                    }
+                        syncParent()
+                      }
+                    )
                   )
                 )
-              )
-          )
-  }
+              }
+            )
+    }
 
+  import Tree.*
+  case class Person(name: String, age: Int)
+  object Person {
+    given Defaultable[Person] with
+      def default = Person("--", 0)
+  }
+  val treeVar2 = Var(
+    Node(
+      Person("agnes", 50),
+      Node(Person("Zozo", 53), Empty, Empty),
+      Empty
+    )
+  )
   Sample(
     "Tree", {
-
-      import Tree.*
-
-      case class Person(name: String, age: Int)
-      object Person {
-        given Defaultable[Person] with
-          def default = Person("--", 0)
-      }
-      val treeVar2 = Var(
-        Node(
-          Person("agnes", 50),
-          Node(Person("Zozo", 53), Empty, Empty),
-          Empty
-        )
-      )
       div(
-        child <-- treeVar2.signal.map { item =>
-          div(
-            s"$item zozo"
-          )
-        },
         child <-- treeVar2.signal
           .distinctByFn(Tree.isSameStructure)
           .map { item =>
-            treeVar2.asForm
+            val b = new EventBus[(String, ValidationEvent)]()
+            treeVar2.asForm(b)
           }
       )
-    }
+    },
+    div(
+      child <-- treeVar2.signal.map { item =>
+        div(
+          s"$item zozo"
+        )
+      }
+    )
   )
 }
diff --git a/examples/client/src/main/scala/samples/Validation.scala b/examples/client/src/main/scala/samples/Validation.scala
index b93348d..543b44c 100644
--- a/examples/client/src/main/scala/samples/Validation.scala
+++ b/examples/client/src/main/scala/samples/Validation.scala
@@ -19,6 +19,13 @@ val validation = {
       optionalDoublePositive: Option[Double :| Positive]
   )
 
+  given Defaultable[Double :| GreaterEqual[8.0]] with
+    def default: Double :| GreaterEqual[8.0] = 8.0
+
+  given Validator[IronSample] with
+    def isValid(a: IronSample): Boolean =
+      true
+
   given IronTypeValidator[Double, GreaterEqual[8.0]] =
     _.toDoubleOption match
       case None         => Left("Not a number")
@@ -28,15 +35,67 @@ val validation = {
     IronSample(CurrencyCode("Eur"), Some("name"), Some(1), 9.1, Some(1))
   )
 
+  val errorBus = ironSampleVar.errorBus
+
   Sample(
     "Validation",
+    div(
+      ironSampleVar.asForm(errorBus),
+      child <-- ironSampleVar.isValid.map { valid =>
+        div(
+          div(
+            s"Valid: $valid"
+          )
+        )
+      },
+      div(
+        child <-- errorBus.watch
+          .map { errors =>
+            div(
+              errors.collect {
+                case (field, ValidationStatus.Invalid(message, true)) =>
+                  div(
+                    s"$field: $message"
+                  )
+              }.toSeq
+            )
+          }
+      )
+    ),
     div(
       child <-- ironSampleVar.signal.map { item =>
         div(
           s"$item"
         )
-      },
-      ironSampleVar.asForm
-    )
+      }
+    ),
+    """|
+       |given Form[CurrencyCode] = stringForm(CurrencyCode(_))
+       |
+       |  case class IronSample(
+       |      curenncyCode: CurrencyCode,
+       |      optional: Option[String],
+       |      optionalInt: Option[Int],
+       |      doubleGreaterThanEight: Double :| GreaterEqual[8.0],
+       |      optionalDoublePositive: Option[Double :| Positive]
+       |  )
+       |
+       |  given Defaultable[Double :| GreaterEqual[8.0]] with
+       |    def default: Double :| GreaterEqual[8.0] = 8.0
+       |
+       |  given Validator[IronSample] with
+       |    def isValid(a: IronSample): Boolean =
+       |      true
+       |
+       |  given IronTypeValidator[Double, GreaterEqual[8.0]] =
+       |    _.toDoubleOption match
+       |      case None         => Left("Not a number")
+       |      case Some(double) => double.refineEither[GreaterEqual[8.0]]
+       |
+       |  val ironSampleVar = Var(
+       |    IronSample(CurrencyCode("Eur"), Some("name"), Some(1), 9.1, Some(1))
+       |  )
+""".stripMargin
   )
+
 }
diff --git a/examples/client/style.css b/examples/client/style.css
index 34aa09f..780b20a 100644
--- a/examples/client/style.css
+++ b/examples/client/style.css
@@ -22,4 +22,18 @@ body {
 ui5-input[type="Number"] {
   width: 100px;
   min-width: 100px;
+}
+
+.srf-form:has(.srf-invalid) {
+
+  border: 1px solid red;
+
+}
+
+.srf-valid {
+  border: 1px solid transparent;
+}
+
+.srf-invalid {
+  border: 1px solid red;
 }
\ No newline at end of file
diff --git a/modules/core/src/main/scala/dev/cheleb/scalamigen/Defaultable.scala b/modules/core/src/main/scala/dev/cheleb/scalamigen/Defaultable.scala
index e9d22cf..541002f 100644
--- a/modules/core/src/main/scala/dev/cheleb/scalamigen/Defaultable.scala
+++ b/modules/core/src/main/scala/dev/cheleb/scalamigen/Defaultable.scala
@@ -27,19 +27,19 @@ object Defaultable {
 
   /** Default value for Int is 0.
     */
-  inline given Defaultable[Int] with
+  given Defaultable[Int] with
     def default = 0
 
   /** Default value for String is "".
     */
-  inline given Defaultable[String] with
+  given Defaultable[String] with
     def default = ""
 
     /** Default value for [Iron type Double
       * positive](https://iltotore.github.io/iron/io/github/iltotore/iron/constraint/numeric$.html#Positive-0)
       * is 0.0.
       */
-  inline given Defaultable[IronType[Double, Positive]] with
+  given Defaultable[IronType[Double, Positive]] with
     def default = 1.0.refineUnsafe[Positive]
 
 }
diff --git a/modules/core/src/main/scala/dev/cheleb/scalamigen/Form.scala b/modules/core/src/main/scala/dev/cheleb/scalamigen/Form.scala
index 305a9b5..8c9a3cb 100644
--- a/modules/core/src/main/scala/dev/cheleb/scalamigen/Form.scala
+++ b/modules/core/src/main/scala/dev/cheleb/scalamigen/Form.scala
@@ -14,6 +14,34 @@ import io.github.iltotore.iron.*
 
 import config.PanelConfig
 
+extension (path: List[Symbol])
+  def key: String =
+    path.map(_.name).mkString(".")
+
+extension (errorBus: EventBus[(String, ValidationEvent)])
+  def watch = errorBus.events
+    .scanLeft(Map.empty[String, ValidationStatus]) {
+      case (acc, (field, event)) =>
+        event match
+          case ValidEvent => acc - field
+          case InvalideEvent(error) =>
+            acc + (field -> ValidationStatus.Invalid(error, true))
+          case HiddenEvent =>
+            acc.map {
+              case (f, ValidationStatus.Invalid(message, true))
+                  if f.startsWith(field) =>
+                (f -> ValidationStatus.Invalid(message, false))
+              case (f, v) => (f -> v)
+            }
+          case ShownEvent =>
+            acc.map {
+              case (f, ValidationStatus.Invalid(message, false))
+                  if f.startsWith(field) =>
+                (f -> ValidationStatus.Invalid(message, true))
+              case (f, v) => (f -> v)
+            }
+    }
+
 /** A form for a type A.
   */
 trait Form[A] { self =>
@@ -27,15 +55,6 @@ trait Form[A] { self =>
     */
   def fromString(s: String): Option[A] = None
 
-  /** Parse a string and set t he variable to the parsed value or set the
-    * errorVar to an error message.
-    *
-    * @param s
-    * @param variable
-    * @param errorVar
-    */
-  def fromString(s: String, variable: Var[A], errorVar: Var[String]): Unit = ()
-
   def toString(a: A) = a.toString
 
   /** Render a form for a variable.
@@ -53,9 +72,13 @@ trait Form[A] { self =>
     * @return
     */
   def render(
+      path: List[Symbol],
       variable: Var[A],
       syncParent: () => Unit
-  )(using factory: WidgetFactory): HtmlElement
+  )(using
+      factory: WidgetFactory,
+      errorBus: EventBus[(String, ValidationEvent)]
+  ): HtmlElement
 
   given Owner = unsafeWindowOwner
 
@@ -69,27 +92,35 @@ trait Form[A] { self =>
 
 
    */
-  def labelled(name: String, required: Boolean): Form[A] = new Form[A] {
+  def labelled(label: String, required: Boolean): Form[A] = new Form[A] {
     override def render(
+        path: List[Symbol],
         variable: Var[A],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement =
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement =
       div(
         div(
-          factory.renderLabel(required, name)
+          factory.renderLabel(required, label)
         ),
         div(
-          self.render(variable, syncParent)
+          self.render(path, variable, syncParent)
         )
       )
 
   }
   def xmap[B](to: (B, A) => B)(from: B => A): Form[B] = new Form[B] {
     override def render(
+        path: List[Symbol],
         variable: Var[B],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement =
-      self.render(variable.zoom(from)(to), syncParent)
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement =
+      self.render(path, variable.zoom(from)(to), syncParent)
   }
 
 }
@@ -112,12 +143,21 @@ object Form extends AutoDerivation[Form] {
     *   the type of the variable
     * @return
     */
-  def renderVar[A](v: Var[A], syncParent: () => Unit = () => ())(using
-      WidgetFactory
+  def renderVar[A](v: Var[A], syncParent: () => Unit)(using
+      WidgetFactory,
+      EventBus[(String, ValidationEvent)]
+  )(using
+      fa: Form[A]
+  ): ReactiveHtmlElement[HTMLElement] =
+    fa.render(Nil, v, syncParent)
+
+  def renderVar[A](path: List[Symbol], v: Var[A], syncParent: () => Unit)(using
+      WidgetFactory,
+      EventBus[(String, ValidationEvent)]
   )(using
       fa: Form[A]
   ): ReactiveHtmlElement[HTMLElement] =
-    fa.render(v, syncParent)
+    fa.render(path, v, syncParent)
 
   /** Form for an Iron type. This is a form for a type that can be validated
     * with an Iron type.
@@ -130,57 +170,62 @@ object Form extends AutoDerivation[Form] {
     */
   given [T, C](using
       validator: IronTypeValidator[T, C],
+      default: Defaultable[IronType[T, C]],
       widgetFactory: WidgetFactory
   ): Form[IronType[T, C]] =
     new Form[IronType[T, C]] {
 
       override def render(
+          path: List[Symbol],
           variable: Var[IronType[T, C]],
           syncParent: () => Unit
-      )(using factory: WidgetFactory): HtmlElement =
-
-        val errorVar = Var("")
-        div(
-          div(child <-- errorVar.signal.map { item =>
-            div(
-              s"$item"
-            )
-          }),
-          widgetFactory.renderText
-            .amend(
-              // _.showClearIcon := true,
-              backgroundColor <-- errorVar.signal.map {
-                case "" => "white"
-                case _  => "red"
-              },
-              value <-- variable.signal.map(toString(_)),
-              onInput.mapToValue --> { str =>
-                fromString(str, variable, errorVar)
-
+      )(using
+          factory: WidgetFactory,
+          errorBus: EventBus[(String, ValidationEvent)]
+      ): HtmlElement = {
+        val state = Var("valid")
+        widgetFactory.renderText
+          .amend(
+            value := variable.now().toString,
+            // value <-- variable.signal // FIXME should be able to sync mode.
+            //   .tapEach(_ => errorBus.emit(path.key -> ValidEvent))
+            //   .map(_.toString),
+            onInput.mapToValue --> { str =>
+              validator.validate(str) match
+                case Left(error) =>
+                  errorBus.emit(path.key -> InvalideEvent(error))
+                case Right(value) =>
+                  errorBus.emit(path.key -> ValidEvent)
+                  variable.set(value)
+            },
+            cls <-- errorBus.events
+              .collect {
+                case (field, InvalideEvent(_)) if field == path.key =>
+                  state.set("invalid")
+                  "srf-invalid"
+                case (field, ShownEvent) if path.key.startsWith(field) =>
+                  s"srf-${state.now()}"
+                case (field, HiddenEvent) if path.key.startsWith(field) =>
+                  s"srf-valid"
+                case (field, ValidEvent) if field == path.key =>
+                  state.set("valid")
+                  "srf-valid"
               }
-            )
-        )
-
-      override def fromString(
-          str: String,
-          variable: Var[IronType[T, C]],
-          errorVar: Var[String]
-      ): Unit =
-        validator.validate(str) match
-          case Left(error) =>
-            errorVar.set(error)
-          case Right(value) =>
-            errorVar.set("")
-            variable.set(value)
+          )
+      }
     }
 
   /** Form for to a string, aka without validation.
     */
   given Form[String] with
     override def render(
+        path: List[Symbol],
         variable: Var[String],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement =
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement =
       factory.renderText
         .amend(
           value <-- variable.signal,
@@ -194,9 +239,13 @@ object Form extends AutoDerivation[Form] {
     */
   given Form[Nothing] = new Form[Nothing] {
     override def render(
+        path: List[Symbol],
         variable: Var[Nothing],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement =
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement =
       div()
   }
 
@@ -206,9 +255,13 @@ object Form extends AutoDerivation[Form] {
     */
   given Form[Boolean] = new Form[Boolean] {
     override def render(
+        path: List[Symbol],
         variable: Var[Boolean],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement =
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement =
       div(
         factory.renderCheckbox
           .amend(
@@ -266,9 +319,13 @@ object Form extends AutoDerivation[Form] {
   ): Form[Either[L, R]] =
     new Form[Either[L, R]] {
       override def render(
+          path: List[Symbol],
           variable: Var[Either[L, R]],
           syncParent: () => Unit
-      )(using factory: WidgetFactory): HtmlElement =
+      )(using
+          factory: WidgetFactory,
+          errorBus: EventBus[(String, ValidationEvent)]
+      ): HtmlElement =
 
         val (vl, vr) = variable.now() match
           case Left(l) =>
@@ -296,14 +353,14 @@ object Form extends AutoDerivation[Form] {
               case Left(_) => "block"
               case _       => "none"
             },
-            lf.render(vl, () => variable.set(Left(vl.now())))
+            lf.render(path, vl, () => variable.set(Left(vl.now())))
           ),
           div(
             display <-- variable.signal.map {
               case Left(_) => "none"
               case _       => "block"
             },
-            rf.render(vr, () => variable.set(Right(vr.now())))
+            rf.render(path, vr, () => variable.set(Right(vr.now())))
           )
         )
 
@@ -325,9 +382,13 @@ object Form extends AutoDerivation[Form] {
   ): Form[Option[A]] =
     new Form[Option[A]] {
       override def render(
+          path: List[Symbol],
           variable: Var[Option[A]],
           syncParent: () => Unit
-      )(using factory: WidgetFactory): HtmlElement =
+      )(using
+          factory: WidgetFactory,
+          errorBus: EventBus[(String, ValidationEvent)]
+      ): HtmlElement = {
         val a = variable.zoom {
           case Some(a) =>
             a
@@ -335,6 +396,7 @@ object Form extends AutoDerivation[Form] {
         } { case (_, a) =>
           Some(a)
         }
+
         a.now() match
           case null =>
             factory.renderButton.amend(
@@ -348,7 +410,7 @@ object Form extends AutoDerivation[Form] {
                   case Some(_) => "block"
                   case None    => "none"
                 },
-                fa.render(a, syncParent)
+                fa.render(path, a, syncParent)
               ),
               div(
                 factory.renderButton.amend(
@@ -357,7 +419,12 @@ object Form extends AutoDerivation[Form] {
                     case None    => "block"
                   },
                   "Set",
-                  onClick.mapTo(Some(d.default)) --> variable.writer
+                  onClick.mapTo(Some(d.default)) --> Observer[Option[A]] { sa =>
+
+                    errorBus.emit(path.key -> ShownEvent)
+
+                    variable.set(sa)
+                  }
                 ),
                 factory.renderButton.amend(
                   display <-- variable.signal.map {
@@ -365,10 +432,15 @@ object Form extends AutoDerivation[Form] {
                     case None    => "none"
                   },
                   "Clear",
-                  onClick.mapTo(None) --> variable.writer
+                  onClick.mapTo(None) --> Observer[Option[A]] { _ =>
+                    errorBus.emit(path.key -> HiddenEvent)
+
+                    variable.set(None)
+                  }
                 )
               )
             )
+      }
     }
 
   /** Form for a List[A]
@@ -383,15 +455,19 @@ object Form extends AutoDerivation[Form] {
     new Form[List[A]] {
 
       override def render(
+          path: List[Symbol],
           variable: Var[List[A]],
           syncParent: () => Unit
-      )(using factory: WidgetFactory): HtmlElement =
+      )(using
+          factory: WidgetFactory,
+          errorBus: EventBus[(String, ValidationEvent)]
+      ): HtmlElement =
         div(
           children <-- variable.split(idOf)((id, initial, aVar) => {
             div(
               idAttr := s"list-item-$id",
               div(
-                fa.render(aVar, syncParent)
+                fa.render(path, aVar, syncParent)
               )
             )
           })
@@ -404,9 +480,13 @@ object Form extends AutoDerivation[Form] {
     */
   given Form[LocalDate] = new Form[LocalDate] {
     override def render(
+        path: List[Symbol],
         variable: Var[LocalDate],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement =
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement =
       div(
         factory.renderDatePicker
           .amend(
@@ -424,9 +504,13 @@ object Form extends AutoDerivation[Form] {
   ): Form[A] = new Form[A] {
 
     override def render(
+        path: List[Symbol],
         variable: Var[A],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement = {
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement = {
 
       val panel =
         caseClass.annotations.find(_.isInstanceOf[Panel]) match
@@ -451,7 +535,7 @@ object Form extends AutoDerivation[Form] {
 
             val fieldName = param.annotations
               .find(_.isInstanceOf[FieldName]) match
-              case None => param.label
+              case None => titleCase(param.label)
               case Some(value) =>
                 value.asInstanceOf[FieldName].value
             tr(
@@ -466,6 +550,7 @@ object Form extends AutoDerivation[Form] {
               td(
                 param.typeclass
                   .render(
+                    path :+ Symbol(fieldName),
                     variable.zoom { a =>
                       Try(param.deref(a))
                         .getOrElse(param.default)
@@ -492,13 +577,14 @@ object Form extends AutoDerivation[Form] {
 
           val fieldName = param.annotations
             .find(_.isInstanceOf[FieldName]) match
-            case None => param.label
+            case None => titleCase(param.label)
             case Some(value) =>
               value.asInstanceOf[FieldName].value
 
           param.typeclass
             .labelled(fieldName, !isOption)
             .render(
+              path :+ Symbol(fieldName),
               variable.zoom { a =>
                 Try(param.deref(a))
                   .getOrElse(param.default)
@@ -520,6 +606,7 @@ object Form extends AutoDerivation[Form] {
         .renderPanel(panel.label)
         .amend(
           className := panel.panelCss,
+          cls := "srf-form",
           if panel.asTable then renderAsTable()
           else renderAsPanel()
         )
@@ -529,14 +616,19 @@ object Form extends AutoDerivation[Form] {
   def split[A](sealedTrait: SealedTrait[Form, A]): Form[A] = new Form[A] {
 
     override def render(
+        path: List[Symbol],
         variable: Var[A],
         syncParent: () => Unit
-    )(using factory: WidgetFactory): HtmlElement =
+    )(using
+        factory: WidgetFactory,
+        errorBus: EventBus[(String, ValidationEvent)]
+    ): HtmlElement =
       val a = variable.now()
       sealedTrait.choose(a) { sub =>
         val va = Var(sub.cast(a))
         sub.typeclass
           .render(
+            path,
             va,
             () => {
               variable.set(va.now())
diff --git a/modules/core/src/main/scala/dev/cheleb/scalamigen/ValidationEvent.scala b/modules/core/src/main/scala/dev/cheleb/scalamigen/ValidationEvent.scala
new file mode 100644
index 0000000..aa16eef
--- /dev/null
+++ b/modules/core/src/main/scala/dev/cheleb/scalamigen/ValidationEvent.scala
@@ -0,0 +1,18 @@
+package dev.cheleb.scalamigen
+
+trait ValidationEvent
+
+case object ValidEvent extends ValidationEvent
+
+final case class InvalideEvent(errorMessage: String) extends ValidationEvent
+
+case object HiddenEvent extends ValidationEvent
+
+case object ShownEvent extends ValidationEvent
+
+enum ValidationStatus:
+  case Unknown
+  case Valid
+  case Invalid(message: String, visible: Boolean)
+  case Hidden(first: Boolean)
+  case Shown
diff --git a/modules/core/src/main/scala/dev/cheleb/scalamigen/Validator.scala b/modules/core/src/main/scala/dev/cheleb/scalamigen/Validator.scala
new file mode 100644
index 0000000..aa02ac8
--- /dev/null
+++ b/modules/core/src/main/scala/dev/cheleb/scalamigen/Validator.scala
@@ -0,0 +1,5 @@
+package dev.cheleb.scalamigen
+
+trait Validator[A] {
+  def isValid(a: A): Boolean
+}
diff --git a/modules/core/src/main/scala/dev/cheleb/scalamigen/package.scala b/modules/core/src/main/scala/dev/cheleb/scalamigen/package.scala
index 7d63e0d..1393326 100644
--- a/modules/core/src/main/scala/dev/cheleb/scalamigen/package.scala
+++ b/modules/core/src/main/scala/dev/cheleb/scalamigen/package.scala
@@ -3,12 +3,19 @@ package dev.cheleb.scalamigen
 import com.raquo.airstream.state.Var
 
 import com.raquo.laminar.api.L.*
+import org.scalajs.dom.HTMLDivElement
+import com.raquo.laminar.nodes.ReactiveHtmlElement
+import com.raquo.airstream.core.Signal
 
 def stringForm[A](to: String => A) = new Form[A]:
   override def render(
+      path: List[Symbol],
       variable: Var[A],
       syncParent: () => Unit
-  )(using factory: WidgetFactory): HtmlElement =
+  )(using
+      factory: WidgetFactory,
+      errorBus: EventBus[(String, ValidationEvent)]
+  ): HtmlElement =
     factory.renderText.amend(
       value <-- variable.signal.map(_.toString),
       onInput.mapToValue.map(to) --> { v =>
@@ -18,9 +25,13 @@ def stringForm[A](to: String => A) = new Form[A]:
     )
 def secretForm[A <: String](to: String => A) = new Form[A]:
   override def render(
+      path: List[Symbol],
       variable: Var[A],
       syncParent: () => Unit
-  )(using factory: WidgetFactory): HtmlElement =
+  )(using
+      factory: WidgetFactory,
+      errorBus: EventBus[(String, ValidationEvent)]
+  ): HtmlElement =
     factory.renderSecret.amend(
       value <-- variable.signal,
       onInput.mapToValue.map(to) --> { v =>
@@ -36,9 +47,13 @@ def numericForm[A](f: String => Option[A], zero: A): Form[A] = new Form[A] {
   override def fromString(s: String): Option[A] =
     f(s).orElse(Some(zero))
   override def render(
+      path: List[Symbol],
       variable: Var[A],
       syncParent: () => Unit
-  )(using factory: WidgetFactory): HtmlElement =
+  )(using
+      factory: WidgetFactory,
+      errorBus: EventBus[(String, ValidationEvent)]
+  ): HtmlElement =
     factory.renderNumeric
       .amend(
         value <-- variable.signal.map { str =>
@@ -54,9 +69,13 @@ def numericForm[A](f: String => Option[A], zero: A): Form[A] = new Form[A] {
 def enumForm[A](values: Array[A], f: Int => A) = new Form[A] {
 
   override def render(
+      path: List[Symbol],
       variable: Var[A],
       syncParent: () => Unit
-  )(using factory: WidgetFactory): HtmlElement =
+  )(using
+      factory: WidgetFactory,
+      errorBus: EventBus[(String, ValidationEvent)]
+  ): HtmlElement =
     val valuesLabels = values.map(_.toString)
     div(
       factory
@@ -79,5 +98,48 @@ def enumForm[A](values: Array[A], f: Int => A) = new Form[A] {
 
 }
 
-extension [A](v: Var[A])
-  def asForm(using WidgetFactory, Form[A]) = Form.renderVar(v)
+/** Extension methods for the Var class.
+  */
+extension [A](va: Var[A])
+  /** Render a form for the variable.
+    *
+    * @param wf
+    *   The widget factory.
+    * @return
+    */
+  def asForm(using wf: WidgetFactory)(using
+      Form[A]
+  ): ReactiveHtmlElement[HTMLDivElement] = {
+    val errorBus = new EventBus[(String, ValidationEvent)]()
+    div(
+      cls := "srf-form",
+      Form.renderVar(va, () => ())(using wf, errorBus)
+    )
+  }
+
+  /** Render a form for the variable.
+    *
+    * @param errorBus
+    *   The error bus.
+    * @param wf
+    *   The widget factory.
+    * @return
+    */
+  def asForm(errorBus: EventBus[(String, ValidationEvent)])(using
+      wf: WidgetFactory
+  )(using Form[A]): ReactiveHtmlElement[HTMLDivElement] =
+    div(
+      cls := "srf-form",
+      Form.renderVar(va, () => ())(using wf, errorBus)
+    )
+
+  /** Check if the variable is valid according to a validator.
+    */
+  def isValid(using v: Validator[A]): Signal[Boolean] =
+    va.signal.map(a => v.isValid(a))
+
+  /** Buid an error bus for the variable that will be used to display errors.
+    *
+    * @return
+    */
+  def errorBus = new EventBus[(String, ValidationEvent)]