Convenient Tags Input In Plain JavaScript – tags-input.js

Preview:

Description:

A fast and plain (vanilla) JavaScript-based tags input component that enables the user to add tags individually or to insert multiple tags separated by comma at once.

How to use it:

1. Create a tags input on the page.

<input placeholder="Type tags separated by comma" />

2. Create a container to display the tags you just typed.

<div class="tag-container">
  <!-- <div class="tag">
  <span>Tag</span>
  <i class="close"></i>
  </div> -->
</div>

3. Insert the tags-input.js script to the page.

<script src="tags-input.js"></script>

4. The necessary CSS styles for the tags input.

.input-container {
  border: 2px solid var(--primary-opaque);
  border-radius: .2rem;
  display: flex;
  align-content: flex-start;
  padding: .4rem;
  margin-bottom: .4rem;
}
.tag-container {
  border: 2px solid var(--primary-opaque);
  border-radius: .2rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: .4rem;
  overflow-x: auto;
}

.tag-container, 
.input-container input, 
.tag-container .tag {
  background: rgba(0, 0, 0, 0.2);
  color: var(--white);
}
.tag-container .tag {
  margin: .4rem;
  padding: .4rem .6rem;
  border-bottom: .01rem solid var(--primary);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  cursor: default;
}
.tag i {
  font-size: 0.8rem;
  font-style: normal;
  margin-left: .4rem;
  transform: translateY(0.08rem);
}
.close::after {
  content: "✕";
  height: 24px;
  width: 24px;
}
.input-container input {
  padding: .4rem;
  font-size: 1.2rem;
  border: 0;
  outline: none;
  flex: 1;
}