The ultimate way to build forms in React

FormFusion is a lightweight library for buidling forms in React that offers built-in validation, input masking, error handling & more.

npm i formfusion

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

Features

Why FormFusion?

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.

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.

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.

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.

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.

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.

Interactive Demo

See FormFusion in Action!

This code snippet shows a simple payment form built with FormFusion.
It highlights the library's user-friendly approach with built-in validation and customizable fields.

import { Form, Input } from 'formfusion';
import './App.css';

const MyForm = () => {
  const onSubmit = (data: object) => {
    console.log('Form submitted successfully', data);
  };

  return (
    <Form onSubmit={onSubmit} validateOnChange className="form">
      <h1>Simple payment form</h1>
      <Input
        id="credit-card-number"
        name="credit-card-number"
        type="credit-card-number-basic"
        label="Credit card number"
        placeholder="Enter your credit card number"
        required
        classes={{
          field: 'form__input-field',
          error: 'form__input-field__error',
          label: 'form__input-field__label',
        }}
      />
      <Input
        id="ccv"
        name="ccv"
        type="ccv"
        label="CCV"
        placeholder="Enter your ccv number"
        required
        classes={{
          field: 'form__input-field',
          error: 'form__input-field__error',
          label: 'form__input-field__label',
        }}
      />
      <Input
        id="expiry-date"
        name="expiry-date"
        type="date"
        label="Expiry date"
        required
        classes={{
          field: 'form__input-field',
          error: 'form__input-field__error',
          label: 'form__input-field__label',
        }}
      />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;

Ready to take the next step?

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