Create Radio Button Fields

Radio button fields and widget annotations can be added programmatically. There are several properties and widget flags as highlighted below:

Radio button widget flags

Widget flag	Description	Unique to radio?
READ_ONLY	The field value cannot be changed.	No
REQUIRED	The field must have a value when exported.	No
RADIO	This must be true otherwise it is a checkbox.	No
NO_TOGGLE_TO_OFF	If true only one radio button can be selected.	Yes

Radio button sample code

JavaScript (SDK v8.0+)

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

  documentViewer.addEventListener('documentLoaded', () => {
    // Sets flags for the combobox widget.
    const flags = new WidgetFlags();
    flags.set(WidgetFlags.RADIO, true);
    flags.set(WidgetFlags.NO_TOGGLE_TO_OFF, true);
    flags.set(WidgetFlags.REQUIRED, true);

    // Creates a radio button group form field.
    const field = new Annotations.Forms.Field('RadioButtonGroupName 1', {
      type: 'Btn',
      value: 'Off',
      flags
    });

    // Create a radio widget button.
    const radioButton1 = new Annotations.RadioButtonWidgetAnnotation(field, {
      appearance: 'Off',
      appearances: {
        Off: {},
        First: {},
      },
    });

    // Create another radio button widget.
    const radioButton2 = new Annotations.RadioButtonWidgetAnnotation(field, {
      appearance: 'Off',
      appearances: {
        Off: {},
        Second: {},
      },
    });

    radioButton1.PageNumber = 1;
    radioButton1.X = 100;
    radioButton1.Y = 100;
    radioButton1.Width = 25;
    radioButton1.Height = 25;

    radioButton2.PageNumber = 1;
    radioButton2.X = 150;
    radioButton2.Y = 150;
    radioButton2.Width = 25;
    radioButton2.Height = 25;

    // Add form field to field manager and widget annotation to annotation manager.
    annotationManager.getFieldManager().addField(field);
    annotationManager.addAnnotation(radioButton1);
    annotationManager.addAnnotation(radioButton2);
    annotationManager.drawAnnotationsFromList([radioButton1, radioButton2]);
  });
});

Annotations.WidgetFlags Annotations.Forms.Field Annotations.RadioButtonWidgetAnnotation Annotations.WidgetAnnotation AnnotationManager.addAnnotation AnnotationManager.drawAnnotationsFromList AnnotationManager.getFieldManager FieldManager.addField

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('documentLoaded', () => {
      // create field and widget annotations here
    });
  });

DocumentViewer#documentLoaded

Learn More

Annotations and fields should be added to the document only after the document has finished loading. See Create New Form Fields Overview for more.