diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
new file mode 100644
index 00000000..f914ef62
--- /dev/null
+++ b/src/components/TextInput/index.js
@@ -0,0 +1,67 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = [
+  'input:error',
+  'inputPlaceholder:changed',
+  'inputAsset:changed',
+  'input:disabled',
+  'input:enabled',
+];
+
+const html = `
+    <div class="input-text-container">
+      <input class="input-text-container__input" type="text" data-select="input-text" placeholder="">
+    </div>
+`;
+
+export default function InputText({
+  placeholder,
+  assetUrl,
+  assetPosition,
+  variation,
+}) {
+  Component.call(this, { html, events });
+  this.disabled = false;
+
+  this.setPlaceholder(placeholder);
+  this.selected.get('input-text').classList.add(variation);
+  this.selected.get('input-text').backgroundImage = assetUrl;
+  this.selected.get('input-text').classList.add(assetPosition);
+
+  this.selected.get('input-text').addEventListener('focus', () => {
+    if (this.disabled) return;
+    this.classList.remove('input-error');
+  });
+}
+
+InputText.prototype = Object.assign(InputText.prototype, Component.prototype, {
+  setPlaceholder(placeholder) {
+    this.selected.get('input-text').placeholder = placeholder;
+    this.emit('inputPlaceholder:changed', placeholder);
+  },
+  setAsset(url) {
+    this.selected.get('input-text').backgroundImage = `url(${url})`;
+    this.emit('inputAsset:changed');
+  },
+  isStandard() {
+    this.selected.get('input-text').classList.add('standard');
+    this.selected.get('input-text').classList.remove('outlined');
+  },
+  isOutlined() {
+    this.selected.get('input-text').classList.add('outlined');
+    this.selected.get('input-text').classList.remove('standart');
+  },
+  inputError() {
+    this.selected.get('input-text').classList.add('input-error');
+    this.emit('input:error');
+  },
+  disable() {
+    this.disabled = true;
+    this.emit('input:disabled');
+  },
+  enable() {
+    this.disabled = false;
+    this.emit('input:enabled');
+  },
+});
diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss
new file mode 100644
index 00000000..e6a7701e
--- /dev/null
+++ b/src/components/TextInput/index.scss
@@ -0,0 +1,85 @@
+.input-text-container {
+  position: relative;
+
+  &__input {
+    width: 100%;
+
+    font-size: 1rem;
+
+    background-repeat: no-repeat;
+    background-size: auto 50%;
+    filter: opacity(0.85);
+
+    &.standard {
+      padding: 0.65rem 1rem;
+      border: 1px solid #a3a3a3;
+
+      border-radius: 8px;
+
+      transition: border-color 0.3s ease-in-out;
+
+      &.prefix {
+        padding: 0.8rem 0.8rem 0.8rem 2.5rem;
+
+        background-position: 0.5rem center;
+      }
+
+      &.suffix {
+        padding: 0.8rem 2.5rem 0.8rem 0.8rem;
+
+        background-position: calc(100% - 0.5rem) center;
+      }
+
+      &:focus {
+        border-color: #007bff;
+
+        filter: opacity(1);
+        outline-color: #007bff;
+      }
+
+      &.input-error {
+        border-color: #dc3545;
+
+        background-color: #ee727e75;
+        filter: opacity(0.75);
+        outline-color: #dc3545;
+      }
+    }
+
+    &.outlined {
+      padding: 0.5rem 0.35rem;
+      border-bottom: 2px solid #bfbfbf;
+      border-color: transparent;
+
+      outline: none;
+
+      transition: border-color 0.3s ease-in-out;
+
+      &:focus {
+        border-bottom-color: #007bff;
+      }
+
+      &.input-error {
+        border-bottom-color: #dc3545;
+
+        filter: opacity(0.65);
+
+        &::placeholder {
+          color: #dc3545;
+        }
+      }
+
+      &.suffix {
+        padding: 0.5rem 2.5rem 0.5rem 0.3rem;
+
+        background-position: calc(100% - 0.5rem) center;
+      }
+
+      &.prefix {
+        padding: 0.5rem 0.3rem 0.5rem 2.5rem;
+
+        background-position: 0.5rem center;
+      }
+    }
+  }
+}