diff --git a/apps/showcase/doc/floatlabel/VariantsDoc.vue b/apps/showcase/doc/floatlabel/VariantsDoc.vue
index 9660a2f26..461ee54e9 100644
--- a/apps/showcase/doc/floatlabel/VariantsDoc.vue
+++ b/apps/showcase/doc/floatlabel/VariantsDoc.vue
@@ -4,13 +4,13 @@
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
         <FloatLabel variant="in">
-            <InputText id="inlabel" v-model="value1" autocomplete="off" />
-            <label for="inlabel">In Label</label>
+            <InputText id="in_label" v-model="value1" autocomplete="off" />
+            <label for="in_label">In Label</label>
         </FloatLabel>
 
         <FloatLabel variant="on">
-            <InputText id="onlabel" v-model="value2" autocomplete="off" />
-            <label for="onlabel">On Label</label>
+            <InputText id="on_label" v-model="value2" autocomplete="off" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
@@ -25,26 +25,26 @@ export default {
             code: {
                 basic: `
 <FloatLabel variant="in">
-    <InputText id="inlabel" v-model="value1" />
-    <label for="inlabel">In Label</label>
+    <InputText id="in_label" v-model="value1" autocomplete="off" />
+    <label for="in_label">In Label</label>
 </FloatLabel>
 
 <FloatLabel variant="on">
-    <InputText id="onlabel" v-model="value2" />
-    <label for="onlabel">On Label</label>
+    <InputText id="on_label" v-model="value2" autocomplete="off" />
+    <label for="on_label">On Label</label>
 </FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
         <FloatLabel variant="in">
-            <InputText id="inlabel" v-model="value1" />
-            <label for="inlabel">In Label</label>
+            <InputText id="in_label" v-model="value1" autocomplete="off" />
+            <label for="in_label">In Label</label>
         </FloatLabel>
 
         <FloatLabel variant="on">
-            <InputText id="onlabel" v-model="value2" />
-            <label for="onlabel">On Label</label>
+            <InputText id="on_label" v-model="value2" autocomplete="off" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -65,13 +65,13 @@ export default {
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
         <FloatLabel variant="in">
-            <InputText id="inlabel" v-model="value1" />
-            <label for="inlabel">In Label</label>
+            <InputText id="in_label" v-model="value1" autocomplete="off" />
+            <label for="in_label">In Label</label>
         </FloatLabel>
 
         <FloatLabel variant="on">
-            <InputText id="onlabel" v-model="value2" />
-            <label for="onlabel">On Label</label>
+            <InputText id="on_label" v-model="value2" autocomplete="off" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>