diff --git a/package-lock.json b/package-lock.json
index feaf0a4..28a2b1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,7 @@
       "name": "@example/basics",
       "version": "0.0.1",
       "dependencies": {
-        "@astro-reactive/form": "^0.5.1",
-        "@astro-reactive/validator": "^0.1.0",
+        "@astro-reactive/form": "^0.6.7",
         "astro": "^1.2.6",
         "astro-github-stats": "^0.5.0"
       }
@@ -26,21 +25,31 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@astro-reactive/common": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@astro-reactive/common/-/common-0.1.5.tgz",
+      "integrity": "sha512-jmpOvwDUNpVPQipmW5r0AyriKDiS2wSTfRDMxHMBUpAFipDBn3nK1qRsL2hU3vOoe19PRiO+saiceqYsGJQdEQ=="
+    },
     "node_modules/@astro-reactive/form": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.5.1.tgz",
-      "integrity": "sha512-zkx8CPbKWfg0No3O9JzplerOgFoxvB/OOoKQHS+Xv4j9JXbwiS2M7vPpgw31NpOULXK75NJR47VRw9eFd0+ZLg==",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.6.7.tgz",
+      "integrity": "sha512-LUQdFqvYWCTBOwyQwwZwtDyRsfoV1uC2m5t4PNzpIP5mgg4YjRXpS2YqT9ugeTZc2br4nDPGaoOFyPbQigTaBA==",
       "dependencies": {
-        "@astro-reactive/validator": "^0.1.0"
+        "@astro-reactive/common": "*",
+        "@astro-reactive/validator": "*",
+        "short-unique-id": "^4.4.4"
       },
       "peerDependencies": {
         "astro": "^1.5.0"
       }
     },
     "node_modules/@astro-reactive/validator": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.1.0.tgz",
-      "integrity": "sha512-9SIPtAYPePWm+bUaULdXS+RQVGwh/qHt5KvzanQm+99Oy7QBPY/gVUy5ItmPw/8GLsA3i7PGe4WFumP6/AWmwg==",
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.2.7.tgz",
+      "integrity": "sha512-CQ7H9CVJZMPi+R4kTrfHEK31c5UlvNvsZ2weIO+v40JmqTQ7TF4tmxmZkZqJDk9Tsmivh0/YKzAjBwKFgugiwg==",
+      "dependencies": {
+        "@astro-reactive/common": "*"
+      },
       "peerDependencies": {
         "astro": "^1.5.0"
       }
@@ -4783,6 +4792,15 @@
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
     },
+    "node_modules/short-unique-id": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
+      "integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw==",
+      "bin": {
+        "short-unique-id": "bin/short-unique-id",
+        "suid": "bin/short-unique-id"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -6018,19 +6036,28 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
+    "@astro-reactive/common": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@astro-reactive/common/-/common-0.1.5.tgz",
+      "integrity": "sha512-jmpOvwDUNpVPQipmW5r0AyriKDiS2wSTfRDMxHMBUpAFipDBn3nK1qRsL2hU3vOoe19PRiO+saiceqYsGJQdEQ=="
+    },
     "@astro-reactive/form": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.5.1.tgz",
-      "integrity": "sha512-zkx8CPbKWfg0No3O9JzplerOgFoxvB/OOoKQHS+Xv4j9JXbwiS2M7vPpgw31NpOULXK75NJR47VRw9eFd0+ZLg==",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.6.7.tgz",
+      "integrity": "sha512-LUQdFqvYWCTBOwyQwwZwtDyRsfoV1uC2m5t4PNzpIP5mgg4YjRXpS2YqT9ugeTZc2br4nDPGaoOFyPbQigTaBA==",
       "requires": {
-        "@astro-reactive/validator": "^0.1.0"
+        "@astro-reactive/common": "*",
+        "@astro-reactive/validator": "*",
+        "short-unique-id": "^4.4.4"
       }
     },
     "@astro-reactive/validator": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.1.0.tgz",
-      "integrity": "sha512-9SIPtAYPePWm+bUaULdXS+RQVGwh/qHt5KvzanQm+99Oy7QBPY/gVUy5ItmPw/8GLsA3i7PGe4WFumP6/AWmwg==",
-      "requires": {}
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.2.7.tgz",
+      "integrity": "sha512-CQ7H9CVJZMPi+R4kTrfHEK31c5UlvNvsZ2weIO+v40JmqTQ7TF4tmxmZkZqJDk9Tsmivh0/YKzAjBwKFgugiwg==",
+      "requires": {
+        "@astro-reactive/common": "*"
+      }
     },
     "@astrojs/compiler": {
       "version": "0.27.2",
@@ -9200,6 +9227,11 @@
         }
       }
     },
