1 files changed, 69 insertions, 0 deletions
diff --git a/packages/components/src/components/FormInput/FormInput.scss b/packages/components/src/components/FormInput/FormInput.scss
new file mode 100644
index 000000000..db04ff8cf
--- /dev/null
+++ b/packages/components/src/components/FormInput/FormInput.scss
@@ -0,0 +1,69 @@
+@import '../../global/globalCssVariables.scss';
+
+.formInput-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+  position: relative;
+  margin-top: 20px;
+
+  .formInput {
+    font-family: inherit;
+    width: 100%;
+    border: 0;
+    border-bottom: 2px solid black;
+    outline: 0;
+    font-size: 1rem;
+    color: black;
+    padding: 7px 0;
+    background: transparent;
+    transition: border-color 0.2s;
+
+    &::placeholder {
+      color: transparent;
+    }
+
+    &:focus {
+      ~ .formInput-label {
+        position: absolute;
+        transform: translate(0px, -13px);
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+        font-weight: 700;
+      }
+      padding-bottom: 6px;
+      font-weight: 700;
+      border-width: 3px;
+      border-image: linear-gradient(to right, black, white);
+      border-image-slice: 1;
+    }
+
+    &:valid {
+      ~ .formInput-label {
+        position: absolute;
+        transform: translate(0px, -13px);
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+      }
+    }
+
+    &:required,
+    &:invalid {
+      box-shadow: none;
+    }
+  }
+
+  .formInput-label {
+    position: absolute;
+    top: 0;
+    transform: translate(0px, 8px);
+    display: block;
+    transition: 0.2s;
+    font-size: 1rem;
+    color: gray;
+    pointer-events: none;
+  }
+}