FormFusion by CoreLab UI

The FormFusion library is an efficient and adaptable solution for handling forms with built-in validation, full accessibility and completely customizable look simplifying the development process and improving user experience.

FormFusion Leverages the native HTML validation and extends the native input types to include:

• alphanumeric
• alphabetic
• numeric
• username
• credit-card-number
• ccv
• uuid
• ssn
• ...and many more - See full list of types here

Additionally, FormFusion provides other more specific sets of validation rules such as rules for postcodes validaion, IBAN numbers validation, Licence plates validation etc. These sets are not included in the formfusion package to ensure optimal size and performance but they can be installed separately.

List of available sets:

• @formfusion/postcodes
• @formfusion/licence-plates
• @formfusion/iban
• @formfusion/passports
• @formfusion/phones
• @formfusion/tin
• @formfusion/vat

Features

• Efficiency: Optimize your form-handling process this powerful, lightweight library.
• Adaptability: Easily integrate FormFusion into new or existing projects.
• Out-of-the-Box Validation: Use the built-in validation rules without hassle.
• Customizable: Tailor the UI to your specific needs and preferences.
• No dependencies: FormFusion is self-contained and it does not rely on any external dependencies

Installation

You can install FormFusion via npm or yarn:

npm install formfusion

or

yarn add formfusion

Usage

In your main file, import the styles for the formfusion styled version.

import 'formfusion/style.css';

Example of using FormFusion for a simple uncontrolled form with username field with validation

import React from "react";
import { Form, Input } from "formfusion";

const MyForm = () => {
  const onSubmit = (data) => {
    console.log("Form submitted successfully", data);
  };
  return (
    <Form onSubmit={onSubmit}>
      <Input id="username" name="username" type="username" required />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;

Start managing your forms efficiently!

For detailed documentation and examples, please visit our Documentation Page.