diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index 21bdda87e..6df198a45 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -124,6 +124,19 @@ export default {
 
                     break;
 
+                case 8:
+                    if (event.target.value.length === 0) {
+                        this.moveToPrev(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
                 case 39:
                     this.moveToNext(event);
                     event.preventDefault();
diff --git a/doc/inputotp/SampleDoc.vue b/doc/inputotp/SampleDoc.vue
new file mode 100644
index 000000000..6d8d0eba6
--- /dev/null
+++ b/doc/inputotp/SampleDoc.vue
@@ -0,0 +1,203 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A sample UI implementation with templating and additional elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column align-items-center">
+            <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+            <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+            <InputOtp v-model="value" :length="6" style="gap: 0">
+                <template #default="{ attrs, events }">
+                    <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+                </template>
+            </InputOtp>
+            <div class="flex justify-content-between mt-5 align-self-stretch">
+                <Button label="Resend Code" link class="p-0"></Button>
+                <Button label="Submit Code"></Button>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<div class="flex flex-column align-items-center">
+    <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+    <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+    <InputOtp v-model="value" :length="6" style="gap: 0">
+        <template #default="{ attrs, events }">
+            <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+        </template>
+    </InputOtp>
+    <div class="flex justify-content-between mt-5 align-self-stretch">
+        <Button label="Resend Code" link class="p-0"></Button>
+        <Button label="Submit Code"></Button>
+    </div>
+</div>
+`,
+                options: `
+<template>
+    <div class="flex flex-column align-items-center">
+        <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+        <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+        <InputOtp v-model="value" :length="6" style="gap: 0">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+        <div class="flex justify-content-between mt-5 align-self-stretch">
+            <Button label="Resend Code" link class="p-0"></Button>
+            <Button label="Submit Code"></Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    border-radius: 0;
+    border: 1px solid var(--surface-400);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--text-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--primary-color);
+}
+
+.custom-otp-input:first-child {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+<\/style>
+`,
+                composition: `
+<template>
+    <div class="flex flex-column align-items-center">
+        <div class="font-bold text-xl mb-2">Authenticate Your Account</div>
+        <p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+        <InputOtp v-model="value" :length="6" style="gap: 0">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+        <div class="flex justify-content-between mt-5 align-self-stretch">
+            <Button label="Resend Code" link class="p-0"></Button>
+            <Button label="Submit Code"></Button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    border-radius: 0;
+    border: 1px solid var(--surface-400);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--text-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--primary-color);
+}
+
+.custom-otp-input:first-child {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+<\/style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.custom-otp-input {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    border-radius: 0;
+    border: 1px solid var(--surface-400);
+    background: transparent;
+    outline-offset: -2px;
+    outline-color: transparent;
+    border-right: 0 none;
+    transition: outline-color 0.3s;
+    color: var(--text-color);
+}
+
+.custom-otp-input:focus {
+    outline: 2px solid var(--primary-color);
+}
+
+.custom-otp-input:first-child {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+
+.custom-otp-input:last-child {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+</style>
diff --git a/pages/inputotp/index.vue b/pages/inputotp/index.vue
index 6cb5376c0..1f2c2e900 100644
--- a/pages/inputotp/index.vue
+++ b/pages/inputotp/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
 import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
 import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
+import SampleDoc from '@/doc/inputotp/SampleDoc.vue';
 import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
 import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
 import PTComponent from '@/doc/inputotp/pt/index.vue';
@@ -41,6 +42,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'sample',
+                    label: 'Sample',
+                    component: SampleDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',