React JS Tags component

I was looking for some light weight Tags component found Tagify to be interesting. But then figured out it got many features which I will not use. So I wanted to create something very minimalist. I found athe following article to follow as I wanted save time while creating this.

But that article was using React component classes as the article is written 3 years back. For reducing the generate code size I also wanted to change to Functional Component. Here I am giving the final code base for any one want to use it.

The Tag Input Functional Component

Tag Input Code – Tag.tsx

import React, { useState, useRef } from "react";
import { FormFieldType } from "../interface";

import "./tags.scss";

const Tags = (props: { item: FormFieldType }) => {
  const [tags, setTags] = useState(props.item.tags);
  const tagInput = useRef(null);

  const removeTag = (i) => {
    const newTags = [...tags];
    newTags.splice(i, 1);

  const inputKeyDown = (e) => {
    const val =;
    if (e.key === "Enter" && val) {
      if (tags.find((tag) => tag.toLowerCase() === val.toLowerCase())) {

      setTags([...tags, val]);
      tagInput.current.value = null;
    } else if (e.key === "Backspace" && !val) {
      removeTag(tags.length - 1);

  return (
    <div className="input-tag">
      <ul className="input-tag__tags">
        {, i) => (
          <li key={tag}>
              onClick={() => {
        <li className="input-tag__tags__input">
          <input type="text" onKeyDown={inputKeyDown} ref={tagInput} />

export default Tags;

Interface code – FormFieldType.ts

export interface FormFieldType  {

Style sheet code – tags.scss

.input-tag {
    background: white;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 5px 0;

.input-tag input {
    border: none;
    width: 100%;

.input-tag__tags {
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: 100%;

.input-tag__tags li {
    align-items: center;
    background: #85A3BF;
    border-radius: 2px;
    color: white;
    display: flex;
    font-weight: 300;
    list-style: none;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 5px 10px;

.input-tag__tags li button {
    align-items: center;
    appearance: none;
    background: #333333;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    height: 15px;
    justify-content: center;
    line-height: 0;
    margin-left: 8px;
    padding: 0;
    transform: rotate(45deg);
    width: 15px;

.input-tag__tags li.input-tag__tags__input {
    background: none;
    flex-grow: 1;
    padding: 0;

Hope this helped you on your latest project. Credits goes to Jerry Low for the original tutorial.


Full stack developer, and Pega Certified Lead System architect since 2013 and with nearly 16 years experience in Pega. Connect with me in Linked in at

Leave a Reply

Your email address will not be published. Required fields are marked *