Syncfusion AI Assistant

How can I help you?

Modify PDF form field properties

16 Feb 202611 minutes to read

Form fields can be modified using the UI or API.

Modify PDF form field properties using the UI

Right-click a field → Properties to update settings.
Drag to move; use handles to resize.
Use the toolbar to toggle field mode or add new fields.

Modify PDF form field properties programmatically

Use updateFormField() to change behavior/data (including position and size):

<button id="modifyTextbox">Apply Textbox Changes</button>

(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
  // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is First Name)
  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
  if (field) {
    // Update textbox field styling and value
    pdfviewer.formDesignerModule.updateFormField(field, {
      value: 'John',
      fontFamily: 'Courier',
      fontSize: 12,
      fontStyle: FontStyle.None,
      color: 'black',
      backgroundColor: 'white',
      borderColor: 'black',
      thickness: 2,
      alignment: 'Left',
      maxLength: 50
    } as TextFieldSettings);
  }
});

Modify PDF form field properties by field type

Textbox

UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
API: updateFormField() for value, typography, alignment, colors, borders.

<button id="modifyTextbox">Apply Textbox Changes</button>

(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
  // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is First Name)
  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
  if (field) {
    // Update textbox field styling and value
    pdfviewer.formDesignerModule.updateFormField(field, {
      value: 'John',
      fontFamily: 'Courier',
      fontSize: 12,
      fontStyle: FontStyle.None,
      color: 'black',
      backgroundColor: 'white',
      borderColor: 'black',
      thickness: 2,
      alignment: 'Left',
      maxLength: 50
    } as TextFieldSettings);
  }
});

Password

UI: Tooltip, required, max length, font, appearance.

API: updateFormField() for tooltip, validation flags, typography, colors, alignment, borders.

 <button id="modifyPasswordBox">Edit PasswordBox</button>

(document.getElementById('modifyPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the password field by name (Here field name is Password)
const field = fields.find((f: any) => f.name === 'Password');
if (field) {
  // Update password field properties
  pdfviewer.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
  } as PasswordFieldSettings);
}
});

CheckBox

UI: Toggle checked state.

API: updateFormField() for isChecked, tooltip, colors, borders.

<button id="modifyCheckbox">Modify CheckBox</button>

(document.getElementById('modifyCheckbox') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the checkbox field by name (Here field name is Subscribe)
const cb = fields.find((f: any) => f.name === 'Subscribe');
if (cb) {
  // Update checkbox field properties and state
  pdfviewer.formDesignerModule.updateFormField(cb, {
    isChecked: true,
    backgroundColor: 'white',
    borderColor: 'black',
    thickness: 2,
    tooltip: 'Subscribe to newsletter'
  } as CheckBoxFieldSettings);
}
});

RadioButton

UI: Set selected item in a group (same Name).

API: updateFormField() to set selected value and border appearance.

<button id="editRadio">Modify RadioButton</button>

(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Filter the radio button group by name (Here group name is Gender)
const genderRadios = fields.filter((f: any) => f.name === 'Gender');
if (genderRadios[1]) {
  // Update radio button selection and appearance
  pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings);
  pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings);
}
});

ListBox

UI: Add/remove items, set selection, adjust fonts/colors.
API: updateFormField() for items, selection, borders.
```
<button id="editListBox">Edit ListBox</button>
```
```ts
(document.getElementById(‘editListBox’) as HTMLButtonElement)?.addEventListener(
‘click’,
() => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the listbox field by name (Here field name is States)
const lb = fields.find((f: any) => f.name === ‘States’);
if (lb) {
// Update listbox options, selection, and appearance
let option = [
{ itemName: ‘Alabama’, itemValue: ‘AL’ },
{ itemName: ‘Alaska’, itemValue: ‘AK’ },
{ itemName: ‘Arizona’, itemValue: ‘AZ’ },
];
pdfviewer.formDesignerModule.updateFormField(lb, {
fontFamily: ‘Courier’,
fontSize: 5,
color: ‘black’,
backgroundColor: ‘white’,
tooltip: ‘listbox’,
options: option,
} as ListBoxFieldSettings);
}
});


### DropDown
- UI: Add/remove items, default value, appearance.
![DropDown edited from UI](../../images/ui-dropdown-edit.png)
- API: [`updateFormField()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
```html
<button id="editDropDown">Edit DropDown</button>

(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => {
  // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the dropdown field by name (Here field name is Country)
  const dd = fields.find((f: any) => f.name === 'Country');
  if (dd) {
    // Update dropdown items, value, and appearance
    pdfviewer.formDesignerModule.updateFormField(dd, {
      options: [
        { itemName: 'USA', itemValue: 'US' },
        { itemName: 'Canada', itemValue: 'CA' },
        { itemName: 'Mexico', itemValue: 'MX' }
      ],
      value: 'US',
      fontFamily: 'Courier',
      fontSize: 10,
      color: 'black',
      borderColor: 'black',
      backgroundColor: 'white'
    } as DropdownFieldSettings);
  }
});

Signature Field

UI: Tooltip, thickness, indicator text, required/visibility.

API: updateFormField() for tooltip, required, colors, borders.

<button id="editSignature">Edit Signature</button>

(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => {
// Retrieve form fields collection
const fields = pdfviewer.retrieveFormFields();
// Find the signature field by name (Here field name is Sign)
const sig = fields.find((f: any) => f.name === 'Sign');
if (sig) {
  // Update signature field properties
  pdfviewer.formDesignerModule.updateFormField(sig, {
    tooltip: 'Please sign here',
    thickness: 3,
    isRequired: true,
    isPrint: true,
    backgroundColor: 'white',
    borderColor: 'black'
  } as SignatureFieldSettings);
}
});

Initial Field

UI: Tooltip, indicator text, thickness, required/visibility.