Design Atlas
한국어
▣ UI components

Radio button

라디오 버튼

A round control where picking one option automatically clears every other option in the same group.

Also known as: Radio groupOption button
···
html
<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>
css
.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)}
js
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);

Wrapping a group of <input type="radio"> elements sharing a name in a <fieldset>/<legend> tells a screen reader what the group is for. The browser also handles arrow-key movement within a native radio group for free.

The difference from a checkbox is the cardinality already covered; the relationship to a segmented control or a <select> is about option count. Use radios for 2–5 options that should all be visible for comparison at once, a select when the list grows long, and a segmented control when you want the immediate, button-press feel of switching a state on the same screen — a filter or view toggle.

Leaving nothing selected by default risks users skipping past the question entirely, so picking a sensible default is usually worth doing.