Custom toolbar radio button

playground/forms/custom-toolbar-radio-button/index.ts

@@ -0,0 +1,70 @@
+import type { Instance, ToolbarItem } from "@nutrient-sdk/viewer";
+import { baseOptions } from "../../shared/base-options";
+
+let instance: Instance | null = null;
+
+const createGroupedRadioButtons = async (instance: Instance | null) => {
+  const radioWidget1 = new window.NutrientViewer.Annotations.WidgetAnnotation({
+    id: window.NutrientViewer.generateInstantId(),
+    pageIndex: 0,
+    formFieldName: "MyFormField",
+    boundingBox: new window.NutrientViewer.Geometry.Rect({
+      left: 100,
+      top: 100,
+      width: 20,
+      height: 20,
+    }),
+  });
+
+  const radioWidget2 = new window.NutrientViewer.Annotations.WidgetAnnotation({
+    id: window.NutrientViewer.generateInstantId(),
+    pageIndex: 0,
+    formFieldName: "MyFormField",
+    boundingBox: new window.NutrientViewer.Geometry.Rect({
+      left: 130,
+      top: 100,
+      width: 20,
+      height: 20,
+    }),
+  });
+
+  const formField = new window.NutrientViewer.FormFields.RadioButtonFormField({
+    name: "MyFormField",
+    annotationIds: window.NutrientViewer.Immutable.List([
+      radioWidget1.id,
+      radioWidget2.id,
+    ]),
+    options: window.NutrientViewer.Immutable.List([
+      new window.NutrientViewer.FormOption({
+        label: "Option 1",
+        value: "1",
+      }),
+      new window.NutrientViewer.FormOption({
+        label: "Option 2",
+        value: "2",
+      }),
+    ]),
+    defaultValue: "1",
+  });
+
+  await instance?.create([radioWidget1, radioWidget2, formField]);
+};
+
+const item: ToolbarItem = {
+  type: "custom",
+  id: "add-radio-group",
+  title: "Add Radio Group",
+  onPress: () => createGroupedRadioButtons(instance),
+};
+
+window.NutrientViewer.load({
+  ...baseOptions,
+  theme: window.NutrientViewer.Theme.DARK,
+  toolbarItems: [
+    ...window.NutrientViewer.defaultToolbarItems,
+    { type: "form-creator" },
+  ],
+}).then((_instance: Instance) => {
+  instance = _instance;
+  instance.setToolbarItems((items) => [...items, item]);
+});

playground/forms/custom-toolbar-radio-button/playground.mdx

@@ -0,0 +1,7 @@
+---
+category: forms
+title: Add Grouped Radio Buttons with Custom Toolbar Button
+description: Create a custom toolbar item that programmatically places grouped radio buttons with a single click, avoiding manual renaming.
+keywords: [forms, radio-button, custom-toolbar, toolbar-item, widget, form-field, radio-group, grouped radio-buttons]
+---
+

playground/forms/custom-toolbar-radio-button/playground.url

@@ -0,0 +1,2 @@
+[InternetShortcut]
+URL=https://playground.pspdfkit.com/?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYifSwianMiOiJsZXQgaW5zdGFuY2UgPSBudWxsO1xuXG5jb25zdCBpdGVtID0ge1xuICB0eXBlOiBcImN1c3RvbVwiLFxuICBpZDogXCJhZGQtcmFkaW8tZ3JvdXBcIixcbiAgdGl0bGU6IFwiQWRkIFJhZGlvIEdyb3VwXCIsXG4gIG9uUHJlc3M6IGFzeW5jICgpID0%252BIHtcbiAgICBjb25zdCByYWRpb1dpZGdldDEgPSBuZXcgTnV0cmllbnRWaWV3ZXIuQW5ub3RhdGlvbnMuV2lkZ2V0QW5ub3RhdGlvbih7XG4gIGlkOiBOdXRyaWVudFZpZXdlci5nZW5lcmF0ZUluc3RhbnRJZCgpLFxuICBwYWdlSW5kZXg6IDAsXG4gIGZvcm1GaWVsZE5hbWU6IFwiTXlGb3JtRmllbGRcIixcbiAgYm91bmRpbmdCb3g6IG5ldyBOdXRyaWVudFZpZXdlci5HZW9tZXRyeS5SZWN0KHtcbiAgICBsZWZ0OiAxMDAsXG4gICAgdG9wOiAxMDAsXG4gICAgd2lkdGg6IDIwLFxuICAgIGhlaWdodDogMjBcbiAgfSlcbn0pO1xuY29uc3QgcmFkaW9XaWRnZXQyID0gbmV3IE51dHJpZW50Vmlld2VyLkFubm90YXRpb25zLldpZGdldEFubm90YXRpb24oe1xuICBpZDogTnV0cmllbnRWaWV3ZXIuZ2VuZXJhdGVJbnN0YW50SWQoKSxcbiAgcGFnZUluZGV4OiAwLFxuICBmb3JtRmllbGROYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gIGJvdW5kaW5nQm94OiBuZXcgTnV0cmllbnRWaWV3ZXIuR2VvbWV0cnkuUmVjdCh7XG4gICAgbGVmdDogMTMwLFxuICAgIHRvcDogMTAwLFxuICAgIHdpZHRoOiAyMCxcbiAgICBoZWlnaHQ6IDIwXG4gIH0pXG59KTtcbmNvbnN0IGZvcm1GaWVsZCA9IG5ldyBOdXRyaWVudFZpZXdlci5Gb3JtRmllbGRzLlJhZGlvQnV0dG9uRm9ybUZpZWxkKHtcbiAgbmFtZTogXCJNeUZvcm1GaWVsZFwiLFxuICBhbm5vdGF0aW9uSWRzOiBuZXcgTnV0cmllbnRWaWV3ZXIuSW1tdXRhYmxlLkxpc3QoW3JhZGlvV2lkZ2V0MS5pZCwgcmFkaW9XaWRnZXQyLmlkXSksXG4gIG9wdGlvbnM6IG5ldyBOdXRyaWVudFZpZXdlci5JbW11dGFibGUuTGlzdChbXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMVwiLCB2YWx1ZTogXCIxXCIgfSksXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMlwiLCB2YWx1ZTogXCIyXCIgfSlcbiAgXSksXG4gIGRlZmF1bHRWYWx1ZTogXCIxXCJcbn0pO1xuYXdhaXQgaW5zdGFuY2UuY3JlYXRlKFtyYWRpb1dpZGdldDEsIHJhZGlvV2lkZ2V0MiwgZm9ybUZpZWxkXSk7XG4gIH1cbn07XG5cblxuXG5cblxuXG5cbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG4gIHRvb2xiYXJJdGVtczogWy4uLk51dHJpZW50Vmlld2VyLmRlZmF1bHRUb29sYmFySXRlbXMsIHsgdHlwZTogXCJmb3JtLWNyZWF0b3JcIiB9XVxufSkudGhlbigoX2luc3RhbmNlKSA9PiB7XG4gICAgaW5zdGFuY2UgPSBfaW5zdGFuY2U7XG4gICAgaW5zdGFuY2Uuc2V0VG9vbGJhckl0ZW1zKChpdGVtcykgPT4gWy4uLml0ZW1zLCBpdGVtXSk7XG5cbn0pO1xuXHQifQ%253D%253D