@astro-reactive/form

0.10.0 • Public • Published

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

Package information: NPM version Package information: NPM license Package information: NPM downloads Package information: NPM dependencies status

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:

Screen Shot 2022-10-08 at 10 38 04 PM

Example of multiple form groups:

Screen Shot 2022-09-27 at 10 44 03 PM

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.

Readme

Keywords

Package Sidebar

Install

npm i @astro-reactive/form

Weekly Downloads

3

Version

0.10.0

License

MIT

Unpacked Size

22.3 kB

Total Files

15

Last publish

Collaborators

  • aayco