Astro Reactive Form
Generate a dynamic form based on your data, and modify programmatically.
## Installation
In your [Astro](https://astro.build) project:
```
npm i @astro-reactive/form
```
## Usage
Use in an Astro page:
```astro
---
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");
---
```
👉 For more examples and explanations of the component properties, see the [Form API Docs](https://docs.astro-reactive.js.org/en/api/form/form-component/).
# Screenshots
Result of example above:
Example of multiple form groups:
# Validation
This Form component is designed to work with [Astro Reactive Validator](https://www.npmjs.com/package/@astro-reactive/validator), our package for setting up validators easily.
# We are opensource!
👉 _All [contributions](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md) are welcome. Let's make the fastest web forms powered by Astro._
👉 _This package is a work in progress. See the [change log](https://github.com/astro-reactive/astro-reactive/blob/main/packages/form/CHANGELOG.md)._