Create Form Fields in Vue PDF Viewer

22 Oct 202624 minutes to read

You can create or add new form fields either visually using the Form Designer UI or dynamically using APIs.

Create Form Fields Using the Form Designer UI

Use this approach when you want to design forms manually without writing code.

Before you begin, ensure the FormDesigner module is included in the provide block of the PDF Viewer component.

Steps:

  1. Enable Form Designer mode in the PDF Viewer.
  2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
  3. Click on the PDF page to place the form field.
  4. Move or resize the field as required.
  5. Configure field properties using the Properties panel.

Adding a form field using the Form Designer UI

Add Form Fields Programmatically (API)

Use this approach when you want to generate form fields dynamically based on data or application logic.

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Text Box using addFormField
      pdfviewer.formDesignerModule.addFormField('Textbox', {
        name: 'First Name',
        bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
        pageNumber: 1,
        isRequired: true,
        tooltip: 'Enter your first name'
      });
    },
  },
};
</script>

Use programmatic creation when:

  • Building dynamic forms
  • Pre-filling forms from databases
  • Automating form creation workflows

PDF Form Field Types and How to Add Them

Each field can be added via the Form Designer or programmatically.

Textbox

Add via Toolbar (UI)

  • Open Form Designer → select Textbox → click on the page → configure in Properties.
    Textbox properties panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Text Box using addFormField
      pdfviewer.formDesignerModule.addFormField('Textbox', {
        name: 'FirstName',
        pageNumber: 1,
        bounds: { X: 100, Y: 150, Width: 200, Height: 24 },
        isRequired: true,
        tooltip: 'Enter your first name',
        maxLength: 40
      });
    },
  },
};
</script>

Password

Add via Toolbar (UI)

  • Select Password → place it → configure tooltip, required, max length.
    Password Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Password Field
      pdfviewer.formDesignerModule.addFormField('Password', {
        name: 'AccountPassword',
        pageNumber: 1,
        bounds: { X: 100, Y: 190, Width: 200, Height: 24 },
        isRequired: true,
        maxLength: 32,
        tooltip: 'Enter a secure password',
      });
    },
  },
};
</script>

CheckBox

Add via Toolbar (UI)

  • Select CheckBox → click to place → duplicate for options → set isChecked, tooltip, appearance.
    CheckBox Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add CheckBox Field
      pdfviewer.formDesignerModule.addFormField('CheckBox', {
        name: 'AgreeTerms',
        pageNumber: 1,
        bounds: { X: 100, Y: 230, Width: 18, Height: 18 },
        isChecked: false,
        tooltip: 'I agree to the terms',
      });
    },
  },
};
</script>

RadioButton

Add via Toolbar (UI)

  • Select RadioButton → place buttons with the same Name to group → configure selection/colors.
    Radio Button Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Radio Buttons
      pdfviewer.formDesignerModule.addFormField('RadioButton', {
        name: 'Gender',
        value: 'Male',
        pageNumber: 1,
        bounds: { X: 100, Y: 270, Width: 16, Height: 16 }
      });
      pdfviewer.formDesignerModule.addFormField('RadioButton', {
        name: 'Gender',
        value: 'Female',
        pageNumber: 1,
        bounds: { X: 160, Y: 270, Width: 16, Height: 16 }
      });
    },
  },
};
</script>

ListBox

Add via Toolbar (UI)

  • Select ListBox → place → add items in Properties.
    ListBox Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const option = [
        { itemName: 'Item 1', itemValue: 'item1' },
        { itemName: 'Item 2', itemValue: 'item2' },
        { itemName: 'Item 3', itemValue: 'item3' }
      ];
      pdfviewer.formDesignerModule.addFormField('ListBox', {
        name: 'States',
        pageNumber: 1,
        bounds: { X: 100, Y: 310, Width: 220, Height: 70 },
        options: option,
      });
    },
  },
};
</script>

Add via Toolbar (UI)

  • Select DropDown → place → add items → set default value.
    DropDown Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      const options = [
        { itemName: 'Item 1', itemValue: 'item1' },
        { itemName: 'Item 2', itemValue: 'item2' },
        { itemName: 'Item 3', itemValue: 'item3' },
      ];
      pdfviewer.formDesignerModule.addFormField('DropDown', {
        name: 'Country',
        options,
        bounds: { X: 560, Y: 320, Width: 150, Height: 24 },
      });
    },
  },
};
</script>

Signature Field

