Create checkbox field and checkbox widget annotation using JavaScript

To create a new checkbox field with required edit flags and a checkbox widget annotation.

WebViewer(...)
.then(instance => {
  const { annotationManager, Annotations } = instance.Core;

  // myBtn is your own custom button
  document.getElementById('myBtn').addEventListener('click', () => {

    // set flags for required and edit
    const flags = new Annotations.WidgetFlags();
    flags.set('Required', true);
    flags.set('Edit', true);

    // set font type
    const font = new Annotations.Font({ name: 'Helvetica' });

    // create a form field
    const field = new Annotations.Forms.Field("some checkbox field name", {
      type: 'Btn',
      value: 'Off',
      flags,
      font: font,
    });

    // create a widget annotation
    // caption options are:
    // "4" = Tick
    // "l" = Circle
    // "8" = Cross
    // "u" = Diamond
    // "n" = Square
    // "H" = Star
    // ""  = Check
    const widgetAnnot = new Annotations.CheckButtonWidgetAnnotation(field, {
      appearance: 'Off',
      appearances: {
        Off: {},
        Yes: {},
      },
      captions: {
        Normal: "" // Check
      }
    });

    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 50;
    widgetAnnot.Height = 20;

    //add the form field and widget annotation
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(widgetAnnot);
    annotationManager.drawAnnotationsFromList([widgetAnnot]);
  });
});

Create fillable PDF forms
Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.

Available widget flags are:

• ReadOnly
• Required
• NoExport
• Multiline
• Password
• NoToggleToOff
• Radio
• PushButton
• Combo
• Edit
• DoNotScroll
• RadiosInUnison