feat: Create category component (#5103)

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -1,5 +1,5 @@
 <template>
-  <label>
+  <label class="container">
     <span v-if="label">{{ label }}</span>
     <input
       :value="value"
@@ -10,7 +10,7 @@
       @input="onChange"
       @blur="onBlur"
     />
-    <p v-if="helpText" class="help-text" />
+    <p v-if="helpText" class="help-text">{{ helpText }}</p>
     <span v-if="error" class="message">
       {{ error }}
     </span>
@@ -46,7 +46,7 @@ export default {
     },
     readonly: {
       type: Boolean,
-      deafaut: false,
+      default: false,
     },
     styles: {
       type: Object,
@@ -63,3 +63,21 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+.container {
+  margin: 0 0 var(--space-normal);
+  input {
+    margin: 0;
+  }
+  .page-sub-title {
+    color: var(--s-600);
+  }
+
+  .help-text {
+    margin-top: var(--space-micro);
+    font-size: var(--font-size-mini);
+    color: var(--s-600);
+    font-style: normal;
+  }
+}
+</style>