How to Create a Chips Component using HTML CSS & JavaScript ?

Last Updated : 30 Oct, 2023

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:

Screenshot-2023-10-19-173635

Prerequisites

Approach

Create 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 = ""; 
}});