Some test text!

menu

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 { annotManager, Annotations } = instance;

  // 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 signature field name", {
      type: 'Btn',
      value: 'Off',
      flags,
      font: font,
    });

    // create a widget annotation
    const widgetAnnot = new Annotations.CheckButtonWidgetAnnotation(field, {
      appearance: 'Off',
      appearances: {
        Off: {},
        Yes: {},
      },
    });

    // 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
    annotManager.addAnnotation(widgetAnnot);
    annotManager.drawAnnotationsFromList([widgetAnnot]);
    annotManager.getFieldManager().addField(field);
  });
});

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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close