install

resources/views/vendor/filament/components/input/one-time-code.blade.php

@@ -0,0 +1,42 @@
+@props([
+    'length' => 6,
+])
+
+<div
+    x-data="{ currentNumberOfDigits: null }"
+    {{
+        $attributes
+            ->class([
+                'fi-one-time-code-input-ctn',
+            ])
+    }}
+>
+    @foreach (range(1, $length) as $digit)
+        <div
+            x-bind:class="{
+                'fi-active':
+                    currentNumberOfDigits !== null &&
+                    currentNumberOfDigits >= {{ $digit }},
+            }"
+            class="fi-one-time-code-input-digit-field"
+        ></div>
+    @endforeach
+
+    <input
+        autocomplete="one-time-code"
+        inputmode="numeric"
+        minlength="{{ $length }}"
+        maxlength="{{ $length }}"
+        pattern="\d{{ '{' . $length . '}' }}"
+        type="text"
+        x-data="{}"
+        x-on:focus="currentNumberOfDigits = $el.value.length"
+        x-on:blur="currentNumberOfDigits = null"
+        x-on:input="
+            $el.value = $el.value.replace(/\D/g, '')
+            currentNumberOfDigits = $el.value.length
+        "
+        x-bind:class="{ 'fi-valid': currentNumberOfDigits >= {{ $length }} }"
+        class="fi-one-time-code-input"
+    />
+</div>