Practical guide

HTML radio button groups and what they send

We clicked radio groups in three browsers and posted them to our form backend to see what arrives, what goes missing and what a screen reader is told.

The short answer. A radio button is an input with type="radio". Every radio with the same name is one group, and the form sends only the checked one as name=value. In our test on 3 November 2026, a group with nothing picked was missing from the request in 3 of 3 browsers, so your server never sees an empty answer.

Formgong

HTML radio button groups and what they send
HTML radio button groups and what they send

Why does a radio answer go missing?

You add a “Which plan?” question to your form, a visitor skips it, and the submission arrives without the question at all. Not blank, not “none”, just absent. Another visitor ticks “Gift wrap: Yes” and then “Card: Yes”, and the first answer quietly unticks itself. A third reads your form with a screen reader and hears “radio button, not checked” three times with no idea what the question was.

Each of these follows from a small rule about how radio buttons group and what they send. We built a form with the common mistakes in it, clicked through it in Chromium 153, Firefox 155 and WebKit 26.6, and posted it to a local copy of Formgong's form backend so we could see the exact request and the stored row.

What does a radio group send?

The browser sends one pair for each group, name=value of the radio that is checked. If none is checked, the group sends nothing. The name is what ties the options together, so it has to be the same on every option of one question and different between questions.

Radio groups clicked in Chromium, Firefox and WebKit and posted to a local Formgong endpoint, 3 November 2026. Each row held in 3 of 3 browsers.
CaseWhat happened
Nothing chosen in the plan groupNo plan in the request at all, in 3 of 3 browsers
Group with checked on Email, not touchedreply=email, so a default always looks like an answer
required on Basic only, nothing chosenBlocked in 3 of 3: “Please select one of these options.” (WebKit: “Select one of these options”)
required on Basic only, Team chosenSent plan=team: one required radio covers the whole group
Option without a value attribute chosenreply=on in 3 of 3
Two questions sharing one name, both answered1 of 2 answers stayed checked; only extra=card-yes was sent
Click on the word “Studio”, not the circleplan=studio sent: the label is part of the click target

Three rows are worth acting on. A missing group means your server code has to treat “no field” as “no answer”, the same way it treats an unticked checkbox, which our article on HTML input types also measured. A radio without a value sends the word on, which tells you nothing, so give every option a short value that will still make sense in your spreadsheet next year. And two questions that share a name become one question, which is easy to do when you copy a block and forget to rename it.

How do you make a radio group required?

Put required on at least one radio in the group. In our test it sat on Basic only, and the browser still refused to send the form until any of the three options was picked. Choosing Team satisfied it. Putting required on every option does the same job and survives someone deleting the first option later, so that is the safer habit.

A checked default also satisfies required, because the group already has an answer. That is fine for something like “How should we reply?”, where Email is a sensible guess. It is a bad idea for a survey score or a plan choice, because a visitor who never looked at the question becomes indistinguishable from one who chose the default. Leave those unchecked and required.

The browser check only stops people. A script posting to your endpoint skips it entirely, which our guide to server-side form validation walks through. When we sent the same form without plan straight from a script, the endpoint with no checks stored it, and the endpoint with a required check on plan refused it with a 422.

How do keyboard and screen reader users get through a radio group?

With the keyboard, a radio group is one stop, not three. We pressed Tab from the name field, and focus went to Basic, then straight to the next group and the one after, landing on 1 radio per group in all three browsers. Inside the group, the arrow keys move between options and select them as they go: ArrowDown on Basic moved focus to Studio and checked it. Formspree's radio button guide tells readers to move between radio buttons with Tab and select with the Spacebar, which is not what any of the three browsers did. If you test your form with the keyboard, use the arrows inside a group.

A screen reader needs two names, the question and the option. In Chromium's own accessibility tree, the plan group came through as a group named “Which plan do you want?” holding radios named “Basic”, “Studio” and “Team”, with the checked one marked. That name comes from the legend; our article on the HTML fieldset covers what else the grouping does. The bare radios we added without labels, “Size: S M” as plain text, came through as two radios with empty names. Visible text next to a radio is not a label. Tie each option to its words with <label for> or by wrapping the radio in the label, which also makes the word itself clickable, as the Studio row in the table shows. The HTML label article measures that click area.

How does a form backend handle a missing radio answer?

The markup below is a radio group set you can paste into a form that posts to Formgong, a form backend that sends each submission to your email or Telegram. The HTML form generator writes the same pattern for you: each choice question becomes radios that share a name inside a fieldset whose legend is the question.

The part a form backend can add is the server-side check. In Formgong you can mark a field as required under Settings, Protection, Field checks, and a submission where the radio group is missing is refused with a 422 that names the field, which is what our script post got. Neither of the two competitor guides we read on 3 November 2026 goes there. Static Forms' guide to required radio buttons, dated 19 October 2026, builds a local checker and says it does not configure or test delivery, and Formspree's radio button guide from 11 April 2025 stops at the browser's required and a JavaScript alert. There is a limit on our side too. Formgong checks that an answer is present, not that it is one of your options, so a script can still post plan=free-forever. If the answer sets a price or a permission, compare it with your own list before you act on it. The HTML forms docs list the fields Formgong reads.

radio-groups.html
<fieldset>
  <legend>Which plan do you want?</legend>
  <input type="radio" id="plan-basic" name="plan" value="basic" required>
  <label for="plan-basic">Basic</label>
  <input type="radio" id="plan-studio" name="plan" value="studio">
  <label for="plan-studio">Studio</label>
  <input type="radio" id="plan-team" name="plan" value="team">
  <label for="plan-team">Team</label>
</fieldset>

<fieldset>
  <legend>How should we reply?</legend>
  <label><input type="radio" name="reply" value="email" checked> Email</label>
  <label><input type="radio" name="reply" value="phone"> Phone</label>
</fieldset>

Did a radio group behave differently for you?

If your radio buttons send something other than what this test showed, in another browser or a framework component, write to support@formgong.com. We will run your case and add it to the table.

Frequently asked questions

What does a radio button send when none is selected?

Nothing. The group's name is missing from the request, in all three browsers we tested. Treat a missing name as no answer on the server.

Do I need required on every radio button?

No. One required radio makes the whole group required. Putting it on every option is safer when the list is edited later.

Why does a radio button send "on"?

The option has no value attribute, so the browser sends the default value on. Give every radio its own value.

How do you move between radio buttons with the keyboard?

Tab moves into and out of the group as one stop. The arrow keys move between options and select them.

Sources and documentation

Official references for this guide: Formgong: HTML input types and what each one sends, Formgong: Server-side form validation and what it catches. HTML forms, where data is stored.

Rate this guide

Your rating

We read every rating. A comment appears here only after we approve it.

← Back to the blog