{
    "id": "bhaskar/multi-select-chips",
    "kind": "component",
    "title": "Multi Select Chips",
    "summary": "Multi-select field with removable chips, a searchable dropdown with checkmarks and backspace to remove the last chip.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/multi-select-chips/",
    "stack": [],
    "tools": [
        "claude-code"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Other",
        "html": "<div class=\"ms\"><div class=\"fd\"><span class=\"ch\"></span><input class=\"ip\" placeholder=\"Search…\"><i class=\"ar\">⇅</i></div><div class=\"dd\"></div></div>",
        "css": ".ms{position:relative;width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;padding-top:70px;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.fd{width:320px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:6px 32px 6px 8px;position:relative;cursor:text;transition:border-color .2s}.fd.f{border-color:#0a84ff}.ch{display:contents}.cp{display:flex;align-items:center;gap:6px;background:#262626;border-radius:8px;padding:5px 8px;font-size:12px;animation:pop .3s cubic-bezier(.3,1.5,.5,1)}.cp u{text-decoration:none;color:#888;cursor:pointer;font-size:13px}.cp u:hover{color:#fff}@keyframes pop{from{transform:scale(.6);opacity:0}}.ip{flex:1;min-width:60px;background:none;border:0;outline:0;color:#eee;font:12px system-ui}.ar{position:absolute;right:10px;color:#777;font-style:normal;font-size:12px}.dd{width:320px;margin-top:6px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:4px;box-sizing:border-box;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}.dd.on{opacity:1;transform:none;pointer-events:auto}.op{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;font-size:12px;cursor:pointer}.op:hover{background:#262626}.op i{color:#0a84ff;font-style:normal}",
        "js": "(function(){var R=document.querySelector(\".ms\"),fd=R.querySelector(\".fd\"),ch=R.querySelector(\".ch\"),ip=R.querySelector(\".ip\"),dd=R.querySelector(\".dd\"),O=[\"Design\",\"Engineering\",\"Product\",\"Marketing\",\"Sales\",\"Support\"],S=[\"Design\",\"Engineering\"];function draw(){ch.innerHTML=\"\";S.forEach(function(s){var c=document.createElement(\"span\");c.className=\"cp\";c.innerHTML=s+\" <u>×</u>\";c.querySelector(\"u\").onclick=function(e){e.stopPropagation();S.splice(S.indexOf(s),1);draw()};ch.appendChild(c)});dd.innerHTML=\"\";var q=ip.value.toLowerCase();O.filter(function(o){return o.toLowerCase().indexOf(q)>-1}).forEach(function(o){var r=document.createElement(\"div\");r.className=\"op\";r.innerHTML=\"<span>\"+o+\"</span><i>\"+(S.indexOf(o)>-1?\"✓\":\"\")+\"</i>\";r.onclick=function(e){e.stopPropagation();var i=S.indexOf(o);if(i>-1)S.splice(i,1);else S.push(o);ip.value=\"\";draw();ip.focus()};dd.appendChild(r)})}fd.onclick=function(){dd.classList.add(\"on\");fd.classList.add(\"f\");ip.focus()};ip.oninput=draw;ip.onkeydown=function(e){if(e.key===\"Backspace\"&&!ip.value&&S.length){S.pop();draw()}};document.addEventListener(\"click\",function(e){if(!R.contains(e.target)){dd.classList.remove(\"on\");fd.classList.remove(\"f\")}});draw()})();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}