diff --git a/README.md b/README.md
index 591045e8d..95f9dd287 100644
--- a/README.md
+++ b/README.md
@@ -78,6 +78,7 @@ import ReactDOM from 'react-dom';
 * [`PasswordRevealer`](#passwordrevealer)
 * [`Select`](#select)
 * [`Slider`](#slider)
+* [`TagInput`](#taginput)
 * [`TextArea`](#textarea)
 * [`UncontrolledInput`](#uncontrolledinput)
 
@@ -967,6 +968,118 @@ ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getEleme
 
 <br>[⬆ Back to top](#contents)
 
+### TagInput
+
+Renders a tag input field.
+
+- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.
+- Use `Array.prototype.map()` on collected nodes to render the list of tags.
+- Define the `addTags` method, which will be executed on pressing the `Enter` key.
+- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.
+- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.
+- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.
+
+```css
+.tag-input {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 48px;
+  padding: 0 8px;
+  border: 1px solid #d6d8da;
+  border-radius: 6px;
+}
+.tag-input input {
+  flex: 1;
+  border: none;
+  height: 46px;
+  font-size: 14px;
+  padding: 4px 0 0;
+  &:focus {
+    outline: transparent;
+  }
+}
+#tags {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 8px 0 0;
+}
+.tag {
+  width: auto;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  padding: 0 8px;
+  font-size: 14px;
+  list-style: none;
+  border-radius: 6px;
+  margin: 0 8px 8px 0;
+  background: #0052cc;
+}
+.tag-title {
+  margin-top: 3px;
+}
+.tag-close-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  font-size: 14px;
+  margin-left: 8px;
+  color: #0052cc;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+}
+```
+
+```jsx
+function TagInput(props) {
+  const [tags, setTags] = React.useState(props.tags);
+  const removeTags = indexToRemove => {
+    setTags([...tags.filter((_, index) => index !== indexToRemove)]);
+  };
+  const addTags = event => {
+    if (event.target.value !== "") {
+      setTags([...tags, event.target.value]);
+      event.target.value = "";
+    }
+  };
+  return (
+    <div className="tag-input">
+      <ul id="tags">
+        {tags.map((tag, index) => (
+          <li key={index} className="tag">
+            <span className="tag-title">{tag}</span>
+            <span className="tag-close-icon" onClick={() => removeTags(index)}>
+              x
+            </span>
+          </li>
+        ))}
+      </ul>
+      <input
+        type="text"
+        onKeyUp={event => (event.key === "Enter" ? addTags(event) : null)}
+        placeholder="Press enter to add tags"
+      />
+    </div>
+  );
+}
+```
+
+<details>
+<summary>Examples</summary>
+
+```jsx
+ReactDOM.render(<TagInput tags={['Nodejs', 'MongoDB']}/>, document.getElementById('root'));
+```
+</details>
+
+<br>[⬆ Back to top](#contents)
+
 ### TextArea
 
 Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index a35fa2de3..af3d318b5 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -382,6 +382,23 @@
         "hash": "9f8634ca4a5f49134cb88e00c0f193c6c6c5cf8ee60482a16782c04f48595176"
       }
     },
+    {
+      "id": "TagInput",
+      "type": "snippetListing",
+      "title": "TagInput",
+      "attributes": {
+        "text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n",
+        "tags": [
+          "input",
+          "visual",
+          "state",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "d2ebdb53ce2a517e3dc74045ab7dff50f348b10b8eb2cc588b8fc86d8745c141"
+      }
+    },
     {
       "id": "TextArea",
       "type": "snippetListing",
diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json
index 74a0559b6..5763511a0 100644
--- a/snippet_data/snippets.json
+++ b/snippet_data/snippets.json
@@ -520,6 +520,29 @@
         "hash": "9f8634ca4a5f49134cb88e00c0f193c6c6c5cf8ee60482a16782c04f48595176"
       }
     },
+    {
+      "id": "TagInput",
+      "title": "TagInput",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "TagInput.md",
+        "text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n",
+        "codeBlocks": {
+          "style": ".tag-input {\n  display: flex;\n  flex-wrap: wrap;\n  min-height: 48px;\n  padding: 0 8px;\n  border: 1px solid #d6d8da;\n  border-radius: 6px;\n}\n.tag-input input {\n  flex: 1;\n  border: none;\n  height: 46px;\n  font-size: 14px;\n  padding: 4px 0 0;\n  &:focus {\n    outline: transparent;\n  }\n}\n#tags {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 8px 0 0;\n}\n.tag {\n  width: auto;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  padding: 0 8px;\n  font-size: 14px;\n  list-style: none;\n  border-radius: 6px;\n  margin: 0 8px 8px 0;\n  background: #0052cc;\n}\n.tag-title {\n  margin-top: 3px;\n}\n.tag-close-icon {\n  display: block;\n  width: 16px;\n  height: 16px;\n  line-height: 16px;\n  text-align: center;\n  font-size: 14px;\n  margin-left: 8px;\n  color: #0052cc;\n  border-radius: 50%;\n  background: #fff;\n  cursor: pointer;\n}",
+          "code": "function TagInput(props) {\n  const [tags, setTags] = React.useState(props.tags);\n  const removeTags = indexToRemove => {\n    setTags([...tags.filter((_, index) => index !== indexToRemove)]);\n  };\n  const addTags = event => {\n    if (event.target.value !== \"\") {\n      setTags([...tags, event.target.value]);\n      event.target.value = \"\";\n    }\n  };\n  return (\n    <div className=\"tag-input\">\n      <ul id=\"tags\">\n        {tags.map((tag, index) => (\n          <li key={index} className=\"tag\">\n            <span className=\"tag-title\">{tag}</span>\n            <span className=\"tag-close-icon\" onClick={() => removeTags(index)}>\n              x\n            </span>\n          </li>\n        ))}\n      </ul>\n      <input\n        type=\"text\"\n        onKeyUp={event => (event.key === \"Enter\" ? addTags(event) : null)}\n        placeholder=\"Press enter to add tags\"\n      />\n    </div>\n  );\n}",
+          "example": "ReactDOM.render(<TagInput tags={['Nodejs', 'MongoDB']}/>, document.getElementById('root'));"
+        },
+        "tags": [
+          "input",
+          "visual",
+          "state",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "d2ebdb53ce2a517e3dc74045ab7dff50f348b10b8eb2cc588b8fc86d8745c141"
+      }
+    },
     {
       "id": "TextArea",
       "title": "TextArea",