# 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.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/animated-radio-group/
- Licence: CC BY 4.0 (reuse with credit)

## Code

`index.html`

```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`

```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}
```

---
Also available as JSON: https://ownlyplans.com/bhaskar/animated-radio-group/?format=json
MCP server: https://ownlyplans.com/mcp