NPM Version

Build forms the right way. 

Lightweight library for building forms in React
that offers built-in validation, input masking, error handling & more.

code
import React from 'react';
import { Form, Input } from 'formfusion';

const MyForm = () => {
    const onSubmit = (data) => {
        alert('Form submitted successfully' + JSON.stringify(data));
    };

    return (
        <Form onSubmit={onSubmit} className={classes.form}>
            <Input
                id="firstName"
                name="firstName"
                type="alphabetic"
                label="First name"
                placeholder="What's your first name"
                required
            />
            <Input
                id="email"
                name="email"
                type="email"
                label="Email"
                placeholder="Enter your email"
                required
            />
            <Input
                id="phone"
                name="phone"
                type="text"
                label="Phone number"
                mask="(+#) ### ### ####"
                placeholder="(+X) XXX XXX XXXX"
                required
            />
            <button type="submit">Test me</button>
        </Form>
    );
};

export default MyForm;

Demo

This interactive form demonstrates FormFusion's built-in validation.
Feel free to experiment with the fields below.


How FormFusion stands out



Built-in validation

Provides a large collection of thoroughly tested and ready to use validation rules.

Intuitive

Practical solution based on native HTML form features neatly packaged into familiar React components and hooks. No learning required.

Lightweight

Minimal yet efficient library that does not rely on any external dependencies.

Compatible

Perfectly integrates with any UI library such as Material UI, Ant Design, Chakra UI, Reactstrap and many more.



What FormFusion includes



Optimized Form components


FormFusion offers optimized form components such as Form, Input and Textarea to streamline your development process. The components are designed for efficiency, fast rendering and minimal resource usage. They are completely customizable and very easy to use.

Learn more about components

Custom React hooks for greater form control


By default all Form elements in FormFusion are uncontrolled to ensure the best performance and minimal re-rendering. To gain more control over the form fields, FormFusion offers custom react hooks that can be used to access field values, errors etc.

See all hooks

Error handling


FormFusion takes care of error handling by providing automated error messages depending on the field type while also offering full field accessibility. The error messages are very easy to customize.

Find out how errors are handled

500+ Validation rules


The validation library consists of over 500 validation rules. Whether it's simple text inputs or complex custom fields, we've got you covered. With a wide array of validation rules, you can ensure data integrity and accuracy, tailored to your specific requirements.

See all validation rules

Input masking


FormFusion library provides input masking, allowing you to define custom formats and restrictions for user input. With this feature, you can easily enforce specific formats such as phone numbers, dates, or credit card numbers, ensuring data consistency and accuracy throughout your forms.

Use masking in your forms

Integration with UI libraries


Integrate FormFusion with your preferred UI libraries for a cohesive development experience. The library offers easy compatibility with popular libraries like Material-UI, Ant Design, Reactstrap and more, ensuring consistency and style across your entire application. With this integration, leverage the power of FormFusion while maintaining your preferred design components.

Integrate with your UI library

Be part of the change.

Get started with FormFusion today and experience the difference!
Explore our detailed documentation and dive into the world of effortless form development.