HTML Radio Button: Syntax, Usage, and Examples

An HTML radio button is an input control that lets a user pick exactly one option from a set. You’ve seen it a million times in forms, “Choose a plan,” “Select your size,” and “Pick your favorite snack.”

How to Use an Radio Button

You create an radio button with an <input> element where type="radio". Radio buttons work as a group when they share the same name. That shared name is the rule that says “only one of these can be selected.”

Here’s the basic syntax:

<inputtype="radio"name="groupName"value="optionValue" />

To make radio buttons usable, you almost always add:

• id so a <label> can connect to the input
• value so the form submits a meaningful value
• checked if you want a default selection
• required if the user must choose one option

A simple group looks like this:

<form>
<p>Choose a delivery speed:</p>

<inputtype="radio"id="standard"name="delivery"value="standard"checked />
<labelfor="standard">Standard (3–5 days)</label>

<br />

<inputtype="radio"id="express"name="delivery"value="express" />
<labelfor="express">Express (1–2 days)</label>
</form>

The key rules, in plain English

1) Same name means same group

If you want “one choice only,” every radio input in that group must share the same name.

<inputtype="radio"name="size"value="s" />
<inputtype="radio"name="size"value="m" />
<inputtype="radio"name="size"value="l" />

If you accidentally give them different names, the browser treats them as separate groups, and the user can select multiple at once, which defeats the whole point.

2) Use <label> so the option is easy to click

Clicking the tiny circle is annoying. A label lets users click the text instead.

<inputtype="radio"id="plan-basic"name="plan"value="basic" />
<labelfor="plan-basic">Basic</label>

3) Give each radio a value

When the form submits, the server receives the group name and the selected value. Without value, you can end up with confusing or useless submissions.

4) Use fieldset and legend for questions

A set of radio buttons is often one question. fieldset groups them, and legend acts like a title. This improves clarity and accessibility.

<form>
<fieldset>
<legend>Pick your preferred contact method</legend>

<inputtype="radio"id="contact-email"name="contact"value="email"required />
<labelfor="contact-email">Email</label>

<br />

<inputtype="radio"id="contact-sms"name="contact"value="sms" />
<labelfor="contact-sms">Text message</label>
</fieldset>
</form>

When to Use an Radio Button

Radio buttons shine when the user must choose one option and only one option. Here are common cases where an radio button is the right tool.

Pick one option from a small list

If the list is short and you want all options visible, radio buttons beat a dropdown. A dropdown hides choices, while radio buttons show them right away.

Examples:

• Subscription plan: Basic, Pro, Team
• Shipping speed: Standard, Express
• Meal preference: Vegetarian, Vegan, No preference

Select a “mode” that changes how the form behaves

Some forms change based on a single choice. An radio button group can drive that decision.

Example:

• “Personal” vs “Business” account
• “Pay monthly” vs “Pay yearly”
• “Use dark theme” vs “Use light theme”

You can also connect radio buttons to JavaScript to show or hide parts of the form.

Answer a single-choice survey question

Surveys often need one selection per question. Radio buttons make that obvious. Checkboxes can confuse users because checkboxes imply “select all that apply.”

Choose between mutually exclusive settings

“Enable notifications” and “Disable notifications” could be a single toggle, but if you have three or four exclusive options, radio buttons are clearer.

Example:

• Notifications: Off, Mentions only, All messages

Examples of Radio Buttons

Below are several examples you can copy and tweak.

1) A simple survey question with fieldset and legend

<form>
<fieldset>
<legend>How often do you code each week?</legend>

<inputtype="radio"id="freq-1"name="coding-frequency"value="1-2"required />
<labelfor="freq-1">1–2 days</label>

<br />

<inputtype="radio"id="freq-2"name="coding-frequency"value="3-5" />
<labelfor="freq-2">3–5 days</label>

<br />

<inputtype="radio"id="freq-3"name="coding-frequency"value="6-7" />
<labelfor="freq-3">6–7 days</label>
</fieldset>

<buttontype="submit">Submit</button>
</form>

What this shows:

• A radio group acts like one question
• required forces one selection
• Labels make the whole line clickable

2) Plan selection cards (radio buttons that look like cards)

Radio buttons don’t have to look like tiny circles. You can visually hide the input and style the label like a card. The input still works, but the UI feels modern.

<style>
.plan {
display: block;
border:1px solid#ccc;
padding:12px;
margin:10px0;
cursor: pointer;
  }

input[type="radio"] {
position: absolute;
opacity:0;
  }

input[type="radio"]:checked +label {
border-color:#333;
font-weight:600;
  }
