🧱 Components
Form

Form Component Documentation

Introduction

The Form component is a versatile and flexible form builder in React, designed to handle form state management, validation, and submission. It provides an intuitive API to define form fields, their validation rules, and custom rendering logic.

Component Description

The Form component simplifies the process of creating forms by allowing you to define a validation schema and the route for form submission. This example demonstrates how to use the Form component to create a registration form that collects a user's name and surname, ensuring both fields are required.

Usage

To use the Form component, follow these steps:

  1. Validator and Route Setup:
    • Create a validation schema using the validation library (VineJS.) and pass it to the schema prop.
    • Specify the submission route using the routeName prop.

Important! You need, in routes, to specify the route name! With the as method.
router.post("otp/ask-otp", [OtpController, "askForOtp"]).as("otp.ask-otp")

  1. Form Fields Definition:

    • Inside the Form component, use the FormField sub-component to define each field.
    • The FormField requires a control prop (provided by the Form component) and the name of the field.
    • Use the render prop to define how the field should be rendered, including the label, input, and any additional styling or requirements.

  2. Submit Button:

    • Add a Button component for form submission.

Example

Below is an example showcasing the usage of the Form component to create a registration form:

import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from 'your-form-library';
import { Input } from 'your-input-component';
import { Button } from 'your-button-component';
 
// Assuming completeRegistrationValidator is already defined
import { completeRegistrationValidator } from 'your-validator-schema';
 
const RegistrationForm = () => (
  <Form schema={completeRegistrationValidator} routeName={"otp.complete"}>
    {({ control }) => (
      <div className="space-y-4 text-black">
        <FormField
          control={control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input
                  placeholder=""
                  {...field}
                  required={true}
                  type="text"
                  className="bg-darkgray"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
 
        <FormField
          control={control}
          name="surname"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Surname</FormLabel>
              <FormControl>
                <Input
                  placeholder=""
                  {...field}
                  required={true}
                  type="text"
                  className="bg-darkgray"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button className="w-full" type="submit">Submit</Button>
      </div>
    )}
  </Form>
);
 
export default RegistrationForm;

Detailed Explanation

  • Form Component:

    • schema={completeRegistrationValidator}: Specifies the validation schema.
    • routeName={"otp.complete"}: Specifies the route for form submission.

  • FormField Component:

    • control={control}: Prop provided by the Form component to manage field state.
    • name="name" and name="surname": Field names corresponding to the validation schema.

  • Field Rendering:

    • FormItem, FormLabel, FormControl, and FormMessage are used to structure the field's layout.
    • Input component is used for the actual input field with specific props like required, type, and custom classes.

  • Button Component:

    • A Button component is used to submit the form, styled with a full-width class and a submit type.

This example demonstrates how to create a simple registration form using the Form component, showcasing how to integrate validation and handle form submission seamlessly.

FooterHero Cards