라디오 버튼

<fieldset class="rg">
  <legend>플랜</legend>
  <label class="rl"><input type="radio" name="plan" value="basic"><span class="dot"></span>베이직</label>
  <label class="rl"><input type="radio" name="plan" value="pro" checked><span class="dot"></span>프로</label>
  <label class="rl"><input type="radio" name="plan" value="team"><span class="dot"></span>팀</label>
</fieldset>

.rg{border:0;margin:0;padding:0;width:min(160px,88%);display:grid;gap:10px}
.rg legend{font-size:11px;color:var(--muted);padding:0 0 8px}
.rl{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--fg);cursor:pointer}
.rl input{position:absolute;opacity:0;width:1px;height:1px}
.dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;display:grid;place-items:center;background:var(--surface);transition:border-color .15s}
.dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .15s}
input:checked + .dot{border-color:var(--accent)}
input:checked + .dot::after{transform:scale(1)}

const radios = [...document.querySelectorAll('input[name=plan]')];
let auto = true;
radios.forEach((r) => r.addEventListener('click', () => auto = false));
let i = 1;
setInterval(() => { if (!auto) return; i = (i + 1) % radios.length; radios[i].checked = true; }, 1500);