Runnable HTML Docs: Radio Button

Q: How do you make radio buttons in HTML?

Write one per option, give them all the same name and a different value, and put each in a : Medium . The shared name makes them one group where only one can be selected.

Q: Why can I select more than one radio button?

The buttons do not share the same name. Radio buttons form a group only through an identical name (in the same form), and only one button per group can be selected.

Q: How do I get the selected radio button value in JavaScript?

Use form.elements.size.value, where size is the group's name; it returns the selected button's value, or an empty string if none is selected. Without a form: document.querySelector('input[name="size"]:checked')?.value.

Q: How do I set a default radio button?

Add checked to one button of the group: . If several have it, the last one wins.

How to make radio buttons in HTML

Radio buttons let the reader pick exactly one option from a group. Each option is an <input type="radio">, and giving them the same name is what makes them a group. Pick a size and press Order:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s"> Small</label>
      <label><input type="radio" name="size" value="m" checked> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>
    <p><button type="submit">Order</button></p>
  </form>
</body>
</html>

The form sends one pair, size=m: the group's name and the selected button's value. The pieces:

The same name on every button of the group. Selecting one deselects the others.
A different value on each. That is what the server receives. A radio without value sends on, which tells the server nothing.
checked on the default option.
A <label> around each, so the text is clickable, and a <fieldset> with <legend> so screen readers announce the question ("Size") along with each option.

The name makes the group

Radios with different names are separate groups, and each group has its own selection. This example has two groups, plus a broken set where every radio got its own name by mistake:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio groups</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 16px; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    .broken { border-color: #dc2626; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="thin" checked> Thin</label>
    <label><input type="radio" name="crust" value="thick"> Thick</label>
  </fieldset>
  <fieldset>
    <legend>Sauce</legend>
    <label><input type="radio" name="sauce" value="tomato" checked> Tomato</label>
    <label><input type="radio" name="sauce" value="pesto"> Pesto</label>
  </fieldset>
  <fieldset class="broken">
    <legend>Broken: different names</legend>
    <label><input type="radio" name="a" value="1"> One</label>
    <label><input type="radio" name="b" value="2"> Two</label>
    <label><input type="radio" name="c" value="3"> Three</label>
  </fieldset>
</body>
</html>

Click all three in the broken group: they all stay selected and none can be turned off again, which is the worst of both worlds. Radios group by name within the same form, so two forms can each have their own name="size" group.

Required groups and no default

required on any radio in the group means one of them must be selected before the form submits. Leaving out checked makes the reader choose actively, which is right when there is no sensible default:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Required radio group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>How did you hear about us?</legend>
      <label><input type="radio" name="source" value="search" required> Search engine</label>
      <label><input type="radio" name="source" value="friend"> A friend</label>
      <label><input type="radio" name="source" value="video"> A video</label>
      <label><input type="radio" name="source" value="other"> Other</label>
    </fieldset>
    <p><button type="submit">Continue</button></p>
  </form>
</body>
</html>

Press Continue without choosing and the browser stops the submit with a message. Once any option is picked, the whole group is valid. An unselected group that is not required sends nothing at all, like an unchecked checkbox.

A click can select a radio but never deselect it. If "no answer" must be possible after a choice was made, add an explicit option for it.

Reading the selected value in JavaScript

form.elements.name returns the whole group, and its .value is the value of the selected radio (an empty string when none is). The change event fires on the radio that became selected:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selected value</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { margin-inline-end: 12px; }
    #price { font-size: 1.4em; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <form id="billing">
    <label><input type="radio" name="period" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="period" value="yearly"> Yearly</label>
  </form>
  <p>Price: <span id="price"></span></p>

  <script>
    const form = document.querySelector('#billing');
    const prices = { monthly: '12 per month', yearly: '96 per year' };
    const show = () => {
      document.querySelector('#price').textContent = prices[form.elements.period.value];
    };
    form.addEventListener('change', show);
    show();
  </script>
</body>
</html>

The listener is on the form, so it catches a change in any of its fields. Outside a form, find the selected radio with document.querySelector('input[name="period"]:checked').

Keyboard behavior

A radio group is one stop in the Tab order. Tab moves into the group, landing on the selected radio (or, when none is selected, the first one), and the arrow keys move the selection between options. Tab again leaves the group. This comes for free with real radio inputs sharing a name, and it is one more reason not to rebuild radios from <div> elements.

Styling radio buttons

accent-color recolors the native radio. appearance: none lets you draw your own circle. And because a hidden radio can still be selected through its label, a group can look like a set of cards while keeping all the radio behavior:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .accent { accent-color: #16a34a; }

    .dot {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 50%;
      vertical-align: middle;
    }
    .dot:checked { border: 6px solid #2563eb; }
    .dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

    .cards { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0 0; }
    .card { display: block; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
    .card input { position: absolute; opacity: 0; }
    .card:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
    .card:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="radio" class="accent" name="c1" checked> accent-color</label>
  <label><input type="radio" class="accent" name="c1"> accent-color</label>
  <p>
    <label><input type="radio" class="dot" name="c2" checked> Custom</label>
    <label><input type="radio" class="dot" name="c2"> Custom</label>
  </p>
  <fieldset class="cards">
    <legend>Plan</legend>
    <label class="card"><input type="radio" name="plan" value="free" checked> Free</label>
    <label class="card"><input type="radio" name="plan" value="pro"> Pro</label>
    <label class="card"><input type="radio" name="plan" value="team"> Team</label>
  </fieldset>
</body>
</html>

The custom circle is just a thick border when checked. The cards hide the input with opacity: 0 rather than display: none, so it stays focusable and the arrow keys still work, and :has(input:checked) styles the selected card. :has() works in current Chrome, Firefox and Safari.

Radio, checkbox or select?

Use	When
Radio buttons	One choice from a few options (about 2 to 6) that should all be visible
Checkboxes	Any number of choices, including none
A `<select>`	One choice from a long list, such as countries (see HTML select)

Common mistakes

Different names in one group. Every radio can be selected and none can be cleared.
No value. The server receives on whatever was picked.
Hiding the input with display: none in a custom design. It can no longer be focused or used with the keyboard.
No <fieldset> and <legend>. Screen readers announce "Small, radio button" with no question to go with it.
A single radio button for an "I agree" box. It can never be unticked; use a checkbox.
checked on several radios of one group. Only the last one ends up selected.

Frequently Asked Questions

How do you make radio buttons in HTML?

Write one <input type="radio"> per option, give them all the same name and a different value, and put each in a <label>: <label><input type="radio" name="size" value="m"> Medium</label>. The shared name makes them one group where only one can be selected.

Why can I select more than one radio button?

The buttons do not share the same name. Radio buttons form a group only through an identical name (in the same form), and only one button per group can be selected.

How do I get the selected radio button value in JavaScript?

Use form.elements.size.value, where size is the group's name; it returns the selected button's value, or an empty string if none is selected. Without a form: document.querySelector('input[name="size"]:checked')?.value.

How do I set a default radio button?

Add checked to one button of the group: <input type="radio" name="plan" value="free" checked>. If several have it, the last one wins.

Can you uncheck a radio button?

Not by clicking it; a click only selects. Offer a "None" option, reset the form, or set button.checked = false in JavaScript. If the choice should be optional and removable, a checkbox or a select may fit better.

Related concepts