formfusion NPM Version
LearnBlogPlayground

Library Overview / What is FormFusion?



Meet FormFusion: The New Way to Manage Forms in React

Welcome! If you’re here, you likely understand that building forms in React can often feel repetitive and take up your valuable time. FormFusion is here to make it easier by handling the tricky parts for you:

  • Managing form state

  • Validating fields and showing errors

  • Handling form submissions

  • Building accessible forms



How does it work?

FormFusion is based on the native HTML form elements and built-in validation and extends the list of native input types with a large collection of thoroughly tested and ready to use validation rules such as:

See full list here


Motivation


After working with popular form libraries like Formik and React Hook Form, I noticed a recurring issue: while they reduced some of the repetitive work, they didn’t fully address validation needs. I often ended up writing custom validation functions and regex patterns repeatedly. Using yet another additional library just for validation felt like too much for managing forms only, especially with the dependency bloat it could bring. So I created FormFusion, a library that includes built-in validation to simplify the whole process. To offer even more, FormFusion makes your form fully accessible without you having to write a single line of code!

 

Main Features

  • Efficiency: Formfusion is a powerful yet lightweight library.

  • Adaptability: Easy to integrate into new or existing projects.

  • Out-of-the-Box Validation: Offers built-in validation rules.

  • Accessibility: All FormFusion components are fully accessible.

  • Customizable: You can fully customize the look of all components.

  • No dependencies: FormFusion is self - contained and does not rely on any external dependencies.

Installation

To get started with formfusion, simply install it using npm or yarn with the following command:



Formfusion is unstyled by default. To use the styled version, simply import the styles file in your main file:



Example

Here is an example of how you can build a simple, fully functional and accessible payment form in under a minute: