108 lines
2 KiB
Text
108 lines
2 KiB
Text
---
|
|
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";
|
|
---
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<title>Astro</title>
|
|
</head>
|
|
<body>
|
|
<nav><a href="/">Home</a> | <a href="/job-application">Job Application</a></nav>
|
|
<h1>Pizza Form Demo</h1>
|
|
<Form
|
|
showValidationHints={true}
|
|
formGroups={[baseForm, toppingsForm, infoForm]}
|
|
/>
|
|
</body>
|
|
</html>
|