{
    "id": "bhaskar/animated-radio-group",
    "kind": "component",
    "title": "Animated Radio Group",
    "summary": "A plan picker of round radios where the blue dot springs in on selection, with arrow key navigation and a disabled option.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/animated-radio-group/",
    "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": "Toggles and inputs",
        "html": "<div class=\"rg\" role=\"radiogroup\"><label><input type=\"radio\" name=\"pl\"><i></i>Starter, free</label><label><input type=\"radio\" name=\"pl\" checked><i></i>Pro, $12/mo</label><label><input type=\"radio\" name=\"pl\"><i></i>Team, $29/mo</label><label class=\"dis\"><input type=\"radio\" name=\"pl\" disabled><i></i>Legacy plan</label></div>",
        "css": ".rg{display:grid;gap:14px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1;font-size:14.5px}.rg label{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}.rg input{position:absolute;opacity:0;pointer-events:none}.rg i{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid #4a4a4a;transition:border-color .25s,transform .3s cubic-bezier(.3,1.8,.5,1)}.rg i::after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:#0a84ff;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.8,.5,1)}.rg input:checked+i{border-color:#0a84ff}.rg input:checked+i::after{transform:scale(1)}.rg input:focus-visible+i{box-shadow:0 0 0 3px rgba(10,132,255,.3)}.rg label:active i{transform:scale(.88)}.rg .dis{opacity:.45;cursor:default}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}