+    "short-unique-id": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
+      "integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw=="
+    },
     "signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
diff --git a/package.json b/package.json
index cc290bd..e4ed9d5 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,7 @@
   },
   "dependencies": {
     "astro": "^1.2.6",
-    "@astro-reactive/form": "^0.5.1",
-    "@astro-reactive/validator": "^0.1.0",
+    "@astro-reactive/form": "^0.6.7",
     "astro-github-stats": "^0.5.0"
   }
 }
diff --git a/src/pages/showcase/astro-reactive-form.astro b/src/pages/showcase/astro-reactive-form.astro
index b945f54..0e5045d 100644
--- a/src/pages/showcase/astro-reactive-form.astro
+++ b/src/pages/showcase/astro-reactive-form.astro
@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
 import Back from "../../components/Back.astro";
 
-import Form, {ControlConfig, FormGroup} from '@astro-reactive/form';
+import Form, { ControlConfig, FormGroup } from "@astro-reactive/form";
 import { Validators } from "@astro-reactive/validator";
 
 const simpleForm = new FormGroup([
@@ -12,11 +12,11 @@ const simpleForm = new FormGroup([
     label: "Simple Text Control",
   },
   {
-    name: 'email',
-    label: 'Email',
-    value: 'invalid-email',
-    validators: [Validators.email]
-  }
+    name: "email",
+    label: "Email",
+    value: "invalid-email",
+    validators: [Validators.email],
+  },
 ]);
 
 const name: ControlConfig[] = [
@@ -24,12 +24,12 @@ const name: ControlConfig[] = [
     name: "first-name",
     value: "Ayo",
     label: "First Name",
-    validators: [Validators.required]
+    validators: [Validators.required],
   },
   {
     name: "last-name",
     label: "Last Name",
-    validators: [Validators.required]
+    validators: [Validators.required],
   },
 ];
 
@@ -38,15 +38,23 @@ const characteristics: ControlConfig[] = [
     name: "is-good-looking",
     type: "radio",
     label: "Is Good Looking?",
-    value: [{value: "checked", label: "checked", checked: true}, {value: "not checked", label: "not checked", checked: false}],
+    value: "checked",
+    options: [
+      { value: "checked", label: "checked" },
+      { value: "not checked", label: "not checked" },
+    ],
+  },
+  {
+    name: "required",
+    label: "Required Field",
+    placeholder: "but empty 😔",
+    validators: [Validators.required],
   },
-  {name: 'required', label: 'Required Field', placeholder: 'but empty 😔', validators: [Validators.required]},
   {
     name: "is-awesome",
     type: "checkbox",
     label: "Is Awesome?",
     value: "checked",
-    labelPosition: "right",
   },
 ];
 
@@ -57,7 +65,9 @@ const characteristicsForm: FormGroup = new FormGroup(
 );
 ---
 
-<Layout title="Astro Reactive Form | Ayo Ayco | Software Engineer + Web Developer ">
+<Layout
+  title="Astro Reactive Form | Ayo Ayco | Software Engineer + Web Developer "
+>
   <main>
     <Back url="/showcase" />
     <h1>Astro Reactive Form</h1>
@@ -72,27 +82,33 @@ const characteristicsForm: FormGroup = new FormGroup(
       </li>
       <li>
         NPM registry:
-          <ul>
-            <li>
-              <a href="https://npmjs.org/package/@astro-reactive/form">@astro-reactive/form</a>
-            </li>
-            <li>
-              <a href="https://npmjs.org/package/@astro-reactive/validator">@astro-reactive/validator</a>
-            </li>
-          </ul>
+        <ul>
+          <li>
+            <a href="https://npmjs.org/package/@astro-reactive/form"
+              >@astro-reactive/form</a
+            >
+          </li>
+          <li>
+            <a href="https://npmjs.org/package/@astro-reactive/validator"
+              >@astro-reactive/validator</a
+            >
+          </li>
+        </ul>
       </li>
     </ul>
 
-
-
     <h2>Simple single form group</h2>
     <p>Here's an example of a simple form with email validation</p>
-    <Form showValidationHints={true} formGroups={simpleForm} />
+    <Form showValidationHints validateOnLoad formGroups={simpleForm} />
     <!--Code lang="typescript" theme="github-light" code={simpleFormCode} /-->
 
     <h2>Multiple Form Groups</h2>
     <p>Here's a more complex example of a form with multiple fieldsets</p>
-    <Form showValidationHints={true} formGroups={[nameForm, characteristicsForm]} />
+    <Form
+      showValidationHints
+      validateOnLoad
+      formGroups={[nameForm, characteristicsForm]}
+    />
     <!--Code lang="typescript" theme="dark-plus" code={multipleFormGroupCode} /-->
 
     <Footer />