diff --git a/apps/demo/src/pages/demo.astro b/apps/demo/src/pages/demo.astro
new file mode 100644
index 0000000..24deb7b
--- /dev/null
+++ b/apps/demo/src/pages/demo.astro
@@ -0,0 +1,100 @@
+---
+import Form, {
+ ControlConfig,
+ FormGroup,
+ FormControl,
+} from "@astro-reactive/form";
+
+const baseForm = new FormGroup([
+ {
+ name: "crust",
+ label: "Crust",
+ type: "radio",
+ value: [{ label: "Garlic", value: "garlic" },]
+ },
+ {
+ name: "size",
+ label: "Size",
+ type: "radio",
+ value: ["Small", "Medium", "Large"]
+ },
+ {
+ name: "sauce",
+ label: "Sauce",
+ type: "radio",
+ value: ["Tomato", "Barbeque"]
+ }
+]);
+
+const toppingsForm = new FormGroup([
+ {
+ name: "mushrooms",
+ label: "Mushrooms",
+ type: "checkbox"
+ },
+ {
+ name: "extraCheese",
+ label: "Extra Cheese",
+ type: "checkbox"
+ },
+ {
+ name: "onions",
+ label: "Onions",
+ type: "checkbox"
+ },
+ {
+ name: "peppers",
+ label: "Peppers",
+ type: "checkbox"
+ },
+ {
+ name: "pepperoni",
+ label: "Pepperoni",
+ type: "checkbox"
+ },
+ {
+ name: "sausage",
+ label: "Sausage",
+ type: "checkbox"
+ },
+ {
+ name: "chicken",
+ label: "Chicken",
+ type: "checkbox"
+ },
+ {
+ name: "pineapple",
+ label: "Pineapple",
+ type: "checkbox"
+ },
+]);
+
+baseForm.name = "Base"
+toppingsForm.name = "Toppings";
+
+// const config: ControlConfig = {
+// type: "checkbox",
+// name: "is-awesome",
+// label: "is Awesome?",
+// labelPosition: "right",
+// };
+
+// insert a control
+// form.controls.push(new FormControl(config));
+
+
+---
+
+
+
+
+
+
+
+ Astro
+
+
+ Pizza Form Demo
+
+
+
diff --git a/apps/demo/src/pages/pizza-delivery.astro b/apps/demo/src/pages/pizza-delivery.astro
new file mode 100644
index 0000000..c60630c
--- /dev/null
+++ b/apps/demo/src/pages/pizza-delivery.astro
@@ -0,0 +1,120 @@
+---
+import Form, {
+ ControlConfig,
+ FormGroup,
+ FormControl,
+} from "@astro-reactive/form";
+import { Validators } from "@astro-reactive/validator";
+
+const baseForm = new FormGroup([
+ {
+ name: "crust",
+ label: "Crust",
+ type: "radio",
+ value: [{ label: "Garlic", value: "garlic" },]
+ },
+ {
+ name: "size",
+ label: "Size",
+ type: "radio",
+ value: ["Small", "Medium", "Large"]
+ },
+ {
+ name: "sauce",
+ label: "Sauce",
+ type: "radio",
+ value: ["Tomato", "Barbeque"]
+ }
+]);
+
+const toppingsForm = new FormGroup([
+ {
+ name: "mushrooms",
+ label: "Mushrooms",
+ type: "checkbox"
+ },
+ {
+ name: "extraCheese",
+ label: "Extra Cheese",
+ type: "checkbox"
+ },
+ {
+ name: "onions",
+ label: "Onions",
+ type: "checkbox"
+ },
+ {
+ name: "peppers",
+ label: "Peppers",
+ type: "checkbox"
+ },
+ {
+ name: "pepperoni",
+ label: "Pepperoni",
+ type: "checkbox"
+ },
+ {
+ name: "sausage",
+ label: "Sausage",
+ type: "checkbox"
+ },
+ {
+ name: "chicken",
+ label: "Chicken",
+ type: "checkbox"
+ },
+ {
+ name: "pineapple",
+ label: "Pineapple",
+ type: "checkbox"
+ },
+]);
+
+const infoForm = new FormGroup([
+ {
+ name: "name",
+ label: "Name",
+ validators: [Validators.required],
+ },
+ {
+ name: "address",
+ label: "Delivery Address",
+ validators: [Validators.required],
+ },
+ {
+ name: "contact",
+ label: "Contact Number",
+ validators: [Validators.required],
+ },
+]);
+
+baseForm.name = "Base"
+toppingsForm.name = "Toppings";
+infoForm.name = "Customer Info";
+
+// const config: ControlConfig = {
+// type: "checkbox",
+// name: "is-awesome",
+// label: "is Awesome?",
+// labelPosition: "right",
+// };
+
+// insert a control
+// form.controls.push(new FormControl(config));
+
+
+---
+
+
+
+
+
+
+
+ Astro
+
+
+ Pizza Form Demo
+
+
+