Add via Toolbar (UI)

  • Select Signature Field → place where signing is required → configure indicator text, thickness, tooltip, required.
    Signature Field

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Signature Field
      pdfviewer.formDesignerModule.addFormField('SignatureField', {
        name: 'Sign',
        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
        tooltip: 'sign Here',
        isRequired: true,
      });
    },
  },
};
</script>

Initial Field

Add via Toolbar (UI)

  • Select Initial Field → place where initials are needed → configure text and required state.
    Initial field Properties Panel

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Initial Field
      pdfviewer.formDesignerModule.addFormField('InitialField', {
        name: 'Sign',
        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
        tooltip: 'sign Here',
        isRequired: true,
      });
    },
  },
};
</script>

DateTime Picker

Add via Toolbar (UI)

  • Open the Form Designer toolbar, select DateTime Picker, and click on a PDF page to place the field. The DateTime Picker tool adds date and time fields in Form Designer mode.
    DateTime Picker tool and date and time fields in Form Designer
  • Select the field to configure its general properties, such as its name, value, visibility, and whether it is read-only or required.
    General properties for a DateTime Picker field

Manual Entry and Picker
The field accepts values either by direct typing or through the integrated picker UI:

  • Date Field – Enter a date manually, or open the calendar dropdown to pick a date.

    Calendar picker open for a DateTime field

  • Time Field – Enter a time manually, or open the time dropdown to pick a time.

    Time picker open for a DateTime field

Strict Format Validation
Invalid values are rejected and a validation popup is displayed. The invalid value is not applied to the field.

For example, with the format m/d/yy:

Input Result
10/19/2026 Accepted
19/10/26 Rejected
not-a-date Rejected

Date / Time Toggle and Format Editing
The Format tab in the Properties panel lets you:

  • Switch between Date Picker and Time Picker modes.
  • Edit the display format string.
  • Preview formatting changes before saving.
    DateTime Picker format settings with type, format, and preview

Common Formats

Format String Example Output
m/d/yy 10/19/26
mm/dd/yyyy 10/19/2026
HH:MM 14:30
HH:MM:ss 14:30:45

Form Designer Appearance
Placed DateTime pickers have a distinct visual appearance in Form Designer mode, including:

  • Colored background
  • Visible border
  • Field-type indicator
    DateTime Picker Appearance

Add Programmatically (API)

<template>
  <div>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // Add Date field
      pdfviewer.formDesignerModule.addFormField('Textbox', {
        name: 'DateField1',
        bounds: { X: 146, Y: 200, Width: 200, Height: 24 },
        pageNumber: 1,
        isDateField: true,
        fontSize: 10,
        color: 'black',
        fontFamily: 'Helvetica',
        backgroundColor: '#daeaf7ff',
        borderColor: '#303030',
        alignment: 'Left',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: '',
        thickness: 1,
        actions: {
          format: { script: 'AFDate_FormatEx("m/d/yy")' }
        }
      });
      // Add Time field
      pdfviewer.formDesignerModule.addFormField('Textbox', {
        name: 'TimeField1',
        bounds: { X: 146, Y: 250, Width: 200, Height: 24 },
        pageNumber: 1,
        isDateField: true,
        fontSize: 10,
        color: 'black',
        fontFamily: 'Helvetica',
        backgroundColor: '#daeaf7ff',
        borderColor: '#303030',
        alignment: 'Left',
        isReadOnly: false,
        visibility: 'visible',
        isRequired: false,
        isPrint: true,
        tooltip: '',
        thickness: 1,
        actions: {
          format: { script: 'AFTime_FormatEx("HH:MM")' }
        }
      });
    },
  },
};
</script>

Add Fields Dynamically with setFormFieldMode

Use setFormFieldMode() to add fields on the fly based on user actions.

Edit Form Fields in TypeScript PDF Viewer

You can edit form fields using the UI or API.

Edit Using the UI

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

Edit Programmatically

<template>
  <div>
    <button @click="editTextbox">EditTextBox</button>
    <button @click="addPasswordField">Add Form Field</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  methods: {
    editTextbox() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      // 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 => f.name === 'First Name') || fields[0];
      if (field) {
        // Update textbox field styling and value
        pdfviewer.formDesignerModule.updateFormField(field, {
          value: 'John',
          fontFamily: 'Courier',
          fontSize: 12,
          fontStyle: 'None',
          color: 'black',
          backgroundColor: 'white',
          borderColor: 'black',
          thickness: 2,
          alignment: 'Left',
          maxLength: 50
        });
      }
    },
    addPasswordField() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
      if (pdfviewer) {
        pdfviewer.formDesignerModule.setFormFieldMode('Password');
      }
    }
  },
};
</script>

View Sample on GitHub

See Also