diff --git a/app/assets/stylesheets/shared_styles/elements/input_fields.scss b/app/assets/stylesheets/shared_styles/elements/input_fields.scss
new file mode 100644
index 000000000..16d2831fd
--- /dev/null
+++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss
@@ -0,0 +1,134 @@
+.sci-input-container {
+  display: inline-block;
+  position: relative;
+
+  label {
+    @include font-small;
+    display: inline-block;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .sci-input-field {
+    @include font-button;
+    animation-timing-function: $timing-function-sharp;
+    border: $border-default;
+    border-radius: $border-radius-default;
+    height: 36px;
+    outline: 0;
+    padding: 0 0 0 10px;
+    transition: .3s;
+    width: 100%;
+
+    &:focus {
+      border: $border-focus;
+    }
+
+    &:disabled {
+      background: transparent;
+    }
+  }
+
+  .fas {
+    line-height: 36px;
+    position: absolute;
+    text-align: center;
+    bottom: 0;
+    width: 25px; 
+  }
+
+  &.left-icon {
+
+    .sci-input-field {
+      padding: 0 0 0 30px;
+    }
+
+    .fas {
+      left: 5px;
+    }
+  }
+
+  &.right-icon {
+
+    .sci-input-field {
+      padding: 0 30px 0 10px;
+    }
+
+    .fas {
+      right: 5px;
+    }
+  }
+
+  &.success,
+  &.error {
+
+    .sci-input-field {
+      padding: 0 30px 0 10px;
+    }
+
+    &::after {
+      font-family: "Font Awesome 5 Free";
+      font-weight: 501;
+      line-height: 36px;
+      position: absolute;
+      right: 5px;
+      text-align: center;
+      bottom: 0;
+      width: 25px;
+    }
+
+    &.right-icon {
+      .sci-input-field {
+        padding: 0 60px 0 10px;
+      }
+
+      &::after {
+        right: 35px;
+      }
+    }
+  }
+
+  &.success {
+    &::after {
+      color: $brand-success;
+      content: "\f00c";
+    }
+  }
+
+  &.error {
+    .sci-input-field {
+      border: $border-danger;
+    }
+
+    &::after {
+      color: $brand-danger;
+      content: "\f071";
+    }
+
+    &::before {
+      @include font-small;
+      color: $brand-danger;
+      content: attr(data-error-text);
+      left: 0;
+      line-height: 15px;
+      position: absolute;
+      bottom: -15px;
+      width: 100%;
+    }
+  }
+
+  &.disabled {
+    label {
+      color: $color-alto;
+    }
+
+    .sci-input-field {
+      border: $border-tertiary;
+      color: $color-alto;
+
+      &::placeholder {
+        color: inherit;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
index 2dd1f7795..868cc6b8e 100644
--- a/app/views/projects/index.html.erb
+++ b/app/views/projects/index.html.erb
@@ -239,4 +239,35 @@
     <input type="radio" name="test1" class="sci-toggle-item">
     <span class="sci-toggle-item-label"><i class="fas fa-th"></i></span>
   </div>
+  <hr>
+  <div class="sci-input-container" style="width: 300px">
+    <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
+  </div>
+  <hr>
+  <div class="sci-input-container left-icon" style="width: 300px">
+    <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
+    <i class="fas fa-search"></i>
+  </div>
+  <hr>
+  <div class="sci-input-container right-icon"  style="width: 300px">
+    <label>Right icon</label>
+    <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
+    <i class="fas fa-search"></i>
+  </div>
+  <hr>
+  <div class="sci-input-container right-icon success"  style="width: 300px">
+    <label>Success and icon</label>
+    <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
+    <i class="fas fa-search"></i>
+  </div>
+  <hr>
+  <div class="sci-input-container error" data-error-text="Error text"  style="width: 300px">
+    <label>Error</label>
+    <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
+  </div>
+  <hr>
+  <div class="sci-input-container disabled" style="width: 300px">
+    <label>Disabled</label>
+    <input type="text" class="sci-input-field" placeholder="Placeholder" disabled></input>
+  </div>
 </div>