Animated Radio Group
A plan picker of round radios where the blue dot springs in on selection, with arrow key navigation and a disabled option.
Preview and code
index.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>
styles.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}