Radio Button in HTML

Radio button in HTML is used when the user must choose one option from a group. It is common in forms where only one answer is valid, such as gender, plan type, payment method, delivery option, quiz answer, experience level, theme choice, or yes/no selection. Radio buttons are small controls, but they have important rules that beginners often miss.

A radio button is created with <input type="radio">. The key idea is grouping. Radio buttons belong to the same group when they share the same name attribute. Inside one group, the browser allows only one radio button to be selected at a time.

Basic Syntax of Radio Button in HTML

Each radio button should have a value, a name, an id, and a connected label. The value is the data submitted if that option is selected. The name groups the buttons. The id connects the specific radio button with its label.

<input type="radio" id="basic" name="plan" value="basic">
<label for="basic">Basic</label>

<input type="radio" id="pro" name="plan" value="pro">
<label for="pro">Pro</label>

<input type="radio" id="enterprise" name="plan" value="enterprise">
<label for="enterprise">Enterprise</label>

All three radio buttons use name="plan", so they are part of the same group. If the user selects Pro and then selects Enterprise, Pro becomes unselected automatically. That is the default behavior of radio groups.

Radio Button Group with Fieldset and Legend

Radio buttons should usually be grouped with <fieldset> and <legend>. The legend acts like the question for the whole group. Each label then describes one possible answer. This structure is better for accessibility and makes the form easier to understand.

<fieldset>
  <legend>Choose your experience level</legend>

  <input type="radio" id="beginner" name="level" value="beginner">
  <label for="beginner">Beginner</label>

  <input type="radio" id="intermediate" name="level" value="intermediate">
  <label for="intermediate">Intermediate</label>

  <input type="radio" id="advanced" name="level" value="advanced">
  <label for="advanced">Advanced</label>
</fieldset>

Without the fieldset and legend, a screen reader user may hear the options but not understand the question they belong to. For simple visual users, the layout may still look understandable, but semantic grouping makes the form stronger for everyone.

Radio Button Name Attribute

The name attribute is the most important radio button grouping rule. Radio buttons with the same name are connected. Radio buttons with different names are separate groups. If you accidentally give every radio button a different name, the user may be able to select all of them, which defeats the purpose of radio buttons.

Markup	Behavior
Same name value	Only one option can be selected from the group
Different name values	Each radio acts like a separate group
Missing name	Selection may work visually, but form submission is not useful
Same id values	Invalid HTML and label connection problems

Use the same name for the group, but unique ids for each option. This is a common pattern: same name, different id, different value. The name tells the browser the group. The id tells the label which specific radio button it belongs to. The value tells the server which option was chosen.

Default Selected Radio Button

The checked attribute marks a radio button as selected by default. Use it when there is a safe and expected default option. Do not use a default just to force a choice if the user really needs to make a conscious decision.

<fieldset>
  <legend>Billing Cycle</legend>

  <label>
    <input type="radio" name="billing" value="monthly" checked>
    Monthly
  </label>

  <label>
    <input type="radio" name="billing" value="yearly">
    Yearly
  </label>
</fieldset>

In this example, Monthly is selected by default. If the user does not change it and submits the form, the billing value submitted is monthly. If the user selects Yearly, the selected value changes to yearly.

Required Radio Button Group

Radio groups can be required. Adding required to one radio button in a same-name group tells the browser that one option from that group must be selected before the form can be submitted. Many developers add required to all radio buttons in the group for clarity, but the group behavior is based on the shared name.

<fieldset>
  <legend>Do you accept the terms?</legend>

  <input type="radio" id="accept-yes" name="accept_terms" value="yes" required>
  <label for="accept-yes">Yes</label>

  <input type="radio" id="accept-no" name="accept_terms" value="no">
  <label for="accept-no">No</label>
</fieldset>

This makes the browser stop submission until the user chooses either Yes or No. Server-side validation is still required because browser validation can be skipped or manipulated.

Radio Button vs Checkbox

Radio buttons and checkboxes are both selection controls, but they represent different logic. Radio buttons are for one choice from a group. Checkboxes are for independent yes/no choices or multiple selections. If the user can choose more than one option, do not use radio buttons. If the user must choose exactly one option, radio buttons are usually better than checkboxes.

