Form Component

Provides a form component with built-in validation functionality. Manages form state tracking, field validation, and submission handling.

Usage

To import and use the Form component in your application, use the following code snippet:

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

const [formState, setFormState] = useState<FormState>();
<Form
rules={{ username: { required: [true, 'Username is required'] } }}
onSubmit={data => console.log(data)}
onFormStateChange={setFormState} >
<FormField name="username">
  <input
    name="username"
    value={(formState?.values.username || '') as string}
    onChange={(e) => formState?.onChange('username', { value: e.target.value })}
    onBlur={() => formState?.onBlur('username')}
    onFocus={() => formState?.onFocus('username')}
  />
  {formState?.errors?.username && (<div className="error">{formState.errors.username}</div>)}
</FormField>
<button type="submit">Submit</button>
</Form>

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

const [formState, setFormState] = useState<FormState>();
<Form
rules={{ username: { required: [true, 'Username is required'] } }}
onSubmit={data => console.log(data)}
onFormStateChange={setFormState} >
<FormField name="username">
  <input
    name="username"
    value={(formState?.values.username || '') as string}
    onChange={(e) => formState?.onChange('username', { value: e.target.value })}
    onBlur={() => formState?.onBlur('username')}
    onFocus={() => formState?.onFocus('username')}
  />
  {formState?.errors?.username && (<div className="error">{formState.errors.username}</div>)}
</FormField>
<button type="submit">Submit</button>
</Form>

Demos

Explore the demos of the React Form component. Refer to this page.

Props

The following table outlines the props for the Form component:

Name	Type	Default	Description
initialValues	FormInitialValues	-	Specifies the initial values for form fields. These values populate the form.
rules	ValidationRules	-	Specifies the validation rules for each form field. This object defines constraints that form fields must satisfy.
validateOnChange	boolean	false	Specifies whether to trigger validation on every input change. When true, validation occurs on each keystroke, providing immediate feedback.

Methods

The following table outlines the methods for the Form component:

Name	Parameters	Returns	Description
reset	-	void	Resets the form to its initial state, clearing all values, errors, and interaction states.
validate	-	boolean	Validates the entire form against all defined rules.
validateField	fieldName : string	boolean	Validates a specific field against its defined rules. Params: fieldName: Specifies the name of the field to validate

Events

The following table outlines the events for the Form component:

Name	Type	Description
onFormStateChange	(formState: FormState) => void	Specifies the callback fired when form state changes. This can be used to access form state from parent components for custom UI rendering.
onSubmit	(data: Record<string, FormValueType>) => void	Specifies the callback fired when form is submitted and all validation rules pass.