Integration of React Components with React Final Form

This guide walks you through setting up Syncfusion React components with React Final Form.

What is React Final Form?

React Final Form is a high-performance form state management solution for React that delivers functionality through a subscription-based architecture, minimizing re-renders while offering comprehensive capabilities, including both synchronous and asynchronous field and form-level validation.

Prerequisites

System requirements for Syncfusion^® React UI components

Create a Vite project

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 React components to the project.

Add Syncfusion^® React packages

This guide demonstrates an asynchronous field-level validation implementation of React Final Form with various Syncfusion^® React components including TextBox, Button, and CheckBox. To implement these components in the project, install the @syncfusion/react-inputs, @syncfusion/react-buttons, and react-final-form packages.

npm install @syncfusion/react-inputs @syncfusion/react-buttons react-final-form

npm install @syncfusion/react-inputs @syncfusion/react-buttons react-final-form

Import Syncfusion^® CSS styles

Syncfusion^® React components are styled using built-in themes. The necessary Material CSS styles for the inputs and buttons components and its dependents are imported along with the required sample styles into the src/App.css file.

/* Import Syncfusion styles */
@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';

.form-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

.form-header {
  background: rgba(103, 80, 164);
  color: white;
  padding: 5px;
  text-align: center;
}

.form-header h1 {
  margin: 0 0 10px 0;
  font-size: 2rem;
}

