Dynamic Tag Input

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

A Tag Input component allows users to quickly enter categories, keywords, or filters by typing a word and pressing Enter to convert it into a visual tag card. This pattern is extremely common in modern web interfaces, such as categorizing blog posts, adding search filters, or assigning recipients in messaging apps.

In this challenge, you will implement a dynamic tag entry box. The component needs to support adding tags dynamically, preventing duplicates, and allowing users to delete tags by clicking their delete buttons.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Input element with ID #tag-input-field.
Unordered list with ID #tag-list for rendering active tags.
Tag elements inside the list should contain class .tag-item.
Pressing the Enter key inside the input field appends a new tag item into #tag-list.
Trim any leading or trailing whitespace from the tag text, and ignore empty submissions.
Prevent duplicate tags from being added to the list.
Render a delete/remove button ('x') inside each tag item; clicking it must remove that tag from the list.

Example Demo

User Flow

Step-by-step Flow Explanation:

User inputs a tag text and presses enter.:
The tag is appended inside #tag-list.:
Clicking the delete button inside a tag removes it.:

Related UI Challenges

Layouting

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#tag-input-field, #tag-list, .tag-item)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution
Interactive JavaScript logic and event listeners are implemented	Pending	Pending execution