Build forms the right way.
Lightweight library for building forms in React
that offers built-in validation, input masking, error handling & more.
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;
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.
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.
View our blog
Different ways to handle form submission in React
Much like HTML, in React, forms are also used to allow user interaction within web pages. Adding a form in React is as simple as adding any other element.However, the default behaviour of form submission in React typically isn't what we want. Instead, we aim to override this default behaviour and allow React to manage the form. This gives us more control over how the form data changes and how it is submitted.
The Role of input masking in web forms
Input masking is a technique used in software development to regulate and format user input within form fields. By defining an input mask, developers can restrict the format of information being typed into a field. This ensures users follow a specific pattern, such as for phone numbers, dates, or credit card numbers and more. It prevents errors and makes data entry smoother, resulting in more accurate and consistent information.
Client side validation using FormFusion
Client-side validation is a fundamental aspect of web development, vital for delivering user-friendly interfaces and reinforcing the security of online platforms. It involves performing validation checks on the user’s device when filling out forms before sending the data to the server.
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.