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

1WebViewer(...)
2.then(instance => {
3 const { annotationManager, Annotations, documentViewer } = instance.Core;
4 const { WidgetFlags } = Annotations;
5
6 documentViewer.addEventListener('documentLoaded', () => {
7 // Sets flags for the combobox widget.
8 const flags = new WidgetFlags();
9 flags.set(WidgetFlags.RADIO, true);
10 flags.set(WidgetFlags.NO_TOGGLE_TO_OFF, true);
11 flags.set(WidgetFlags.REQUIRED, true);
12
13 // Creates a radio button group form field.
14 const field = new Annotations.Forms.Field('RadioButtonGroupName 1', {
15 type: 'Btn',
16 value: 'Off',
17 flags
18 });
19
20 // Create a radio widget button.
21 const radioButton1 = new Annotations.RadioButtonWidgetAnnotation(field, {
22 appearance: 'Off',
23 appearances: {
24 Off: {},
25 First: {},
26 },
27 });
28
29 // Create another radio button widget.
30 const radioButton2 = new Annotations.RadioButtonWidgetAnnotation(field, {
31 appearance: 'Off',
32 appearances: {
33 Off: {},
34 Second: {},
35 },
36 });
37
38 radioButton1.PageNumber = 1;
39 radioButton1.X = 100;
40 radioButton1.Y = 100;
41 radioButton1.Width = 25;
42 radioButton1.Height = 25;
43
44 radioButton2.PageNumber = 1;
45 radioButton2.X = 150;
46 radioButton2.Y = 150;
47 radioButton2.Width = 25;
48 radioButton2.Height = 25;
49
50 // Add form field to field manager and widget annotation to annotation manager.
51 annotationManager.getFieldManager().addField(field);
52 annotationManager.addAnnotation(radioButton1);
53 annotationManager.addAnnotation(radioButton2);
54 annotationManager.drawAnnotationsFromList([radioButton1, radioButton2]);
55 });
56});

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.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales