React-based form utilities that don't get in your way with a focus on composability, simplicity, and web standards. So straightforward you could build it yourself, but now you don't have to.
Rather than trying to be an all-in form solution, Acorn Forms is meant to be a set of building blocks that are composable and individually implementable to suit the needs and preferences of the developers using them.
-
Exensible by design: allows for the messiness of the real world by making everything composible not making unnecessary assumptions.
-
Style-agnostic: you write your own field and input components, Acorn just helps you apply logic to them.
-
Prioritizes leaning on web standards: rather than trying to reinvent what HTML has already given us, Acorn Forms encourages using existing web features such as validation. If that's not your thing, no worries; it will work either way.
-
Typescript focused: ground up Typescript support and consideration to help avoid those pesky buried typing problems.
Acorn Forms provides 3 key pieces out of the box, and lets you put them together how you wish. A simplified end result could look something like this:
import { useForm, useField, FormField } from "acorn-forms";
interface LoginDTO {
username: string;
password: string;
rememberMe: boolean;
}
const LoginForm = () => {
const { form, formState } = useForm<LoginDTO>({
username: "",
password: "",
rememberMe: false
});
const onSubmit = (e) => {
}
return (
<form onSubmit={onSubmit}>
</form>
)
}
interface SimpleFormFieldType { type: string }
const SimpleFormField = () => {
}