0.10.0 ā¢ Published 5 months ago
@astro-reactive/form v0.10.0
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.
0.10.0
5 months ago
0.9.1
6 months ago
0.9.0
7 months ago
0.8.1
1 year ago
0.7.2
1 year ago
0.7.1
1 year ago
0.7.0
1 year ago
0.6.7
1 year ago
0.6.6
1 year ago
0.6.5
1 year ago
0.6.4
1 year ago
0.0.0-experimental-7c2f356
1 year ago
0.6.3
1 year ago
0.6.2
1 year ago
0.6.1
1 year ago
0.6.0
1 year ago
0.5.4
2 years ago
0.5.3
2 years ago
0.5.2
2 years ago
0.5.1
2 years ago
0.5.0
2 years ago
0.4.6
2 years ago
0.4.5
2 years ago
0.4.4
2 years ago
0.4.2
2 years ago
0.4.0
2 years ago