How to Create a Chips Component using HTML CSS & JavaScript ? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we will see how we can create a chip component with the help of HTML, CSS, and JavaScript. In a chip component, there are basically two sections: one is the content section, and the other is the cross-button section. Both should be under one container with a proper border-radius. Preview Image: PrerequisitesHTMLCSSJavaScriptApproachCreate an HTML structure for the chips component with proper ids and classes for the styles.Add a CSS file that contains all the styles related to the chip component.Add a JavaScript file with all the logic to create the chip and delete it.Then, link the JavaScript and CSS files to the HTML file.Example: This example describes the basic implementation of the Chips Component using HTML, CSS, and JavaScript. HTML <!-- Index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Chips Component</title> </head> <body> <header> <img src= "https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="Error in Loading"> <h1>GeeksforGeeks</h1> </header> <form id="addChipForm" class="add-chip"> <input type="text" id="nameInput" placeholder="Chip Name" /> <button type="submit"> Add Chip </button> </form> <div class="chips-container"> <!-- Existing chips go here --> </div> <script src="script.js"></script> </body> </html> CSS /* Style.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { display: flex; color: #308c44; justify-content: center; } header img { margin-right: 5px; } .chips-container { display: flex; flex-wrap: wrap; gap: 10px; width: max-content; margin: auto; margin-top: 80px; } .chip { display: flex; align-items: center; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 20px; gap: 5px; } .chip-avatar { width: 24px; height: 24px; border-radius: 50%; background-color: grey; text-align: center; line-height: 23px; } .close-icon { cursor: pointer; margin: 0px 8px; font-weight: bold; color: red; } .add-chip { display: flex; align-items: center; margin: 10px; /* border: 2px solid red; */ width: max-content; margin: auto; margin-top: 50px; } #nameInput, #profileIconInput { padding: 10px; border-radius: 20px; border: 1px solid #ccc; margin-right: 10px; } #addChipForm button { background-color: #007bff; color: #fff; border: none; border-radius: 20px; padding: 10px 10px; cursor: pointer; } JavaScript // Script.js // Function to create a new chip function createChip(name) { const chipContainer = document.querySelector( ".chips-container"); const chip = document.createElement("div"); chip.classList.add("chip"); const chipAvatar = document.createElement("div"); chipAvatar.classList.add( "chip-avatar"); chipAvatar.textContent = "P"; const chipName = document.createElement("div"); chipName.textContent = name; const closeIcon = document.createElement("div"); closeIcon.classList.add( "close-icon"); closeIcon.textContent = "x"; closeIcon.addEventListener( "click", function () { chip.remove(); }); chip.appendChild(chipAvatar); chip.appendChild(chipName); chip.appendChild(closeIcon); chipContainer.appendChild(chip); } // Handle form submission const addChipForm = document.getElementById( "addChipForm"); addChipForm.addEventListener( "submit", function (event) { event.preventDefault(); const nameInput = document.getElementById( "nameInput"); const name = nameInput.value.trim(); if (name !== "") { createChip(name); // Use null if profile icon is empty nameInput.value = ""; }}); Output: Comment More infoAdvertise with us Next Article How to Create a Chips Component using HTML CSS & JavaScript ? kvvik2020 Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League Geeks Premier League 2023 Similar Reads How to create a Snackbar using HTML, CSS & JavaScript? Snackbar or toast notifications are brief messages that pop up on a webpage to convey information or feedback to users. They are versatile tools for signaling different states, like success, error, or invalid input, and can appear at various positions on the screen.Approach:First, create a basic HTM 3 min read How to create a Color Generator using HTML CSS and JavaScript ? In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color 6 min read Create a Coin Flip using HTML, CSS & JavaScript We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used 4 min read How to create Hex color generator using HTML CSS and JavaScript? Hex color codes are six-digit combinations representing the amount of red, green, and blue (RGB) in a color. These codes are essential in web design and development for specifying colors in HTML and CSS. The hex color generator provides the hex code for any selected color, making it a valuable tool 2 min read Create ChatGPT Template using HTML CSS & JavaScript Create a customizable ChatGPT interface using HTML, CSS, and JavaScript. Implement features like message input, display area, and toggle buttons for themes. Customize styles and interactions to suit your preferences and requirements. Prerequisites:HTMLCSSJavaScriptApproachCreate a new HTML file and 7 min read How to Create Section Counter using HTML and CSS ? Section counter is like a card and is useful for webpage footer. It contains details about the company. In this article, we will introduce some predicted data about some companies. We divide this article into two sections, in the first section we will create the normal structure then we will work on 3 min read How to create a Pie Chart using HTML & CSS ? A Pie Chart is a type of graph that displays data in a circular shape and is generally used to show percentage or proportional data. The percentage represented in the graph by each category is provided near the corresponding slice of one portion of the pie chart. These charts are very good for displ 2 min read Create a Simon Game using HTML CSS & JavaScript In this article, we will see how to create a Simon Game using HTML, CSS, and JavaScript. In a Simon game, if the player succeeds, the series becomes progressively longer and more complex. Once the user is unable to repeat the designated order of the series at any point, the game is over.Prerequisite 5 min read How to Create Contact Chips using CSS? Contact chips are UI elements that provide user information in a condensed, readable visual format. Usually, these chips have the user's name, avatar, and an edit or close icon. They are widely used in contact lists, search fields, and tagging systems. Including contact chips can enhance user engage 2 min read Create GeeksforGeeks Clone Using HTML CSS & JavaScript In this article, we'll make a clone of the GeeksforGeeks website. The clone includes home, about, courses, and contact pages. On the home page, we've added sections like categories, features, testimonials, and FAQs, similar to the GFG website. We named our clone GeeksforGeeks 2.0 to avoid copyright 15+ min read Like