How to Create a Chips Component using HTML CSS & JavaScript ?
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:
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.w3wiki.net/gfg-gg-logo.svg" alt = "Error in Loading" > < h1 >w3wiki</ 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 ; } #addC hipForm 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:
Contact Us