---
import Form, { FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";
const baseForm = new FormGroup([
{
name: "crust",
label: "Crust",
type: "radio",
options: [{ label: "Garlic", value: "garlic" }],
},
{
name: "size",
label: "Size",
type: "radio",
options: ["Small", "Medium", "Large"],
},
{
name: "sauce",
label: "Sauce",
type: "radio",
options: ["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";
---
Astro
Pizza Form Demo