FormFusion: Easy form handling, validation & more

Form

The Form component acts as a compact wrapper for an HTML form element, effectively handling context management and propagation to its child components. It accepts all standard HTML form properties and additionally offers the following properties:

Form properties

Props of the native component are also available.

childrenRequired
Children of the Form element such as Input, Textarea, Labels, Buttons etc.
Type: Node

onSubmitRequired
This property specifies the function that executes when the form is submitted. It returns a values object containing all field values.
Type: function

initialValues
The initialValues property allows you to specify the default values for the form fields.
Type: { [field: string]: string }

validateOnChange
Determine whether the form should initiate validation and display errors in real-time while typing.
Default: false
Type: boolean

validateOnBlur
Determine whether the form should initiate validation and display errors when a field loses focus.
Default: true
Type: boolean

Example

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;