ComPDF
Contact Sales
Docs OverviewDemoDownloadFAQChangelog
Guides

Create Form Fields ​

ComPDF React Native SDK supports two ways to create form fields: by entering form creation mode via CPDFReaderView for interactive creation, or by using the CPDFDocument API to create form fields programmatically.

Interactive Creation ​

Through CPDFReaderView, users can enter form mode and add form fields via touch interactions.

tsx
const pdfReaderRef = useRef<CPDFReaderView>(null);

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({})}
/>

await pdfReaderRef.current?.setFormCreationMode(CPDFWidgetType.TEXT_FIELD);

Exit Creation Mode ​

tsx
await pdfReaderRef.current?.exitFormCreationMode();

Supported Form Field Types ​

Type
CPDFWidgetType.TEXT_FIELD
CPDFWidgetType.CHECKBOX
CPDFWidgetType.RADIO_BUTTON
CPDFWidgetType.LISTBOX
CPDFWidgetType.COMBOBOX
CPDFWidgetType.SIGNATURES_FIELDS
CPDFWidgetType.PUSH_BUTTON

Programmatic Creation ​

Create form fields programmatically using the CPDFDocument API. The following examples demonstrate how to create various types of forms:

Note: The rect parameter defines the position and size of the form field on the page, with the coordinate system origin located at the bottom-left corner of the page.

  • Create Text Field ​

tsx
const textField = new CPDFTextWidget({
  title: CPDFWidgetUtil.createFieldName("TextField"),
  page: 0,
  rect: { left: 40, top: 799, right: 320, bottom: 701 },
  createDate: new Date(1735696800000),
  text: "This is Text Fields",
  isMultiline: true,
  fillColor: "#BEBEBE",
  borderColor: "#8BC34A",
  borderWidth: 5,
  fontColor: "#000000",
  fontSize: 14,
  familyName: "Times",
  styleName: "Bold",
  alignment: "right",
});
await pdfReaderRef.current?._pdfDocument.addWidgets([textField]);

  • Create Checkbox ​

tsx
const checkBox = new CPDFCheckboxWidget({
  title: CPDFWidgetUtil.createFieldName("Checkbox"),
  page: 0,
  rect: { left: 361, top: 778, right: 442, bottom: 704 },
  isChecked: true,
  checkStyle: CPDFCheckStyle.CIRCLE,
  checkColor: "#3CE930",
  fillColor: "#e0e0e0",
  borderColor: "#000000",
  borderWidth: 5,
});
await pdfReaderRef.current?._pdfDocument.addWidgets([checkBox]);

  • Create Radio Button ​

tsx
const radioButtonWidget = new CPDFRadiobuttonWidget({
  title: CPDFWidgetUtil.createFieldName("Radiobutton"),
  page: 0,
  rect: { left: 479, top: 789, right: 549, bottom: 715 },
  isChecked: true,
  checkStyle: CPDFCheckStyle.CROSS,
  checkColor: "#FF0000",
  fillColor: "#00FF00",
  borderColor: "#000000",
  borderWidth: 5,
});
await pdfReaderRef.current?._pdfDocument.addWidgets([radioButtonWidget]);

  • Create List Box ​

tsx
const listBoxWidget = new CPDFListboxWidget({
  title: CPDFWidgetUtil.createFieldName("Listbox"),
  page: 0,
  rect: { left: 53, top: 294, right: 294, bottom: 191 },
  selectItemAtIndex: 0,
  options: [
    { text: "options-1", value: "options-1" },
    { text: "options-2", value: "options-2" },
  ],
  familyName: "Times",
  styleName: "Bold",
  fillColor: "#FFFF00",
  borderColor: "#FF0000",
  borderWidth: 3,
})
await pdfReaderRef.current?._pdfDocument.addWidgets([listBoxWidget]);

When creating a list box using CPDFReaderView, an options list dialog will automatically pop up by default for immediately adding options. ComPDF React Native SDK provides a configuration option to disable this dialog, as shown below:

tsx
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    formsConfig: {
      showCreateListBoxOptionsDialog: false
    }
  })}
  />

You can also listen to the form creation completion event via pdfReaderRef.current?.addEventListener(CPDFEvent.FORM_FIELDS_CREATED, (event) {}) to display a custom options list dialog for editing. For details, please refer to Form Event Notifications.

  • Create Combo Box ​

tsx
const comboBoxWidget = new CPDFComboboxWidget({
  title: CPDFWidgetUtil.createFieldName("Combobox"),
  page: 0,
  rect: { left: 354, top: 288, right: 557, bottom: 170 },
  selectItemAtIndex: 1,
  options: [
    { text: "options-1", value: "options-1" },
    { text: "options-2", value: "options-2" },
  ],
  familyName: "Times",
  styleName: "Bold",
  fillColor: "#FFFF00",
  borderColor: "#FF0000",
  borderWidth: 3,
});
await pdfReaderRef.current?._pdfDocument.addWidget([comboBoxWidget]);

When creating a combo box using CPDFReaderView, an options list dialog will automatically pop up by default for immediately adding options. ComPDF React Native SDK provides a configuration option to disable this dialog, as shown below:

tsx
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    formsConfig: {
      showCreateComboBoxOptionsDialog: false
    }
  })}
  />

You can also listen to the form creation completion event via controller.addEventListener(CPDFEvent.FORM_FIELDS_CREATED, (event) {}) to display a custom options list dialog for editing. For details, please refer to Form Event Notifications.

  • Create Signature Field ​

tsx
const signatureWidget = new CPDFSignatureWidget({
  title: CPDFWidgetUtil.createFieldName("Signature"),
  page: 0,
  rect: { left: 64, top: 649, right: 319, bottom: 527 },
  fillColor: "#E0e0e0",
  borderColor: "#FF0000",
  borderWidth: 5,
});
await pdfReaderRef.current?._pdfDocument.addWidgets([signatureWidget]);

  • Create Button ​

Buttons can be configured with different action types, such as navigating to a webpage or jumping to a page.

tsx
// Web navigation button
const urlButtonWidget = new CPDFPushbuttonWidget({
  title: CPDFWidgetUtil.createFieldName("Pushbutton"),
  page: 0,
  rect: { left: 365, top: 503, right: 501, bottom: 413 },
  fillColor: "#e0e0e0",
  borderColor: "#ff0000",
  borderWidth: 5,
  fontSize: 14,
  buttonTitle: "To Web",
  action: CPDFUriAction.createWeb("https://www.compdf.com"),
});

// Page jump button
const gotoButtonWidget = new CPDFPushbuttonWidget({
  title: CPDFWidgetUtil.createFieldName("Pushbutton"),
  page: 0,
  rect: { left: 366, top: 632, right: 520, bottom: 541 },
  fillColor: "#e0e0e0",
  borderColor: "#ff0000",
  borderWidth: 5,
  fontSize: 14,
  buttonTitle: "Jump Page 2",
  action: CPDFGoToAction.toPage(1),
});

await pdfReaderRef.current?._pdfDocument.addWidgets([urlButtonWidget, gotoButtonWidget]);

When creating a button using CPDFReaderView, an options editing dialog will automatically pop up by default for immediately setting button events. ComPDF React Native SDK provides a configuration option to disable this dialog, as shown below:

tsx
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    formsConfig: {
      showCreatePushButtonOptionsDialog: false
    }
  })}
  />

You can also listen to the form creation completion event via controller.addEventListener(CPDFEvent.FORM_FIELDS_CREATED, (event) {}) to display a custom event editing dialog for editing operations. For details, please refer to Form Event Notifications.