diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields.md
new file mode 100644
index 000000000..9935b9a93
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields.md
@@ -0,0 +1,533 @@
+---
+layout: post
+title: Create form fields in the React PDF Viewer | Syncfusion
+description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create form fields in React PDF Viewer
+
+The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. You can also create and manage form fields programmatically using the API.
+
+The PDF Viewer supports the following form field types:
+
+- [Textbox](#add-textbox)
+- [Password](#add-password)
+- [CheckBox](#add-checkbox)
+- [RadioButton](#add-radiobutton)
+- [ListBox](#add-listbox)
+- [DropDown](#add-dropdown)
+- [Signature field](#signature-field)
+- [Initial field](#add-initial-field)
+
+## Add the form field dynamically
+
+Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
+
+
+
+## Drag the form field
+
+Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
+
+
+
+## Resize the form field
+
+Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
+
+
+
+## Textbox
+
+### Add Textbox
+
+- Open the Form Designer toolbar.
+- Select Textbox, then click/tap on the page to place it.
+- Resize/move as needed and set properties in the property panel.
+
+
+
+### Add Textbox Programmatically
+
+To add a Textbox programmatically in React, use a ref to access the viewer instance and add the field in the documentLoad event.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ viewerRef.current?.formDesignerModule.addFormField('Textbox', {
+ name: 'First Name',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Password
+
+### Add Password
+
+- Open the Form Designer toolbar.
+- Select Password, then place it on the page.
+- Configure tooltip, required, max length, etc.
+
+
+
+### Add Password Programmatically
+
+To add a Password field programmatically in React, add it in the documentLoad event.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ viewerRef.current?.formDesignerModule.addFormField('Password', {
+ name: 'Account Password',
+ bounds: { X: 148, Y: 270, Width: 180, Height: 24 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## CheckBox
+
+### Add CheckBox
+
+- Choose CheckBox in the Form Designer toolbar.
+- Click on the page to place, duplicate for multiple options if needed.
+- Use property panel to set IsChecked, tooltip, and appearance.
+
+
+
+### Add CheckBox Programmatically
+
+To add a CheckBox programmatically in React, add it in the documentLoad event.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ viewerRef.current?.formDesignerModule.addFormField('CheckBox', {
+ name: 'Subscribe',
+ isChecked: false,
+ bounds: { X: 56, Y: 664, Width: 20, Height: 20 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## RadioButton
+
+### Add RadioButton
+
+- Select RadioButton in the Form Designer toolbar.
+- Place buttons sharing the same Name to create a group (e.g., Gender).
+- Use property panel to set selection, colors, and tooltip.
+
+
+
+### Add RadioButton Programmatically
+
+To add radio buttons programmatically in React, add them in the documentLoad event using the same name to create a group.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ // Group by name: 'Gender'
+ viewerRef.current?.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ isSelected: false,
+ bounds: { X: 148, Y: 289, Width: 18, Height: 18 }
+ });
+
+ viewerRef.current?.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ isSelected: false,
+ bounds: { X: 292, Y: 289, Width: 18, Height: 18 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## ListBox
+
+### Add ListBox
+
+- Choose ListBox in the Form Designer toolbar.
+- Place the field and add items in the property panel.
+- Configure font, size, and selection behavior.
+
+
+
+### Add ListBox Programmatically
+
+To add a ListBox programmatically in React, include an options array and add the field in documentLoad.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ const options = [
+ { itemName: 'Item 1', itemValue: 'item1' },
+ { itemName: 'Item 2', itemValue: 'item2' },
+ { itemName: 'Item 3', itemValue: 'item3' }
+ ];
+
+ viewerRef.current?.formDesignerModule.addFormField('ListBox', {
+ name: 'States',
+ options,
+ bounds: { X: 380, Y: 320, Width: 150, Height: 60 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## DropDown
+
+### Add DropDown
+
+- Select DropDown in the Form Designer toolbar.
+- Place the field, then add items via the property panel.
+- Adjust appearance and default value.
+
+
+
+### Add DropDown Programmatically
+
+To add a DropDown programmatically in React, include an options array and add the field in documentLoad.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ const options = [
+ { itemName: 'Item 1', itemValue: 'item1' },
+ { itemName: 'Item 2', itemValue: 'item2' },
+ { itemName: 'Item 3', itemValue: 'item3' }
+ ];
+
+ viewerRef.current?.formDesignerModule.addFormField('DropDown', {
+ name: 'Country',
+ options,
+ bounds: { X: 560, Y: 320, Width: 150, Height: 24 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Signature field
+
+### Add Signature field
+
+- Select Signature field in the Form Designer toolbar.
+- Place the field where the signer should sign.
+- Configure indicator text, thickness, tooltip, and required state.
+
+
+
+### Add Signature field Programmatically
+
+To add a Signature field programmatically in React, add it in the documentLoad event.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ viewerRef.current?.formDesignerModule.addFormField('SignatureField', {
+ name: 'Sign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Initial field
+
+### Add Initial field
+
+- Select Initial field in the Form Designer toolbar.
+- Place the field where initials are required.
+- Configure indicator text, tooltip, and required state.
+
+
+
+### Add Initial field Programmatically
+
+To add an Initial field programmatically in React, add it in the documentLoad event.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ viewerRef.current?.formDesignerModule.addFormField('InitialField', {
+ name: 'Initial',
+ bounds: { X: 148, Y: 466, Width: 200, Height: 43 }
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## setFormFieldMode programmatically
+
+The `setFormFieldMode` method enables adding a form field dynamically by specifying the field type. For example, the following adds a Password field when a button is clicked.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const addPasswordFieldMode = () => {
+ viewerRef.current?.formDesignerModule.setFormFieldMode('Password');
+ // You can pass other fields like 'Textbox', 'CheckBox', etc.
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Edit form fields](./edit-formfields)
+- [Style form fields](./style-formfields)
+- [Remove form fields](./remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Form Fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields.md
new file mode 100644
index 000000000..eb91e6112
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields.md
@@ -0,0 +1,545 @@
+---
+layout: post
+title: Edit form fields in the React PDF Viewer | Syncfusion
+description: Learn how to edit PDF form fields using the UI and programmatically with APIs in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Edit form fields in React PDF Viewer
+
+The PDF Viewer component allows user to edit PDF form fields using the Form Designer UI and update them programmatically.
+
+The PDF Viewer supports editing these field types:
+
+- [Textbox](#textbox)
+- [Password](#password)
+- [CheckBox](#checkbox)
+- [RadioButton](#radiobutton)
+- [ListBox](#listbox)
+- [DropDown](#dropdown)
+- [Signature field](#signature-field)
+- [Initial field](#initial-field)
+
+## Edit with the UI
+
+- Select a form field and Right-click to open the Properties panel from the context menu to change its settings.
+
+
+
+- Drag to move; use resize handles to resize.
+- Use the toolbar to toggle field mode and add new fields.
+
+## Textbox
+
+### Edit Textbox
+
+- Right-click the textbox → Properties.
+- Change value, font, size, colors, border thickness, alignment, max length, multiline.
+
+
+
+### Edit Textbox programmatically
+
+Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the textbox, and applies value, typography, colors, alignment, and border thickness updates.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onEditTextbox = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ const fields = viewer.retrieveFormFields();
+ const field = fields.find(f => f.name === 'First Name') || fields[0];
+ if (field) {
+ viewer.formDesignerModule.updateFormField(field, {
+ value: 'John',
+ fontFamily: 'Courier',
+ fontSize: 12,
+ color: 'black',
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ alignment: 'Left',
+ maxLength: 50
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Password
+
+### Edit Password
+
+- Right-click the password field → Properties.
+- Change tooltip, required, max length, font, and appearance.
+
+
+
+### Edit Password programmatically
+
+Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the password field, and applies tooltip, validation flags, typography, colors, alignment, max length, and border thickness updates.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onEditPassword = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ const fields = viewer.retrieveFormFields();
+ const field = fields.find(f => f.name === 'Password');
+ if (field) {
+ viewer.formDesignerModule.updateFormField(field, {
+ tooltip: 'Enter your password',
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ fontFamily: 'Courier',
+ fontSize: 10,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white',
+ alignment: 'Left',
+ maxLength: 20,
+ thickness: 1
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## CheckBox
+
+### Edit CheckBox
+
+- Right-click the checkbox → Properties.
+- Toggle checked state, change border/background colors and thickness.
+
+
+
+### Edit CheckBox programmatically
+
+Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the checkbox field, and applies checked state, tooltip, colors, and border thickness updates.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onEditCheckbox = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ const fields = viewer.retrieveFormFields();
+ const cb = fields.find(f => f.name === 'Subscribe');
+ if (cb) {
+ viewer.formDesignerModule.updateFormField(cb, {
+ isChecked: true,
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ tooltip: 'Subscribe to newsletter'
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## RadioButton
+
+### Edit RadioButton
+
+- Right-click a radio button → Properties.
+- Set selected state, colors, and thickness. Buttons with the same Name form a group; only one can be selected.
+
+
+
+### Edit RadioButton programmatically
+
+Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the radio button group, and applies selection state and border appearance updates.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onEditRadio = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ const fields = viewer.retrieveFormFields();
+ const genderRadios = fields.filter(f => f.name === 'Gender');
+ if (genderRadios.length > 1) {
+ viewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false });
+ viewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## ListBox
+
+### Edit ListBox
+
+- Right-click the list box → Properties.
+- Add/remove items, set selection, and adjust fonts and colors.
+
+
+
+### Edit ListBox programmatically
+
+Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the list box, and applies options, selection, typography, colors, and border appearance updates.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onEditListBox = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ const fields = viewer.retrieveFormFields();
+ const lb = fields.find(f => f.name === 'States');
+ if (lb) {
+ viewer.formDesignerModule.updateFormField(lb, {
+ options: [
+ { itemName: 'Alabama', itemValue: 'AL' },
+ { itemName: 'Alaska', itemValue: 'AK' },
+ { itemName: 'Arizona', itemValue: 'AZ' }
+ ],
+ value: 'AZ',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white'
+ });
+ }
+ };
+
+ return (
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Signature field
+
+### Edit Signature field
+
+- Right-click the signature field → Properties.
+- Change tooltip, thickness, indicator text, required/visibility states.
+
+
+
+### Edit Signature field programmatically
+
+Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the signature field, and applies tooltip, required/print flags, colors, and border thickness updates.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onEditSignature = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ const fields = viewer.retrieveFormFields();
+ const sig = fields.find(f => f.name === 'Sign');
+ if (sig) {
+ viewer.formDesignerModule.updateFormField(sig, {
+ tooltip: 'Please sign here',
+ thickness: 3,
+ isRequired: true,
+ isPrint: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Initial field
+
+### Edit Initial field
+
+- Right-click the initial field → Properties.
+- Change tooltip, indicator text, thickness, and required/visibility states.
+
+
+
+### Edit Initial field programmatically
+
+Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the initial field, and applies tooltip, required/print flags, colors, and border thickness updates.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onEditInitial = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ const fields = viewer.retrieveFormFields();
+ const init = fields.find(f => f.name === 'Initial');
+ if (init) {
+ viewer.formDesignerModule.updateFormField(init, {
+ tooltip: 'Add your initials',
+ thickness: 2,
+ isRequired: true,
+ isPrint: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-formfields)
+- [Remove form Fields](./remove-formfields)
+- [Style form fields](./style-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md
new file mode 100644
index 000000000..68a1fc56a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: Remove form fields in the React PDF Viewer component | Syncfusion
+description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Remove form fields in React PDF Viewer control
+
+The PDF Viewer component allows users to remove PDF form fields using the Form Designer UI and programmatically.
+
+## Remove form fields using the UI
+
+You can remove designed form fields directly from the Form Designer toolbar.
+
+Steps:
+
+- Select the target form field on the page.
+- Click the Delete Form Field icon on the Form Designer toolbar.
+- Alternatively, press the `Delete key` after selecting one or more fields.
+
+
+
+## Remove form fields programmatically
+
+Use the `deleteFormField` method to remove form fields programmatically. Retrieve the target field from the `formFieldCollections` property (by object or ID) and pass it to `deleteFormField`.
+
+The following example adds three fields on document load (Textbox, Password, and Signature) and shows two ways to remove them using buttons.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef, useCallback } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = useCallback(() => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ viewer.formDesignerModule.addFormField('Textbox', {
+ name: 'First Name',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+ });
+
+ viewer.formDesignerModule.addFormField('Password', {
+ name: 'Password',
+ bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+ });
+
+ viewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'Sign Here',
+ bounds: { X: 146, Y: 280, Width: 200, Height: 43 }
+ });
+ }, []);
+
+ const deleteAll = useCallback(() => {
+ const viewer = viewerRef.current;
+ if (!viewer || !viewer.formFieldCollection) return;
+ const fields = [...viewer.formFieldCollection]; // clone to avoid mutation issues
+ fields.forEach(field => viewer.formDesignerModule.deleteFormField(field));
+ }, []);
+
+ const deleteById = useCallback(() => {
+ const viewer = viewerRef.current;
+ const list = viewer?.formFieldCollection || [];
+ if (list.length > 0) {
+ const id = list[0].id;
+ if (id) viewer.formDesignerModule.deleteFormField(id);
+ }
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+N> To configure the server-backed PDF Viewer, add the following `serviceUrl` as a prop in the `index.js` file:
+`serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/"`
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-formfields)
+- [Edit form fields](./edit-formfields)
+- [Style form fields](./style-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md
new file mode 100644
index 000000000..bfc1e5496
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md
@@ -0,0 +1,949 @@
+---
+layout: post
+title: Style form fields in the React PDF Viewer | Syncfusion
+description: Learn how to configure typography, colors, borders, alignment, and other style settings for form fields using the UI and Programmatically.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Style form fields in React PDF Viewer
+
+The PDF Viewer component allows users to style and customize the appearance of PDF form fields using the Form Designer UI and programmatically. User can also set the default settings applied when fields are added from the Form Designer toolbar.
+
+Supported field types:
+
+- [Textbox](#textbox)
+- [Password](#password)
+- [CheckBox](#checkbox)
+- [RadioButton](#radiobutton)
+- [ListBox](#listbox)
+- [DropDown](#dropdown)
+- [Signature field](#signature-field)
+- [Initial field](#initial-field)
+
+## Textbox
+
+### Style Textbox
+
+Use the Properties panel to adjust the value, font family/size/style, text color, border and background colors, border thickness, text alignment, and maximum length.
+
+
+
+### Style Textbox programmatically
+
+Use `updateFormField` to modify a textbox’s appearance and behavior on a button click. The example below finds the field by name (or falls back to the first field) and updates value, typography, colors, alignment, and border thickness.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const updateTextboxStyle = () => {
+ const fields = viewerRef.current?.retrieveFormFields?.() || [];
+ const tb = fields.find((f) => f.name === 'First Name') || fields[0];
+ if (tb) {
+ viewerRef.current.formDesignerModule.updateFormField(tb, {
+ value: 'John',
+ fontFamily: 'Courier',
+ fontSize: 12,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white',
+ alignment: 'Left',
+ thickness: 2
+ });
+ }
+ };
+
+ return (
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-formfields)
+- [Edit form fields](./edit-formfields)
+- [Remove form fields](./remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/custom-data.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/custom-data.md
new file mode 100644
index 000000000..6ddc8ae3a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/custom-data.md
@@ -0,0 +1,221 @@
+---
+layout: post
+title: Add custom data to form fields in React Pdf Viewer | Syncfusion
+description: Learn how to attach, update, and read custom Data on PDF form fields using the Form Designer UI and APIs in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Add custom data to form fields in React
+
+You can associate arbitrary metadata with any form field using the customData property. This is useful for storing business IDs, validation hints, tags, or any app-specific information alongside the field. The data stays with the field object during the viewer session and can be accessed whenever you query or update fields.
+
+N> customData is a free-form object. You control both its shape and how it is used in your application.
+
+## Add custom data when creating fields (programmatically)
+
+Pass a customData object in the second parameter of addFormField. You can include any serializable values.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ const meta = { businessId: 'C-1024', tags: ['profile', 'kiosk'], requiredRole: 'admin' };
+ viewerRef.current?.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 229, Width: 200, Height: 24 },
+ // Attach any custom metadata your app needs
+ customData: meta
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+N> To configure the server-backed PDF Viewer, set:
+`viewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+## Set default custom data for UI-created fields
+
+When users add fields via the Form Designer toolbar, you can predefine default customData using the per-field settings objects.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+You can do the same for other field types using passwordFieldSettings, checkBoxFieldSettings, radioButtonFieldSettings, listBoxFieldSettings, dropDownFieldSettings, signatureFieldSettings, and initialFieldSettings.
+
+## Update or replace custom data on existing fields
+
+Use updateFormField to set or modify the customData of any existing field (retrieved by object or ID).
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const updateFirstField = () => {
+ const fields = viewerRef.current?.formFieldCollection || [];
+ if (!fields.length) { return; }
+ const target = fields[0];
+ viewerRef.current?.formDesignerModule.updateFormField(target, {
+ customData: { group: 'profile', flags: ['pii', 'masked'], updatedAt: Date.now() }
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+Tip: You can merge new values with existing ones in your app code before calling updateFormField.
+
+## Read custom data
+
+You can read customData from any field at any time. Typical entry points:
+- After document load
+- On your own UI actions (save, validate, route, etc.)
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ const fields = viewerRef.current?.formFieldCollection || [];
+ fields.forEach((f) => {
+ console.log('Field', f.name, 'customData:', f.customData);
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Notes and best practices
+
+- Keep customData small and serializable (plain objects, arrays, numbers, strings, booleans).
+- Treat customData as application metadata. Use it to drive business rules, validation, or routing in your app.
+- When cloning or copying fields in your UI, also copy or adjust customData as needed.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Form constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md
new file mode 100644
index 000000000..4f2166b62
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md
@@ -0,0 +1,589 @@
+---
+layout: post
+title: Form constraints in the React PDF Viewer component | Syncfusion
+description: Learn how to configure form field constraints such as isReadOnly, isRequired, and isPrint in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Form constraints in React PDF Viewer
+
+The PDF Viewer components provides support to control user interaction and output behavior of form fields using the following constraints:
+
+- [isReadOnly](#make-form-fields-readonly): Prevents users from editing a field.
+- [isRequired](#mark-fields-as-required): Marks a field as mandatory and participates in validation.
+- [isPrint](#control-field-print-behavior): Includes the field appearance when printing or exporting with print.
+
+You can set these properties when you create fields, update them later programmatically, or configure default settings so fields created from the Form Designer toolbar inherit the values.
+
+
+
+## isReadOnly
+
+Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code. Use the following code-snippets to make form fields read-only.
+
+- Creation
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ // Creation
+ viewerRef.current?.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ isReadOnly: true,
+ value: 'EMP-0001'
+ });
+ };
+
+ return (
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+N> Printing can be invoked programmatically using pdfviewer.print.print(); fields with isPrint: false will not appear in the print output.
+
+## Set constraints when creating a field
+
+Use `addFormField` to create fields and pass the constraint properties in the settings object. The example below adds a Textbox and a Signature field with different constraint combinations.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ // Read-only Textbox that is printed but not required
+ viewerRef.current?.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ isReadOnly: true,
+ isRequired: false,
+ isPrint: true,
+ value: 'EMP-0001'
+ });
+
+ // Required Signature field that is not included in print
+ viewerRef.current?.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: false,
+ tooltip: 'Sign to accept the terms'
+ });
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+N> To configure the server-backed PDF Viewer, add the following serviceUrl in React index.js:
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Update constraints programmatically
+
+Use `updateFormField` to change constraint flags of an existing field. The snippet below toggles isReadOnly, sets a field as required, and controls whether the field should appear when printing.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ // Add a sample textbox
+ viewerRef.current?.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 }
+ });
+
+ // Retrieve it and update constraint flags
+ const field = viewerRef.current?.formFieldCollection?.find(f => f.name === 'Email');
+ if (field) {
+ viewerRef.current.formDesignerModule.updateFormField(field, {
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ tooltip: 'Enter a valid email'
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Configure default constraints for newly added fields
+
+Set default settings so all fields created from the Form Designer toolbar inherit the constraint flags.
+
+The example below configures defaults for Textbox and Signature fields.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoad = () => {
+ // Textbox fields will be editable, required, and included in print by default
+ if (viewerRef.current) {
+ viewerRef.current.textFieldSettings = {
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ tooltip: 'Required field'
+ };
+
+ // Signature fields will be optional and hidden when printing
+ viewerRef.current.signatureFieldSettings = {
+ isReadOnly: false,
+ isRequired: false,
+ isPrint: false,
+ tooltip: 'Sign if applicable'
+ };
+ }
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Behavior notes
+
+- Use `isReadOnly` API to only blocks user edits in the UI. You can still update the field programmatically.
+- Use `isRequired` API to participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details.
+- Use `isPrint` API controls field appearance in the print output. It does not affect download/export unless printing is triggered.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form validation](./form-validation)
+- [Form fields API](./formfields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-designer.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-designer.md
new file mode 100644
index 000000000..b3dfb05ee
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-designer.md
@@ -0,0 +1,143 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in React | Syncfusion
+description: Learn here all about form designer and toolbar in Syncfusion React PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer and Toolbar Customization in React
+
+## Form Designer
+
+Create and customize interactive fields directly on the PDF page.
+- **Add fields**: textbox, checkbox, radio button, dropdown, list box, signature, and initials
+- **Edit quickly**: move, resize, align, distribute, copy/paste, undo/redo
+- **Configure properties**: name, value, font, color, border, alignment, required/read-only/visibility, tab order
+- **Control interaction**: toggle read-only, show/hide, and manage printing behavior
+- **Manage fields**: select, group/ungroup, reorder, or delete
+- **Save and print**: persist designed fields in the PDF and print with appearances
+- **Tailor the UI**: show/hide or customize the Form Designer toolbar; handle events for add/edit/select/move/resize
+- The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear.
+
+Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export function App() {
+ return (
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Show or hide the form designer toolbar
+
+Show or hide the form designer toolbar programmatically during initialization or at runtime.
+
+Use the [EnableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enableformdesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showformdesignertoolbar) method to toggle visibility.
+
+The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export function App() {
+ return (
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## How to customize the form designer toolbar
+
+Choose which tools appear and control their order in the form designer toolbar.
+
+Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings) with the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings#formdesignertoolbaritems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formDesignerToolbarItem) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-field-events.md
index 9f7214c9d..8209892b9 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-field-events.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-field-events.md
@@ -14,23 +14,23 @@ The PDF Viewer control provides the support to different Form Field events. The
| Form Field events | Description |
|---|---|
-| formFieldAdd | Event trigger when a form field is added.|
-| formFieldClick | Events trigger when the form field is selected.|
-| formFieldDoubleClick | Events trigger when the form field is double-clicked.|
-| formFieldFocusOut | Events trigger when focus out from the form fields.|
-| formFieldMouseLeave | Events trigger when the mouse cursor leaves the form field.|
-| formFieldMouseOver | Events trigger when the mouse cursor is over a form field.|
-| formFieldMove | Events trigger when a form field is moved.|
-| formFieldPropertiesChange | Events trigger when a property of form field is changed.|
-| formFieldRemove | Events trigger when a form field is removed.|
-| formFieldResize | Events trigger when a form field is resized.|
-| formFieldSelect | Events trigger when a form field is selected.|
-| formFieldUnselect | Events trigger when a form field is unselected.|
-| validateFormFields | Events trigger when validation is failed.|
+| [formFieldAdd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldAddArgs) | Event trigger when a form field is added.|
+| [formFieldClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldClickArgs) | Events trigger when the form field is selected.|
+| [formFieldDoubleClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldDoubleClickArgs) | Events trigger when the form field is double-clicked.|
+| [formFieldFocusOut](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldFocusOutEventArgs) | Events trigger when focus out from the form fields.|
+| [formFieldMouseLeave](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMouseLeaveArgs) | Events trigger when the mouse cursor leaves the form field.|
+| [formFieldMouseOver](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMouseoverArgs) | Events trigger when the mouse cursor is over a form field.|
+| [formFieldMove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMoveArgs) | Events trigger when a form field is moved.|
+| [formFieldPropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) | Events trigger when a property of form field is changed.|
+| [formFieldRemove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldRemoveArgs) | Events trigger when a form field is removed.|
+| [formFieldResize](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldResizeArgs) | Events trigger when a form field is resized.|
+| [formFieldSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldSelectArgs) | Events trigger when a form field is selected.|
+| [formFieldUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldUnselectArgs) | Events trigger when a form field is unselected.|
+| [validateFormFields](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/validateFormFieldsArgs) | Events trigger when validation is failed.|
## formFieldAdd event
-The [formFieldAdd](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldAddArgs/) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.
+The [formFieldAdd](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldAddArgs) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -103,7 +103,7 @@ root.render();
## formFieldClick event
-The [formFieldClick](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldClickArgs/) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
+The [formFieldClick](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldClickArgs) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -176,7 +176,7 @@ root.render();
## formFieldDoubleClick event
-The [formFieldDoubleClick](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldDoubleClickArgs/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
+The [formFieldDoubleClick](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldDoubleClickArgs) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -249,7 +249,7 @@ root.render();
## formFieldFocusOut event
-The [formFieldFocusOut](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
+The [formFieldFocusOut](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldFocusOutEventArgs) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -322,7 +322,7 @@ root.render();
## formFieldMouseLeave event
-The [formFieldMouseLeave](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
+The [formFieldMouseLeave](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMouseLeaveArgs) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -395,7 +395,7 @@ root.render();
## formFieldMouseOver event
-The [formFieldMouseOver](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMouseoverArgs/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
+The [formFieldMouseOver](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMouseoverArgs) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -472,7 +472,7 @@ root.render();
## formFieldMove event
-The [formFieldMove](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMoveArgs/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
+The [formFieldMove](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldMoveArgs) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -549,7 +549,7 @@ root.render();
## formFieldPropertiesChange event
-The [formFieldPropertiesChange](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
+The [formFieldPropertiesChange](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -660,7 +660,7 @@ root.render();
## formFieldRemove event
-The [formFieldRemove](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldRemoveArgs/) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
+The [formFieldRemove](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldRemoveArgs) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -733,7 +733,7 @@ root.render();
## formFieldResize event
-The [formFieldResize](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldResizeArgs/) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
+The [formFieldResize](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldResizeArgs) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -810,7 +810,7 @@ root.render();
## formFieldSelect event
-The [formFieldSelect](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldSelectArgs/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
+The [formFieldSelect](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldSelectArgs) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -883,7 +883,7 @@ root.render();
## formFieldUnselect event
-The [formFieldUnselect](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldUnselectArgs/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
+The [formFieldUnselect](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldUnselectArgs) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
@@ -956,7 +956,7 @@ root.render();
## validateFormFields event
-The [validateFormFields](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/validateFormFieldsArgs/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
+The [validateFormFields](https://helpej2.syncfusion.com/react/documentation/api/pdfviewer/validateFormFieldsArgs) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
{% tabs %}
{% highlight js tabtitle="index.JSX" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-filling.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-filling.md
new file mode 100644
index 000000000..7ecc1993a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-filling.md
@@ -0,0 +1,183 @@
+---
+layout: post
+title: Form filling in React PDF Viewer Control | Syncfusion
+description: Learn to view, fill, export, and import PDF form fields in Syncfusion PDF Viewer, including disabling interaction and handling signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form filling in React PDF Viewer Control
+
+The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
+
+## Form Fields
+
+Work with the runtime form fields present in a PDF Form.
+- Render existing fields
+- Fill fields.
+- Import/Export form data as JSON, XFDF, FDF, or as a plain object
+- Inject FormFields to enable form-filling features.
+
+Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export function App() {
+ return (
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+
+
+The PDF Viewer supports the following form field types:
+
+* [Text box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-textBox)
+* [Password](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-password)
+* [Check box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-checkbox)
+* [Radio button](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-radiobutton)
+* [List box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-listbox)
+* [Dropdown](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-dropdown)
+* [Signature field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-signature-field)
+* [Initial field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-initial-field)
+
+
+
+## Updating form field value programmatically
+
+## Disabling form fields
+
+The PDF Viewer provides an option to disable interaction with form fields using `enableFormDesigner` API. Use the following configuration to disable form fields in the viewer.
+
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export function App() {
+ return (
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Access interactive form fields
+
+You can access the collection of all interactive form fields in the loaded document using the `formFieldCollection` property. Fetch the collection after the document is loaded.
+
+Use the following code-snippet to access interactive form fields collection:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export function App() {
+ const viewerRef = useRef(null);
+
+ const fetchFields = () => {
+ const fields = viewerRef.current?.formFieldCollection; // Gets all form fields
+ console.log(fields); // Log the formField collection
+ };
+ return (
+
+
+
+
+
+
+
);
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Add a handwritten signature to a signature field
+
+Add a handwritten signature to a signature field by following these steps:
+
+* Click the signature field in the PDF document to open the signature panel.
+
+
+
+* Draw the signature in the signature panel.
+
+
+
+* Select **CREATE**. The drawn signature is added to the signature field.
+
+
+
+## Delete a signature from a signature field
+
+Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
+
+
+
+## Export and import form fields
+
+The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported:
+
+* FDF
+* XFDF
+* JSON
+
+For more information, see the [Form fields documentation](./import-export-formfields/export-formfields).
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./formfields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-validation.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-validation.md
new file mode 100644
index 000000000..44724583a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-validation.md
@@ -0,0 +1,257 @@
+---
+layout: post
+title: Form validation in the React PDF Viewer component | Syncfusion
+description: Learn how to enable built-in form field validation and validate missing required fields in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Validate form fields in React PDF Viewer
+
+The PDF Viewer Component can validate form fields during print, download or submit form. Use the [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property to turn on validation and handle the [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/validateformfieldsargs) event to review which required fields are not filled.
+
+When validation is enabled and the user attempts to print, download or submit form, the event fires with a list of non-filled fields in args.nonFillableFields. You can cancel the operation, show a message, or focus the first invalid field.
+
+## Enable validation
+
+Set `enableFormFieldsValidation` to true and wire the validateFormFields event.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,ThumbnailView,
+ Print, TextSelection, Annotation, TextSearch, Inject, FormDesigner, FormFields } from '@syncfusion/ej2-react-pdfviewer';
+let pdfviewer;
+
+function App() {
+ function documentLoaded () {
+ var viewer = document.getElementById('container').ej2_instances[0];
+ viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 146, Y: 229, Width: 150, Height: 24 }});
+ }
+ function validateFormFields(args){
+ var viewer = document.getElementById('container').ej2_instances[0];
+ viewer.nonfilledFormFields = args.nonFillableFields
+ }
+ return (
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Tips
+
+- Use isRequired on individual fields to include them in the validation check.
+- The event only fires when a print or download action is invoked.
+- To perform custom checks (e.g., regex for email), iterate over pdfviewer.retrieveFormFields() and apply your own logic before triggering print or download.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields API](./formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/formfields-api.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/formfields-api.md
new file mode 100644
index 000000000..e10a4c3f5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/formfields-api.md
@@ -0,0 +1,911 @@
+---
+layout: post
+title: Form Fields API in React PDF Viewer | Syncfusion
+description: Learn How to use Form Fields API to enable, update, retrieve and clear in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Fields API in React PDF Viewer
+
+The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:
+
+| API | Description |
+|---|---|
+| [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) | Updates the value for one or more form fields.|
+| [updateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) | Updates the properties of one or more form fields.|
+| [retrieveFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields) | Retrieves all form fields or by specific criteria.|
+| [resetFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#resetformfields) | Resets the specified or all form fields to their default values.|
+| [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) | Imports values and states for form fields from a JSON object or file stream.|
+| [focusFormField](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#focusformfield) | Sets focus to a form field by name or ID.|
+| [exportFormFieldsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) | Exports form fields as a JSON object.|
+| [exportFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) | Exports form fields as a downloadable file.|
+| [clearFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#clearformfields) | Clears values of specified or all form fields without removing them.|
+| [isFormFieldDocument](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformfielddocument) | Indicates whether the loaded document contains form fields.|
+| [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) | Gets whether the Form Designer toolbar is currently visible.|
+| [formFieldCollections](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#formfieldcollections) | Gets the collection of current form fields with their properties.|
+| [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) | Enables or disables form field validation.|
+| [enableFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfields) | Enables or disables interaction with form fields.|
+| [enableFormDesignerToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesignertoolbar) | Shows or hides the Form Designer toolbar.|
+
+## updateFormFieldsValue
+
+Updates the value of one or more form fields programmatically.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const updateFormFieldsValue = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ // Retrieve all form fields (two ways)
+ const fields =
+ viewer.retrieveFormFields?.() ||
+ viewer.formFieldCollection ||
+ [];
+
+ // Find the textbox named "First Name" (fallback to the first field)
+ const field =
+ fields.find(f => f?.name === 'First Name') || fields[0];
+
+ if (field) {
+ // Update value and tooltip, then apply via API
+ field.value = 'John Doe';
+ field.tooltip = 'First';
+ viewer.updateFormFieldsValue(field);
+ } else {
+ console.warn('No form fields available to update.');
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## updateFormFields
+
+Updates form field properties such as bounds, color, font, isReadOnly, required, and more.
+
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const updateFormFields = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ const fields =
+ viewer.retrieveFormFields?.() ||
+ viewer.formFieldCollection ||
+ [];
+
+ const field =
+ fields.find(f => f?.name === 'First Name') || fields[0];
+
+ if (field) {
+ // Use FormDesigner API to update properties
+ viewer.formDesignerModule.updateFormField(field, {
+ value: 'John',
+ fontFamily: 'Courier',
+ fontSize: 12,
+ color: 'black',
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ alignment: 'Left',
+ maxLength: 50
+ });
+ } else {
+ console.warn('No form fields available to update.');
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## retrieveFormFields
+
+Retrieves all form fields and their properties or filters by type/name.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const retrieveFormFields = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ // Either call the API or read the collection directly
+ const fields =
+ viewer.retrieveFormFields?.() ||
+ viewer.formFieldCollection ||
+ [];
+
+ console.log('Form fields:', fields);
+
+ const byName = fields.filter(f => f?.name === 'First Name');
+ const onlyTextboxes = fields.filter(f => f?.type === 'Textbox');
+ console.log('By name:', byName);
+ console.log('Textboxes:', onlyTextboxes);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## resetFormFields
+
+Resets specified form fields or all fields to their default values.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const resetAll = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ // Reset all form fields
+ viewer.resetFormFields();
+ };
+
+ return (
+
+
+
+ {/* Optional helper button */}
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## importFormFields
+
+Imports form field data from an object or file into the current document.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+// Importing the enum from core package is typical for formats
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ // Import from a known source (path/stream depends on your integration)
+ const importFromSource = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ // Example: specify a key that your backend/hosted env resolves, or use your own logic
+ viewer.importFormFields('File', FormFieldDataFormat.Json);
+ };
+
+ // Optional: Import from a local file chosen by user
+ const onFilePicked = async (e) => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ // Pass the File object directly if your integration supports it
+ // (The viewer supports file/stream depending on the environment)
+ viewer.importFormFields(file, FormFieldDataFormat.Json);
+ // Reset the input so picking same file again still triggers change
+ e.target.value = '';
+ };
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/group-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/group-formfields.md
new file mode 100644
index 000000000..b51fa523c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/group-formfields.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Group form fields in the React PDF Viewer component | Syncfusion
+description: Learn how to group PDF form fields in the Syncfusion React PDF Viewer by assigning the same name to multiple widgets.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Group form fields in React PDF Viewer
+
+In PDF forms, multiple widgets can represent the same logical form field. The Syncfusion PDF Viewer supports grouping form fields by assigning the same Name to multiple widgets. Grouped widgets mirror their values and states based on the field type.
+
+Key behavior when fields share the same Name:
+
+- **Textbox and Password**: Text entered in one widget appears in all widgets with the same name.
+- **CheckBox**: Checking one widget checks all widgets with the same name (mirrored state).
+- **RadioButton**: Widgets with the same name are grouped; only one radio button in the group can be selected at a time.
+- **ListBox and DropDown**: The selected item is shared across widgets with the same name.
+- **Signature field and Initial field**: The applied signature/initial is mirrored across widgets with the same name.
+
+N> Grouping is driven solely by the Name property. Bounds determine placement; name determines grouping.
+
+## Group with the user interface
+
+Use the Form Designer toolbar and set the same Name for multiple widgets to group them.
+
+Quick steps:
+
+1. Enable the Form Designer toolbar.
+2. Draw the desired fields (e.g., two Textbox widgets or multiple RadioButton widgets).
+3. Right‑click a field > Properties, and set the same Name on each widget you want to group.
+4. Apply and test: editing one grouped widget reflects in the others.
+
+Textboxes and Password fields (shared value)
+- Give both widgets the same Name to mirror the typed value across them.
+
+
+
+Radio buttons (exclusive choice within a group)
+- Add radio buttons that share the same Name to create one group; only one can be selected at a time.
+
+
+
+## Group programmatically
+
+Assign the same name when adding fields via code. The following example shows:
+
+- Two Textbox widgets named EmployeeId that mirror values.
+- A RadioButton group named Gender with exclusive selection.
+- Two CheckBox widgets named Subscribe that mirror checked state.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef, useCallback } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ const viewerRef = useRef(null);
+
+ const onDocumentLoaded = useCallback(() => {
+ const viewer = viewerRef.current;
+ if (!viewer || !viewer.formDesignerModule) return;
+
+ // Textbox group: same name => mirrored value
+ viewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+ });
+
+ viewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId', // same name groups the two widgets
+ bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+ });
+
+ // Radio button group: same name => exclusive selection across the group
+ viewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ bounds: { X: 148, Y: 289, Width: 18, Height: 18 },
+ isSelected: false
+ });
+
+ viewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender', // grouped with the first
+ bounds: { X: 292, Y: 289, Width: 18, Height: 18 },
+ isSelected: false
+ });
+
+ // CheckBox group: same name => mirrored checked state
+ viewer.formDesignerModule.addFormField('CheckBox', {
+ name: 'Subscribe',
+ bounds: { X: 56, Y: 664, Width: 20, Height: 20 },
+ isChecked: false
+ });
+
+ viewer.formDesignerModule.addFormField('CheckBox', {
+ name: 'Subscribe', // grouped with the first
+ bounds: { X: 242, Y: 664, Width: 20, Height: 20 },
+ isChecked: false
+ });
+ }, []);
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+N> To configure the server-backed PDF Viewer, add the following serviceUrl in the index.js file by setting the serviceUrl property on PdfViewerComponent:
+`serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/"`
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
+- [Form fields API](./formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/export-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/export-formfields.md
new file mode 100644
index 000000000..21b979cb7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/export-formfields.md
@@ -0,0 +1,211 @@
+---
+layout: post
+title: Export form data in the React PDF Viewer component | Syncfusion
+description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Export form data from PDF in React
+
+The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats:
+
+- [FDF](#export-as-fdf)
+- [XFDF](#export-as-xfdf)
+- [JSON](#export-as-json)
+
+## Export as FDF
+
+Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
+
+* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
+* The second parameter should be the format type of the form data.
+
+The following example exports and imports form field data as FDF.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = useRef(null);
+
+ const onExportFdf = () => {
+ // Data must be the desired path or file name for the exported document.
+ viewerRef.current?.exportFormFields('ExportedData', FormFieldDataFormat.Fdf);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Export as XFDF
+
+The following example exports form field data as XFDF.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = useRef(null);
+
+ const onExportXfdf = () => {
+ // Data must be the desired path or file name for the exported document.
+ viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Export as JSON
+
+The following example exports form field data as JSON.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = useRef(null);
+
+ const onExportJson = () => {
+ // Data must be the desired path or file name for the exported document.
+ viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Export as Object
+
+Export the form data to a JavaScript object for custom persistence (database, API, or client storage).
+The following example exports and imports form field data as Object.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = useRef(null);
+
+ const onExportObject = async () => {
+ const data = await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Fdf);
+ // Save or send to server
+ console.log('Exported object:', data);
+
+ // Alternative formats:
+ // await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf);
+ // await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Json);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Common use cases
+
+- Persist user-entered data to your server without modifying the original PDF.
+- Export as JSON for easy integration with REST APIs.
+- Export as FDF/XFDF for interoperability with other PDF tools.
+- Export as object to combine with your app state and store securely.
+- Automate exports after [validation](../form-validation) using validateFormFields.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-formfields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
+- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-export-events.md
new file mode 100644
index 000000000..ec63401cf
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-export-events.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: Import/Export events in the React PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import/Export events in React
+
+Import/Export events let you track and customize the full lifecycle of form field data flowing into and out of the PDF Viewer.
+
+Use them to validate inputs, show progress UI, log audit trails, or block operations based on your business rules. Each event exposes typed event-args (ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, ExportFailureEventArgs) describing the operation context.
+
+Use these events to monitor and customize form field import/export operations.
+
+## Import events
+- [importStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts.
+- [importSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importsuccess): Triggers when form fields are successfully imported.
+- [importFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing form fields fails.
+
+## Handle import events
+```js
+viewer.importStart = (args: any) => {
+ console.log('Import started', args);
+};
+viewer.importSuccess = (args: any) => {
+ console.log('Import success', args);
+};
+viewer.importFailed = (args: any) => {
+ console.error('Import failed', args);
+};
+```
+
+## Export events
+- [exportStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts.
+- [exportSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportsuccess ): Triggers when form fields are successfully exported.
+- [exportFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting form fields fails.
+
+## Handle export events
+```js
+viewer.exportStart = (args: any) => {
+ console.log('Export started', args);
+};
+viewer.exportSuccess = (args: any) => {
+ console.log('Export success', args);
+};
+viewer.exportFailed = (args: any) => {
+ console.error('Export failed', args);
+};
+```
+
+Notes:
+- importStart/importSuccess/importFailed cover the lifecycle of form field imports.
+- exportStart/exportSuccess/exportFailed cover the lifecycle of form field exports.
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-formfields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
+- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-formfields.md
new file mode 100644
index 000000000..9bc4d7c71
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-formfields.md
@@ -0,0 +1,272 @@
+---
+layout: post
+title: Import form data in the React PDF Viewer component | Syncfusion
+description: Learn how to import PDF form field data (FDF, XFDF, JSON, and from an object) using the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import form data into PDF in React
+
+The PDF Viewer provides APIs to import interactive form field values into the currently loaded PDF. You can import from the following formats:
+
+- [FDF](#import-as-fdf)
+- [XFDF](#import-as-xfdf)
+- [JSON](#import-as-json)
+
+Supported API:
+- importFormFields(sourceOrObject, format)
+
+Note: When using the server-backed viewer, set serviceUrl before importing.
+
+## Import as FDF
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Annotation,
+ LinkAnnotation,
+ ThumbnailView,
+ BookmarkView,
+ TextSelection,
+ FormFields,
+ FormDesigner,
+ Inject,
+ FormFieldDataFormat
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = useRef(null);
+
+ const importFdf = () => {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ viewerRef.current?.importFormFields('File', FormFieldDataFormat.Fdf);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Import as XFDF
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Annotation,
+ LinkAnnotation,
+ ThumbnailView,
+ BookmarkView,
+ TextSelection,
+ FormFields,
+ FormDesigner,
+ Inject,
+ FormFieldDataFormat
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = useRef(null);
+
+ const importXfdf = () => {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ viewerRef.current?.importFormFields('File', FormFieldDataFormat.Xfdf);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Import as JSON
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import React, { useRef } from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Annotation,
+ LinkAnnotation,
+ ThumbnailView,
+ BookmarkView,
+ TextSelection,
+ FormFields,
+ FormDesigner,
+ Inject,
+ FormFieldDataFormat
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = useRef(null);
+
+ const importJson = () => {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ viewerRef.current?.importFormFields('File', FormFieldDataFormat.Json);
+ };
+
+ return (
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Common use cases
+
+- Pre-fill application forms from your database using JSON.
+- Migrate data from other PDF tools using FDF/XFDF.
+- Restore user progress stored locally or on the server using object import.
+- Combine with [validation](../form-validation) to block print/download until required fields are filled.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Export form fields](./export-formfields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
+- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/overview.md
new file mode 100644
index 000000000..7e58727ba
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/overview.md
@@ -0,0 +1,130 @@
+---
+layout: post
+title: Overview of Forms in React PDF Viewer Control | Syncfusion
+description: Learn what the Form Designer in Syncfusion React PDF Viewer offers, supported field types, and how the topics are organized.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Overview of Forms in React PDF Viewer
+
+Syncfusion React PDF Viewer provides a complete forms experience. Design new forms or enhance existing PDFs, fill and validate fields, import or export data, and capture signatures — all via an intuitive UI and rich APIs.
+
+Check the following video to learn how to work with form Designer in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
+
+## Form Fields
+
+Work with the runtime form fields present in a PDF Form.
+- Render existing fields
+- [Fill fields](./form-filling).
+- [Import/Export](./import-export-formfields/export-formfields) form data as JSON, XFDF, FDF, or as a plain object
+- Inject [FormFields](./form-designer) to enable form-filling features.
+
+Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export function App() {
+ return (
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+
+
+
+
+## Form Designer
+
+Create and customize interactive fields directly on the PDF page.
+- [Add fields](../form-designer/Create-edit-Style-del-formFields/create-formfields): textbox, checkbox, radio button, dropdown, list box, signature, and initials
+- [Edit quickly](../form-designer/Create-edit-Style-del-formFields/edit-formfields): move, resize, align, distribute, copy/paste, undo/redo
+- [Configure properties](../form-designer/Create-edit-Style-del-formFields/style-formfields): name, value, font, color, border, alignment, required/read-only/visibility, tab order
+- [Control interaction](../form-designer/form-constrain): toggle read-only, show/hide, and manage printing behavior
+- [Manage fields](../form-designer/group-formfields): select, group/ungroup, reorder, or delete
+- [Save and print](../download): persist designed fields in the PDF and print with appearances
+- [Tailor the UI](./form-designer#how-to-customize-the-form-designer-toolbar): show/hide or customize the Form Designer toolbar; handle events for add/edit/select/move/resize
+
+Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export function App() {
+ return (
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+
+
+
+## Supported form field types
+
+- [Textbox](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-textbox)
+- [Password](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-password)
+- [CheckBox](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-checkbox)
+- [RadioButton](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-radiobutton)
+- [ListBox](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-listbox)
+- [DropDown](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-dropdown)
+- [Signature field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-signature-field)
+- [Initial field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-initial-field)
+
+## Typical workflows
+
+- **Design** → Save → Fill: [create or modify fields](./Create-edit-Style-del-formFields/create-formfields), save them into the PDF, then fill and validate
+- **Fill** → [Export/Import](./import-export-formfields/export-formfields): complete forms and export data to JSON/XFDF/FDF, or import data to fill
+- **Customize** → Integrate: wire up events and business rules; tailor the designer [toolbar](./form-designer#how-to-customize-the-form-designer-toolbar) for your app
+
+## See also
+
+- [Form filling](./form-filling)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Style form fields](./Create-edit-Style-del-formFields/style-formfields)
+- [Group form fields](./group-formfields)
+- [Form constraints](./form-constrain)
+- [Form validation](./form-validation)
+- [Form Fields API](./formfields-api)
+- [Custom data on form fields](./custom-data)
+- [Import form data](./import-export-formfields/import-formfields)
+- [Export form data](./import-export-formfields/export-formfields)
+- [Import/Export events](./import-export-formfields/import-export-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/FormDesigner.gif b/Document-Processing/PDF/PDF-Viewer/react/images/FormDesigner.gif
new file mode 100644
index 000000000..317055993
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/FormDesigner.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/FormDesigner.png b/Document-Processing/PDF/PDF-Viewer/react/images/FormDesigner.png
new file mode 100644
index 000000000..70ac22677
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/FormDesigner.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/FormFields.gif b/Document-Processing/PDF/PDF-Viewer/react/images/FormFields.gif
new file mode 100644
index 000000000..39f0f46e9
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/FormFields.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/FormFill.png b/Document-Processing/PDF/PDF-Viewer/react/images/FormFill.png
new file mode 100644
index 000000000..e28aacb85
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/FormFill.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/ui-form-constraint.png b/Document-Processing/PDF/PDF-Viewer/react/images/ui-form-constraint.png
new file mode 100644
index 000000000..53e4169bb
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/ui-form-constraint.png differ