React Form

The Form is a powerful validation tool for React applications that helps manage form state and validation rules. It provides a comprehensive set of built-in validation rules, and customizable error messages. It allows developers to create robust forms with validation feedback, state tracking, and submission handling.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let's add the Syncfusion® React Form to the project.

Installing Syncfusion® React packages

To use the Form in this project, the @syncfusion/react-inputs package needs to be installed using the following command:

npm install @syncfusion/react-inputs

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Form and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';

Adding Form component

To include the Form in your application, import the Form, FormField from the @syncfusion/react-inputs package in App.tsx.

import { Form, FormField } from '@syncfusion/react-inputs';

Add the Form and FormField in application as shown in below code example.

import { useState } from 'react';
import { Form, FormField, ValidationRules, FormState, TextBox, NumericTextBox, TextBoxChangeEvent, NumericChangeEvent } from '@syncfusion/react-inputs';
import { Button, Color } from '@syncfusion/react-buttons';
import './app.css';

export default function App() {
  const [submissionData, setSubmissionData] = useState<Record<string, string> | null>(null);
  const [formState, setFormState] = useState<FormState>();

  const validationRules: ValidationRules = {
    fullName: {
      required: [true, 'Full name is required'],
      regex: [/^[A-Za-z\s]+$/, 'Full name should contain only alphabets'],
      minLength: [2, 'Full name must be at least 2 characters']
    },
    email: {
      required: [true, 'Email is required'],
      email: [true, 'Please enter a valid email address']
    },
    eventType: {
      required: [true, 'Event type is required'],
      minLength: [3, 'Event type must be at least 3 characters']
    },
    participants: {
      required: [true, 'Number of participants is required'],
      number: [true, 'Number of participants must be a number'],
      range: [[1, 10], 'Number of participants must be between 1 and 10']
    }
  };

  const fields = [
    { name: 'fullName', placeholder: 'Enter your full name', label: 'Full Name' },
    { name: 'email', placeholder: 'Enter your email', label: 'Email' },
    { name: 'eventType', placeholder: 'Enter event type', label: 'Event Type' },
    { name: 'participants', placeholder: 'Enter number of participants', label: 'Number of Participants' }
  ];

  return (
    <div className="component-section form-container">
      <h2 className="form-title">Event Registration</h2>
      <Form rules={validationRules} onSubmit={(data) => setSubmissionData(data as Record<string, string>)} onFormStateChange={setFormState} validateOnChange={true} autoComplete='off' >
        {fields.map((field) => (
          <FormField key={field.name} name={field.name} >
            <div className="form-field">
              <label className="sf-form-label" htmlFor={field.name}> {field.label} </label>
              {field.name !== 'participants' ? (
                <TextBox id={field.name} name={field.name} placeholder={field.placeholder}
                  autoComplete='off'
                  className={formState?.errors[field.name] ? 'sf-error' : undefined}
                  value={(formState?.values[field.name] || '') as string}
                  onChange={(args: TextBoxChangeEvent) => formState?.onChange(field.name, { value: args.value || '' })}
                  onBlur={() => formState?.onBlur(field.name)} />
              ) : (
                <NumericTextBox id={field.name} name={field.name} format='n' placeholder={field.placeholder}
                  className={formState?.errors[field.name] ? 'sf-error' : undefined}
                  value={Number(formState?.values[field.name]) || null}
                  onChange={(args: NumericChangeEvent) => {
                    if (args) {
                      formState?.onChange(field.name, { value: args.value });
                    }
                  }}
                  onBlur={() => formState?.onBlur(field.name)} />
              )}
              {formState?.errors[field.name] && (<div className="sf-form-error">{formState?.errors[field.name]}</div>)}
            </div>
          </FormField>
        ))}

        <div className="form-actions">
          <Button type="reset" className="form-button" color={Color.Error} onClick={() => { setSubmissionData(null); }} >Reset</Button>
          <Button type="submit" className="form-button" disabled={!formState?.allowSubmit} > Submit </Button>
        </div>

        {submissionData && (
          <div className="status-message success">
            <h3>Event Registration Submitted!</h3>
            <p><strong>Full Name:</strong> {submissionData.fullName}</p>
            <p><strong>Email:</strong> {submissionData.email}</p>
            <p><strong>Event Type:</strong> {submissionData.eventType}</p>
            <p><strong>Number of Participants:</strong> {submissionData.participants}</p>
          </div>
        )}
      </Form>
    </div>
  );
}

Run the project

To run the project, use the following command:

npm run dev

The Form component serves as the main container that manages Form state, validation, and submission. Each form input must be wrapped in a FormField component to connect it with the Form validation system. The FormField acts as a bridge between your input controls and the Form component's state management, ensuring that validation rules are applied and errors are properly tracked for each field.

The following example demonstrates how to create a simple Form with validation. The example below illustrates a form with fields for full name, email, event type, and number of participants. Each field has appropriate validation rules defined in a ValidationRules object, creating a structured approach to form validation. The implementation showcases proper React state management using useState hooks to track form data and submission status.

Form Configuration

• rules: Defines validation criteria using built-in rules like required, email, and minLength
• onSubmit: Processes form data when successfully submitted and updates UI with submission results
• onFormStateChange: Tracks the current Form state including values, errors, and validation status. The formState object provides access to values (current field values), errors (validation messages), allowSubmit (form validity status), and methods like onChange (updates field values) and onBlur (marks fields as touched).

Real-time validation

The Form allows for real-time validation feedback as users interact with form fields. By setting the validateOnChange property to true, validation will be performed on every input change, providing immediate feedback to users about the validity of their inputs.

Custom validation rules

The Form supports custom validation rules through the customValidator property. This functionality allows developers to implement complex validation logic beyond the built-in rules, such as password strength validation, domain-specific validation requirements, or conditional validation based on other field values.

Custom validators are defined as functions within the ValidationRules object for each field. When implementing a custom validator, the function receives the current field value as its parameter and should return an empty string when validation passes or an error message string when validation fails.

Conditional validation

Conditional validation allows form fields and their validation rules to change based on values in other fields. This dynamic approach to validation enables creating responsive forms that adapt to user choices. The example below demonstrates an employment application form where selecting different employment types (Employee, Freelancer, or Contractor) causes specific fields to appear with appropriate validation rules for each role type.

Multi-step form wizard

The Form makes it easy to create step-by-step forms. You can split a large form into smaller steps and validate each step separately. Users complete one step before moving to the next one. This approach makes forms less overwhelming and improves the user experience, especially for forms with many fields.

Integration with native HTML inputs

The Form works seamlessly with standard HTML input elements like <input>, <select>, and <checkbox>. This flexibility allows you to use familiar HTML elements while still getting all the validation and state management benefits of the Form system.

Custom error placement

The Form offers flexibility in how and where validation errors are displayed. Instead of showing errors next to each field, you can collect and display them in a centralized location, such as an error summary at the top of the Form. This approach is particularly useful for accessibility and creating clean form designs.

Built-in validation rules

The Syncfusion® React Form provides a comprehensive set of built-in validation rules that can be applied to form fields. These rules help ensure data integrity and proper format before submission.