Introduction

To select a radio button by default in HTML, add the checked attribute to the radio input you want preselected. That is the whole mechanism, but it only works correctly when the radio buttons are grouped properly with the same name attribute.

The Basic HTML Pattern

Radio buttons are mutually exclusive within a group. The group is defined by the name attribute, not by layout or container structure.

1<form>
2  <input type="radio" id="option1" name="group1" value="Option 1" checked>
3  <label for="option1">Option 1</label>
4
5  <input type="radio" id="option2" name="group1" value="Option 2">
6  <label for="option2">Option 2</label>
7</form>

Because both inputs share name="group1", the browser treats them as one choice group. The one with checked starts selected when the page loads.

Only One Radio in a Group Should Be Checked

If several radio buttons in the same group are marked checked in the HTML, the browser ends up using the last one it processes. That means the markup may appear to work, but the behavior is confusing and easy to misread later.

A clean rule is:

• one group means one shared name
• at most one of those inputs gets checked

If you need several independent default choices, you actually need several separate radio groups, each with its own name.

Labels Matter for Usability

Always pair radio buttons with labels so the user can click the text, not just the tiny circle.

1<form>
2  <fieldset>
3    <legend>Shipping speed</legend>
4
5    <input type="radio" id="standard" name="shipping" value="standard" checked>
6    <label for="standard">Standard</label>
7
8    <input type="radio" id="express" name="shipping" value="express">
9    <label for="express">Express</label>
10  </fieldset>
11</form>

Using fieldset and legend also improves accessibility by giving the group a clear semantic label.

Setting the Default with JavaScript

If the default selection depends on runtime logic, you can set it in JavaScript.

1<input type="radio" id="option1" name="plan" value="basic">
2<input type="radio" id="option2" name="plan" value="pro">
3
4<script>
5  document.getElementById("option2").checked = true;
6</script>

This is useful when the default comes from user preferences, saved state, or API data. If the default is static, plain HTML is usually better because it works immediately without waiting for JavaScript.

Framework Rendering Follows the Same Rule

Even in React, Vue, Angular, or server-rendered templates, the browser behavior is still the same underneath: one radio group, one checked value.

For example, the server might render the checked state conditionally:

<input type="radio" name="theme" value="light" checked>
<input type="radio" name="theme" value="dark">

Or a component framework might bind the selected value to application state. The implementation details change, but the HTML rule stays consistent.

Choosing Whether to Preselect at All

A default selection can be helpful when:

• one option is clearly the most common
• one option is the safest or least surprising
• the form should submit a sensible choice even if the user leaves it unchanged

A default can be a bad idea when:

• you need explicit user consent
• the choice is sensitive or high-impact
• a neutral "please choose" state is more honest

So the technical answer is checked, but the UX answer may still be "do not preselect anything."

Common Pitfalls

The most common mistake is giving each radio button a different name, which turns them into separate one-option groups instead of a single choice set. Another is marking several radios in the same group as checked and then being surprised by which one wins. Developers also forget labels and fieldsets, which hurts accessibility and makes the form harder to use.

Summary

• Add checked to the radio input that should be selected by default.
• Make sure all radios in the group share the same name.
• Only one radio per group should be checked.
• Use labels and, when appropriate, fieldset and legend for accessibility.
• Default selection is a UX decision as well as an HTML attribute choice.