📎 Adds option for description by input

src/components/FormElements/Input.vue

@@ -1,6 +1,12 @@
 <template>
   <div :class="`input-container ${layout}`">
-    <label v-if="label" for="name">{{label}}</label>
+    <label
+      v-if="label"
+      for="name"
+      class="input-label"
+    >
+      {{label}}
+    </label>
     <input
       :type="type"
       :value="value"
@@ -8,7 +14,14 @@
       :name="name"
       :id="name"
       :placeholder="placeholder"
+      class="input-field"
     />
+    <p
+      v-if="description"
+      class="input-description"
+    >
+    {{ description }}
+    </p>
   </div>
 </template>
 
@@ -21,6 +34,7 @@ export default {
     label: String, // An optional label to display above
     name: String, // Required unique ID value, for accessibility
     placeholder: String, // Optional placeholder value
+    description: String, // Optional info paragraph
     type: {
       default: 'text', // Input type, e.g. text, password, number
       type: String,
@@ -50,10 +64,19 @@ div.input-container {
   &.horizontal {
     flex-direction: row;
     justify-content: space-between;
-    label { margin-right: 0.25rem; }
+    align-items: center;
+    label.input-label,
+    input.input-field,
+    p.input-description {
+      margin: 0.25rem;
+      flex-basis: 8rem;
+      flex-grow: 1;
+    }
+    input.input-field { flex-grow: 2; }
+    p.input-description { flex-grow: 3; }
   }
 
-  input {
+  input.input-field {
     min-width: 10rem;
     padding: 0.5rem 0.75rem;
     margin: 0.5rem auto;
@@ -68,6 +91,14 @@ div.input-container {
       outline: none;
     }
   }
+
+  label.input-label {
+    text-transform: capitalize;
+  }
+
+  p.input-description {
+    opacity: var(--dimming-factor);
+  }
 }
 
 </style>