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
- 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
You can install FormFusion via npm or yarn:
npm install formfusion
or
yarn add formfusion
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.