diff --git a/client/src/entrypoints/admin/telepath/widgets.js b/client/src/entrypoints/admin/telepath/widgets.js
index 4dfe7fa504ea..98c3b9b8b965 100644
--- a/client/src/entrypoints/admin/telepath/widgets.js
+++ b/client/src/entrypoints/admin/telepath/widgets.js
@@ -2,12 +2,20 @@
 import { gettext } from '../../../utils/gettext';
 
 class BoundWidget {
-  constructor(element, name, idForLabel, initialState, parentCapabilities) {
+  constructor(
+    element,
+    name,
+    idForLabel,
+    initialState,
+    parentCapabilities,
+    options,
+  ) {
     var selector = ':input[name="' + name + '"]';
     this.input = element.find(selector).addBack(selector); // find, including element itself
     this.idForLabel = idForLabel;
     this.setState(initialState);
     this.parentCapabilities = parentCapabilities || new Map();
+    this.options = options;
   }
 
   getValue() {
@@ -49,10 +57,21 @@ class Widget {
 
   boundWidgetClass = BoundWidget;
 
-  render(placeholder, name, id, initialState, parentCapabilities) {
+  render(placeholder, name, id, initialState, parentCapabilities, options) {
     var html = this.html.replace(/__NAME__/g, name).replace(/__ID__/g, id);
     var idForLabel = this.idPattern.replace(/__ID__/g, id);
     var dom = $(html);
+
+    // Add any extra attributes we received to the HTML of the widget
+    if (
+      options &&
+      'attributes' in options &&
+      typeof options.attributes === 'object'
+    ) {
+      Object.entries(options.attributes).forEach(([key, value]) => {
+        dom.attr(key, value);
+      });
+    }
     $(placeholder).replaceWith(dom);
     // eslint-disable-next-line new-cap
     return new this.boundWidgetClass(
@@ -61,6 +80,7 @@ class Widget {
       idForLabel,
       initialState,
       parentCapabilities,
+      options,
     );
   }
 }