Some test text!

Search
Hamburger Icon

Web / Guides

Create radio field and radio widget annotation using JavaScript

To create a new radio field with radio flag and two radio widget annotations.

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

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

    // set flags for radio and no toggle to off
    const widgetFlags = new WidgetFlags();
    widgetFlags.set(WidgetFlags.RADIO, true);

    // optional to keep at least one state active
    widgetFlags.set(WidgetFlags.NO_TOGGLE_TO_OFF, true); 

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

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

    // create a widget annotation for the first button
    const widgetAnnot1 = new Annotations.RadioButtonWidgetAnnotation(field, {
      appearance: 'Off',
      appearances: {
        Off: {},
        First: {},
      },
    });

    // create a widget annotation for the second button
    const widgetAnnot2 = new Annotations.RadioButtonWidgetAnnotation(field, {
      appearance: 'Off',
      appearances: {
        Off: {},
        Second: {},
      },
    });

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

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

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

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: Chat with us