Control	Selection Rule	Example
Radio button	One option from a group	Choose delivery speed
Checkbox	Zero, one, or multiple choices	Select skills
Select dropdown	One option from many choices	Choose country
Multiple select	Multiple options from a long list	Choose several tags

If there are only two options like Yes and No, radio buttons can be clearer than a checkbox because both options are visible. A checkbox works better for an independent agreement such as I accept the terms, where checked means yes and unchecked means no.

Reading Radio Button Value with JavaScript

JavaScript can read the selected radio button using a selector that looks for the checked option in the group. This is useful for dynamic pricing, quizzes, form previews, and conditional form sections.

const selectedPlan = document.querySelector('input[name="plan"]:checked');

if (selectedPlan) {
  console.log(selectedPlan.value);
}

Always check whether a selected radio button exists before reading its value. If no option is selected and you try to access selectedPlan.value, JavaScript may throw an error because selectedPlan is null.

Styling Radio Buttons

Native radio buttons are styled by the browser and operating system. Basic spacing, label layout, and grouping can be handled with CSS. Advanced custom radio buttons are possible, but they must preserve accessibility, keyboard behavior, focus visibility, and label connections.

.radio-group {
  display: grid;
  gap: 12px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

Do not hide the native radio input in a way that removes it from keyboard navigation or screen readers. A custom design that looks good but breaks form behavior is worse than a simple native control.

Common Mistakes with Radio Button in HTML

• Using different names for options that should belong to one group.
• Using the same id for multiple radio buttons.
• Forgetting labels, which makes the small radio control harder to click.
• Using radio buttons when multiple selections should be allowed.
• Forgetting value attributes, which makes submitted data unclear.
• Not grouping related radio buttons with fieldset and legend.

Radio buttons are best when the form question has one valid answer from a small set of visible options. Use the same name for the group, unique ids for each option, clear labels, meaningful values, and fieldset with legend when the group needs a question. That gives you correct behavior, clean submission data, and better accessibility.

Can radio buttons have multiple selections?

No. Radio buttons with the same name allow only one selected option. Use checkboxes when multiple selections are allowed.

What happens if radio buttons have different names?

They become separate groups, so the browser may allow more than one option to be selected.

When Radio Buttons Are the Best Choice

Radio buttons work best when the number of options is small and all options should be visible at the same time. If a user is choosing between Monthly and Yearly billing, Light and Dark theme, Pickup and Delivery, or Beginner, Intermediate, and Advanced, radio buttons make the decision clear. The user does not need to open a dropdown to discover the available choices.

Radio buttons are not ideal for very long lists. If a form has fifty countries, fifty departments, or hundreds of products, a select dropdown or searchable picker is better because it saves space. The strength of radio buttons is immediate visibility, so use them when showing every option helps the user make a faster decision.

Radio Buttons and Submitted Data

When a radio group is submitted, only the selected radio button’s value is sent. Unselected radio buttons from that group are not submitted. This is different from text inputs, where each named input usually submits its current value. Because only one value is sent, every option should have a clear value that the backend can understand.

If no radio option is selected and the group is not required, the browser may submit nothing for that name. The backend should handle that case safely. For important choices, use required validation and also check the value on the server. The server should reject values that are not part of the expected list.

Radio Button Layout Tips

Place each radio option close to its label and keep the group visually organized. Vertical layouts are often easier to scan than long horizontal lines, especially on mobile screens. If the option labels are short, a horizontal layout may work, but the group should still wrap cleanly on small screens.

Radio Buttons in Real Forms

In real forms, radio buttons are often used for choices that affect the next part of the page. Selecting Delivery may show address fields, while selecting Pickup may show store locations. Selecting Student may show student ID fields, while selecting Professional may show company details. JavaScript can listen for changes and reveal the correct section.

When doing this, keep the base HTML understandable. The radio group should still have labels and a legend, and hidden sections should be managed carefully so keyboard users and screen readers do not get trapped in invisible content. Good radio button behavior is both visual and semantic.

---