feat(v-input): use id or name for label for

gitsindonesia · May 10, 2022 · 3003dfe · 3003dfe
1 parent 715c0d1
commit 3003dfe
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/input/src/VInput.stories.ts b/packages/input/src/VInput.stories.ts
@@ -99,6 +99,19 @@ Default.parameters = {
   },
 };
 
+export const Label = Template.bind({});
+Label.args = {
+  label: 'Name',
+  id: 'name',
+};
+Label.parameters = {
+  docs: {
+    source: {
+      code: `<v-input label="Name" id="name" />`,
+    },
+  },
+};
+
 export const Email = Template.bind({});
 Email.args = {
   type: 'email',

diff --git a/packages/input/src/VInput.vue b/packages/input/src/VInput.vue
@@ -81,6 +81,10 @@ const props = defineProps({
     type: [Object, String],
     default: null,
   },
+  id: {
+    type: String,
+    default: '',
+  },
 });
 
 const {type, readonly, disabled, placeholder, prependIcon, appendIcon} =
@@ -132,7 +136,7 @@ const inputVariantClass = computed(() => {
 
 <template>
   <div class="mb-4">
-    <label v-if="label" :for="name" class="mb-1 block">{{ label }}</label>
+    <label v-if="label" :for="id || name" class="mb-1 block">{{ label }}</label>
     <div v-if="text" v-bind="$attrs">{{ inputValue }}</div>
     <div v-else class="relative w-full flex gap-2 items-center">
       <slot name="prepend.outer">
@@ -154,7 +158,7 @@ const inputVariantClass = computed(() => {
         </div>
       </slot>
       <input
-        :id="name"
+        :id="id || name"
         v-model="inputValue"
         class="
           w-full