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",
  },
]);

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

// set the value of multiple controls
form.setValue({
	username: 'DEFAULT',
	isAwesome: 'checked',
});

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

// you can set the value of specific control
userNameControl?.setValue("RAMOOOON");

---

<Form
  formGroups={form}
  validateOnLoad
  showValidationHints
  action="/submission"
  method="post"
  submitControl={{
    name: 'submit',
    type: 'submit',
  }}
/>

👉 For more examples and explanations of the component properties, see the Form API Docs.

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 a work in progress. See the change log.