diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index d873484969181..13df82d9b49f9 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -10,7 +10,9 @@ test('createElementFromAttrs', () => {
     class: 'cls-1 cls-2',
     'data-foo': 'the-data',
     disabled: true,
+    checked: false,
     required: null,
+    tabindex: 0,
   });
-  expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" data-foo="the-data" disabled=""></button>');
+  expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" data-foo="the-data" disabled="" tabindex="0"></button>');
 });
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 8d75c724ded80..82e7b755a5cbe 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -297,7 +297,7 @@ export function createElementFromAttrs(tagName, attrs) {
   const el = document.createElement(tagName);
   for (const [key, value] of Object.entries(attrs)) {
     if (value === undefined || value === null) continue;
-    if (value === true) {
+    if (typeof value === 'boolean') {
       el.toggleAttribute(key, value);
     } else {
       el.setAttribute(key, String(value));