formfusion NPM Version
LearnBlogPlayground

Form

Form - Optimised and fully customisable React component

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-space"
        label="Credit card number"
        placeholder="1234 XXXX XXXX XXXX"
        required
      />
      <Input
        id="ccv"
        name="ccv"
        type="ccv"
        label="CCV"
        placeholder="Enter your ccv number"
        required
      />
      <Input
        id="expiry-date"
        name="expiry-date"
        type="date"
        label="Expiry date"
        required
      />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;