</style>

<form>
<fieldset>
<legend>Select a plan</legend>

<inputtype="radio"id="basic"name="plan"value="basic"checked />
<labelclass="plan"for="basic">
      Basic<br />
      Good for casual learning
</label>

<inputtype="radio"id="pro"name="plan"value="pro" />
<labelclass="plan"for="pro">
      Pro<br />
      For people building projects weekly
</label>

<inputtype="radio"id="team"name="plan"value="team" />
<labelclass="plan"for="team">
      Team<br />
      Share progress with coworkers
</label>
</fieldset>

<buttontype="submit">Continue</button>
</form>

This pattern is popular on pricing pages because it’s easy to scan and hard to misclick.

3) Using radio buttons with JavaScript to show different fields

Here’s a simple example where the user selects a contact method, and JavaScript shows the matching input field.

<form>
<fieldset>
<legend>How should we contact you?</legend>

<inputtype="radio"id="via-email"name="contactMethod"value="email"checked />
<labelfor="via-email">Email</label>

<inputtype="radio"id="via-phone"name="contactMethod"value="phone" />
<labelfor="via-phone">Phone</label>
</fieldset>

<divid="emailField">
<labelfor="email">Email address</label>
<inputid="email"type="email"name="email" />
</div>

<divid="phoneField"style="display:none;">
<labelfor="phone">Phone number</label>
<inputid="phone"type="tel"name="phone" />
</div>

<buttontype="submit">Send</button>
</form>

<script>
const emailField =document.getElementById("emailField");
const phoneField =document.getElementById("phoneField");
const radios =document.querySelectorAll('input[name="contactMethod"]');

  radios.forEach((radio) => {
    radio.addEventListener("change",(event) => {
if (event.target.value ==="email") {
        emailField.style.display ="block";
        phoneField.style.display ="none";
      }else {
        emailField.style.display ="none";
        phoneField.style.display ="block";
      }
    });
  });
</script>

This is a friendly way to keep forms short. People see only what they need.

4) A “Yes/No” question, with a default disabled state

Sometimes you want the user to actively choose instead of accepting a default. You can omit checked and use required.

<form>
<fieldset>
<legend>Do you want to receive product updates?</legend>

<inputtype="radio"id="updates-yes"name="updates"value="yes"required />
<labelfor="updates-yes">Yes</label>

<br />

<inputtype="radio"id="updates-no"name="updates"value="no" />
<labelfor="updates-no">No</label>
</fieldset>

<buttontype="submit">Save</button>
</form>

The browser will prevent submission until one option is selected.

Learn More About Radio Buttons

Radio buttons vs checkboxes

This is a classic mix-up:

• Use radio buttons when only one choice is allowed.
• Use checkboxes when multiple choices are allowed.

A simple memory trick:

Radio buttons are like old car radios, one station at a time. Checkboxes are like a checklist, you can tick several.

Radio buttons vs a <select> dropdown

A dropdown saves space, but it hides options. Radio buttons take more space, but they show every choice.

Pick radio buttons when:

• There are 2–7 options
• You want fast scanning
• The decision is important enough to keep visible

Pick a dropdown when:

• There are many options
• Space is tight
• The options are less important to compare

The checked attribute and default choices

Only one radio per group should have checked. If you set checked on more than one with the same name, the browser will still end up with just one selected, but you’re leaving the result up to the browser.

This is a good default:

<inputtype="radio"name="theme"value="light"checked />
<inputtype="radio"name="theme"value="dark" />

Validation with required

Put required on one radio in the group, and the browser treats the entire group as required. You don’t need it on every radio.

<inputtype="radio"name="payment"value="card"required />
<inputtype="radio"name="payment"value="paypal" />

Accessibility tips that actually help

• Use fieldset and legend for the question prompt.
• Use labels for every option.
• Keep option text clear and specific.

Avoid placeholder-only prompts like “Choose one.” That’s like a road sign that says “Road.” Thanks, I guess.

Styling radio buttons

You can style the label, or you can build custom radio visuals. If you go custom, keep the actual <input> in the DOM so keyboard navigation still works.

Keyboard behavior matters:

• Tab moves into the group
• Arrow keys move between options in the same group (in many browsers)
• Space selects the focused option

Common mistakes with radio buttons

Giving each radio a different name

That turns your “pick one” into “pick as many as you want,” which can break your form logic.

Skipping values

Without value, your backend might receive odd data. Always set it.

No label

Tiny click targets frustrate users, especially on mobile.

Using radio buttons for long lists

If the list looks like it belongs in a phone book, use a dropdown or an autocomplete instead.