Formite

Modern architecture

Formite it easy to use and was designed from the ground up to use the latest React best practices.

Any UI framework

Formite can be used with any UI framework and comes with adapters for several UI frameworks out of the box.

No magic IDs or Names

Formite does not depend on magic IDs or names on form elements. You can refactor your code without breaking your forms.

Powered by Typescript

Formite is implemented with Typescript and can be used by plain Javascript or Typescript. It has full Intellisense support.

No dependencies

Formite does not have any external dependecies and has a footprint of 9 KB minimized Javascript code.

Backward compatible

Formite uses React Hooks for functional components and can also be used with older class components if needed.

Features

Field and form validation

Synchronous and asynchronous validation and form submission

Dynamic forms and subforms

Tracks fields' touched state

Tracks form's isDirty state

No render props required

Local state - no global store necessary

Everything, without any extra lines of code

const { canSubmit, fields, Form, isDirty } = useForm({ firstName: "", lastName: "" }, handleSubmit);
return (
    <Form>
        <input type="text" placeholder="First name" {...useInput(fields.firstName)} />
        <input type="text" placeholder="Last name" {...useInput(fields.lastName)} />
        <button type="submit" disabled={!(canSubmit && isDirty)}>Save</button>
    </Form>
);

Just add the form behavior to your component with React Hooks and you are ready to go...

Get Started