From e2da442007a9ff98aca93b217e6a779b9efbf5d4 Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Fri, 25 Sep 2026 12:04:45 +0200
Subject: [PATCH] Fix OTP input ignoring `groups` when resolving the length
 (#3191)

Co-authored-by: codecalm <codecalm@gmail.com>
---
 .changeset/fix-otp-input-groups-length.md |  5 +++++
 core/js/src/otp-input.ts                  | 11 ++++++++++-
 core/js/tests/unit/otp-input.spec.ts      | 14 ++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fix-otp-input-groups-length.md

diff --git a/.changeset/fix-otp-input-groups-length.md b/.changeset/fix-otp-input-groups-length.md
new file mode 100644
index 000000000..c1c1870eb
--- /dev/null
+++ b/.changeset/fix-otp-input-groups-length.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the OTP input ignoring `groups` for its length when neither `length` nor `maxlength` is set.
diff --git a/core/js/src/otp-input.ts b/core/js/src/otp-input.ts
index 35ee4d6e5..6ebc82227 100644
--- a/core/js/src/otp-input.ts
+++ b/core/js/src/otp-input.ts
@@ -191,7 +191,16 @@ class OtpInput extends BaseComponent {
     }
 
     const maxLength = Number.parseInt(this._input.getAttribute('maxlength') ?? '', 10)
-    return Number.isNaN(maxLength) || maxLength < 1 ? 6 : maxLength
+    if (!Number.isNaN(maxLength) && maxLength > 0) {
+      return maxLength
+    }
+
+    const { groups } = this._config
+    if (groups && groups.length > 0) {
+      return groups.reduce((sum, group) => sum + group, 0)
+    }
+
+    return 6
   }
 
   _setupInput(): void {
diff --git a/core/js/tests/unit/otp-input.spec.ts b/core/js/tests/unit/otp-input.spec.ts
index 0bef55516..61260b10b 100644
--- a/core/js/tests/unit/otp-input.spec.ts
+++ b/core/js/tests/unit/otp-input.spec.ts
@@ -75,6 +75,20 @@ describe('OtpInput', () => {
       expect(input().getAttribute('maxlength')).toBe('8')
     })
 
+    it('should default the length to the sum of groups when length is not set', () => {
+      otp().setAttribute('data-bs-groups', '[4,4]')
+      new OtpInput(otp())
+      expect(slots()).toHaveLength(8)
+      expect(input().getAttribute('maxlength')).toBe('8')
+    })
+
+    it('should let the native maxlength override the sum of groups', () => {
+      input().setAttribute('maxlength', '6')
+      otp().setAttribute('data-bs-groups', '[3]')
+      new OtpInput(otp())
+      expect(slots()).toHaveLength(6)
+    })
+
     it('should set inputmode and pattern from the type option', () => {
       otp().setAttribute('data-bs-type', 'alphanumeric')
       new OtpInput(otp())