.form-container {
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 30px;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.error-message {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 5px;
}

.checkbox-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.checkbox-field {
  margin-bottom: 15px;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.form-debug {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.form-debug h3 {
  margin: 0 0 15px 0;
  color: #475569;
}

.debug-output {
  background: #1e293b;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 6px;
  font-size: 0.875rem;
  overflow-x: auto;
  margin: 0;
}

/* Import Syncfusion styles */
@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';

.form-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

.form-header {
  background: rgba(103, 80, 164);
  color: white;
  padding: 5px;
  text-align: center;
}

.form-header h1 {
  margin: 0 0 10px 0;
  font-size: 2rem;
}

.form-container {
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 30px;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.error-message {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 5px;
}

.checkbox-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.checkbox-field {
  margin-bottom: 15px;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.form-debug {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.form-debug h3 {
  margin: 0 0 15px 0;
  color: #475569;
}

.debug-output {
  background: #1e293b;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 6px;
  font-size: 0.875rem;
  overflow-x: auto;
  margin: 0;
}

Add Syncfusion^® React component with Final Form

Follow the below steps to add the Syncfusion^® React component to the project:

1. Before adding the component, import the required component in the src/App.tsx file.

import { Form, Field } from "react-final-form";
import { TextBox } from '@syncfusion/react-inputs';
import { NumericTextBox } from '@syncfusion/react-inputs';
import { Checkbox, Button } from '@syncfusion/react-buttons';

import { Form, Field } from "react-final-form";
import { TextBox } from '@syncfusion/react-inputs';
import { NumericTextBox } from '@syncfusion/react-inputs';
import { Checkbox, Button } from '@syncfusion/react-buttons';

2. Then, add the components in the application using the following code sample.

import { Form, Field } from "react-final-form";
import { TextBox, TextBoxChangeEvent } from '@syncfusion/react-inputs';
import { NumericTextBox, NumericChangeEvent } from '@syncfusion/react-inputs';
import { Checkbox, Button,CheckboxChangeEvent  } from '@syncfusion/react-buttons';
import { registerLicense, Provider } from '@syncfusion/react-base';
import './App.css';

// Register Syncfusion license (replace with your license key)
registerLicense('YOUR_LICENSE_KEY');

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const onSubmit = async (values: any) => {
  await sleep(300);
  window.alert(JSON.stringify(values, null, 2));
};

export default function App() {
  return (
    <Provider ripple={true}>
      <div className="form-wrapper">
        <div className="form-header">
          <h2>React Final Form with Syncfusion<sup>®</sup> React Components</h2>
        </div>
        <Form
          onSubmit={onSubmit}
          validate={(values: any) => {
            const errors: any = {};
            if (!values.username) {
              errors.username = "Required";
            }
            if (!values.password) {
              errors.password = "Required";
            }
            if (!values.confirm) {
              errors.confirm = "Required";
            } else if (values.confirm !== values.password) {
              errors.confirm = "Must match";
            }
            if (!values.age || values.age <= 18) {
              errors.age = "Age is required and must be greater than 18";
            }
            if (!values.agreeToTerms) {
              errors.agreeToTerms = "You must agree to the terms";
            }
            return errors;
          }}
          render={({ handleSubmit, form, submitting, pristine, values }) => (
            <form onSubmit={handleSubmit} className="form-container">
              <div className="form-grid">
                <Field name="username">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Username *</label>
                      <TextBox
                        placeholder="Enter username"
                        value={input.value || ''}
                        onChange={(e: TextBoxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>

                <Field name="age">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Age *</label>
                      <NumericTextBox
                        placeholder="Enter your age"
                        value={input.value ? Number(input.value) : null}
                        onChange={(e: NumericChangeEvent) => {
                          if (e) {
                            input.onChange(e.value);
                          }
                        }}
                        min={1}
                        max={120}
                        format="n0"
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>

                <Field name="password">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Password *</label>
                      <TextBox
                        type="password"
                        placeholder="Enter password"
                        value={input.value || ''}
                        onChange={(e: TextBoxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>

                <Field name="confirm">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Confirm Password *</label>
                      <TextBox
                        type="password"
                        placeholder="Confirm password"
                        value={input.value || ''}
                        onChange={(e: TextBoxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>
              </div>

              <div className="checkbox-section">
                <Field name="rememberMe" type="checkbox">
                  {({ input }) => (
                    <div className="checkbox-field">
                      <Checkbox
                        label="Remember Me"
                        checked={input.checked || false}
                        onChange={(e: CheckboxChangeEvent) => input.onChange(e.value)}
                      />
                    </div>
                  )}
                </Field>

                <Field name="agreeToTerms" type="checkbox">
                  {({ input, meta }) => (
                    <div className="checkbox-field">
                      <Checkbox
                        label="I agree to the terms and conditions *"
                        checked={input.checked || false}
                        onChange={(e: CheckboxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>
              </div>

              <div className="form-actions">
                <Button
                  type="submit"
                  disabled={submitting}
                >
                  {submitting ? 'Submitting...' : 'Submit'}
                </Button>
                <Button
                  type="button"
                  onClick={form.reset}
                  disabled={submitting || pristine}
                >
                  Reset
                </Button>
              </div>

              <div className="form-debug">
                <h3>Form Values:</h3>
                <pre className="debug-output">
                  {JSON.stringify(values, null, 2)}
                </pre>
              </div>
            </form>
          )}
        />
      </div>
    </Provider>
  );
}

import { Form, Field } from "react-final-form";
import { TextBox, TextBoxChangeEvent } from '@syncfusion/react-inputs';
import { NumericTextBox, NumericChangeEvent } from '@syncfusion/react-inputs';
import { Checkbox, Button,CheckboxChangeEvent  } from '@syncfusion/react-buttons';
import { registerLicense, Provider } from '@syncfusion/react-base';
import './App.css';

// Register Syncfusion license (replace with your license key)
registerLicense('YOUR_LICENSE_KEY');

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const onSubmit = async (values: any) => {
  await sleep(300);
  window.alert(JSON.stringify(values, null, 2));
};

export default function App() {
  return (
    <Provider ripple={true}>
      <div className="form-wrapper">
        <div className="form-header">
          <h2>React Final Form with Syncfusion<sup>®</sup> React Components</h2>
        </div>
        <Form
          onSubmit={onSubmit}
          validate={(values: any) => {
            const errors: any = {};
            if (!values.username) {
              errors.username = "Required";
            }
            if (!values.password) {
              errors.password = "Required";
            }
            if (!values.confirm) {
              errors.confirm = "Required";
            } else if (values.confirm !== values.password) {
              errors.confirm = "Must match";
            }
            if (!values.age || values.age <= 18) {
              errors.age = "Age is required and must be greater than 18";
            }
            if (!values.agreeToTerms) {
              errors.agreeToTerms = "You must agree to the terms";
            }
            return errors;
          }}
          render={({ handleSubmit, form, submitting, pristine, values }) => (
            <form onSubmit={handleSubmit} className="form-container">
              <div className="form-grid">
                <Field name="username">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Username *</label>
                      <TextBox
                        placeholder="Enter username"
                        value={input.value || ''}
                        onChange={(e: TextBoxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>

                <Field name="age">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Age *</label>
                      <NumericTextBox
                        placeholder="Enter your age"
                        value={input.value ? Number(input.value) : null}
                        onChange={(e: NumericChangeEvent) => {
                          if (e) {
                            input.onChange(e.value);
                          }
                        }}
                        min={1}
                        max={120}
                        format="n0"
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>

                <Field name="password">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Password *</label>
                      <TextBox
                        type="password"
                        placeholder="Enter password"
                        value={input.value || ''}
                        onChange={(e: TextBoxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>

                <Field name="confirm">
                  {({ input, meta }) => (
                    <div className="form-field">
                      <label className="form-label">Confirm Password *</label>
                      <TextBox
                        type="password"
                        placeholder="Confirm password"
                        value={input.value || ''}
                        onChange={(e: TextBoxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>
              </div>

              <div className="checkbox-section">
                <Field name="rememberMe" type="checkbox">
                  {({ input }) => (
                    <div className="checkbox-field">
                      <Checkbox
                        label="Remember Me"
                        checked={input.checked || false}
                        onChange={(e: CheckboxChangeEvent) => input.onChange(e.value)}
                      />
                    </div>
                  )}
                </Field>

                <Field name="agreeToTerms" type="checkbox">
                  {({ input, meta }) => (
                    <div className="checkbox-field">
                      <Checkbox
                        label="I agree to the terms and conditions *"
                        checked={input.checked || false}
                        onChange={(e: CheckboxChangeEvent) => input.onChange(e.value)}
                      />
                      {meta.error && meta.touched && (
                        <span className="error-message">
                          {meta.error}
                        </span>
                      )}
                    </div>
                  )}
                </Field>
              </div>

              <div className="form-actions">
                <Button
                  type="submit"
                  disabled={submitting}
                >
                  {submitting ? 'Submitting...' : 'Submit'}
                </Button>
                <Button
                  type="button"
                  onClick={form.reset}
                  disabled={submitting || pristine}
                >
                  Reset
                </Button>
              </div>

              <div className="form-debug">
                <h3>Form Values:</h3>
                <pre className="debug-output">
                  {JSON.stringify(values, null, 2)}
                </pre>
              </div>
            </form>
          )}
        />
      </div>
    </Provider>
  );
}

Run the project

To run the project, use the following command:

npm run dev

npm run dev

The output will appear as follows: