astro-reactive-form/packages/form

Astro Reactive Form
Generate a dynamic form based on your data, and modify programmatically.

Installation

In your Astro project:

npm i @astro-reactive/form

Usage

Use in an Astro page:

---
import Form, { FormControl, FormGroup } from "@astro-reactive/form";

// create a form group
const form = new FormGroup([
  {
    name: "username",
    label: "Username",
  },
  {
    name: "password",
    label: "Password",
    type: "password",
  },
]);

// set the name optionally
form.name = "Simple Form";

// you can insert a control at any point
form.controls.push(
  new FormControl({
    type: "checkbox",
    name: "is-awesome",
    label: "is Awesome?",
    labelPosition: "right",
  })
);

// you can get a FormControl object
const userNameControl = form.get("username");

// you can set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get('is-awesome')?.setValue("checked");
---

<Form
  formGroups={form}
  submitControl={{
    type: "submit",
    name: "submit",
  }}
/>
<!-- 
  The `formGroups` attribute can take a single FormGroup
  or an array of FormGroup for multiple fieldset blocks;
  we are using a single FormGroup for now in this example.
-->

Screenshots

Result of example above:

Example of multiple form groups:

Validation

This Form component is designed to work with Astro Reactive Validator, our package for setting up validators easily.

We are opensource!

👉 All contributions are welcome. Let's make the fastest web forms powered by Astro.

👉 This package is under rigorous development. See the change log.