Set a Default Radio Button in HTML

You will learn how HTML radio groups work and how to choose their initial selection with the checked attribute. You will also see why radio buttons need a shared name, how browsers handle multiple defaults, and when JavaScript should update a selection instead.

Radio buttons represent a choice from a mutually exclusive group: a user can select one option from that group.

To make an option selected when the page first loads, add the Boolean HTML attribute checked to that radio input:

<input type="radio" name="imgsel" value="small" checked>

The shared name attribute defines the group. Radio buttons with the same name belong together, so selecting one unselects the others.

The checked attribute describes the control's initial, default state in the HTML document. It is useful when an application has a sensible default choice, such as a default delivery method or display size.

For accessible forms, each radio button should also have a visible text label associated with it using label and id.

Think of a radio group as a row of preset buttons on a car radio. Every button belongs to the same station selector, but only one can be pressed in at a time.

• name is the label on the selector that says which buttons belong together.
• value is the information sent when a particular button is chosen.
• checked is the button that starts pressed when the page opens.

If two buttons in the same group are marked checked in the HTML, the browser resolves the conflict and only one ends up selected. Do not rely on that behavior; explicitly mark only the intended default.

Use checked directly on the radio input that should start selected.

<form>
  <label>
    <input type="radio" name="imgsel" value="small" checked>
    Small image
  </label>

  <label>
    <input type="radio" name="imgsel" value="medium">
    Medium image
  </label>

  <label>
    <input type="radio" name="imgsel" value="large">
    Large image
  </label>
</form>

When this page loads, Small image is selected.

Important attributes

A version with explicit labels is often easier to maintain:

<input id="size-small" type="radio" name="imgsel" value="small" checked>
<label for="size-small">Small image</label>

<input id="size-large" type="radio" name="imgsel" value="large">
<label for="size-large">Large image</label>

Clicking either label selects its associated radio button.

Consider this form:

<form action="/preview" method="get">
  <label><input type="radio" name="theme" value="light" checked> Light</label>
  <label><input type="radio" name="theme" value="dark"> Dark</label>
  <button type="submit">Save</button>
</form>

1. The browser reads the first input and creates a radio button in the theme group.
2. It sees checked, so the light radio button is initially selected.
3. The browser reads the second input. Its name is also theme, so it joins the same group.
4. If the user selects Dark, the browser automatically clears the selection from Light.
5. If the user submits without making a change, the form sends theme=light in the request.
6. If the user selects Dark before submitting, the form sends theme=dark instead.

Only the currently selected radio button contributes its name=value pair during form submission.

Radio buttons work well when users must choose exactly one option from a small, known set.

• Shipping forms: Start with “Standard delivery” selected.
• Settings pages: Default a theme to “Use system setting.”
• Image tools: Preselect a common output size such as “Medium.”
• Checkout flows: Select a preferred payment method when appropriate.
• Search filters: Choose “Most relevant” as the initial sorting option.
• Setup wizards: Provide a recommended configuration while still allowing users to change it.

Choose a default only when it is reasonable. For a sensitive decision, such as accepting optional marketing messages, it is often better to require an explicit user choice.

In real projects, the initial selection may come from server-rendered data, a saved user setting, or application state.

Server-rendered conditional default

A template engine commonly adds checked only when a stored value matches an option:

<input
  type="radio"
  name="plan"
  value="pro"
  checked
>

The exact conditional syntax depends on the server framework, but the rendered HTML should contain checked on only one radio in a group.

Updating selection with JavaScript

Use the DOM property when the default must change after the page has loaded:

<input id="monthly" type="radio" name="billing" value="monthly" checked>
<input id="yearly" type="radio" name="billing" value="yearly">

<script>
  document.querySelector('#yearly').checked = true;
</script>

Setting .checked = true selects #yearly and clears the other radio buttons in the same named group.

Validation pattern

For a required decision, put required on one radio button in the group:

<label><input type="radio" name="contact" value="email" required> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>

If no default is selected, the browser prevents submission until the user chooses one. If a radio is already checked, the group already satisfies required.

Giving each radio button a different name

This creates separate groups, allowing multiple options to be selected:

<!-- Incorrect for one-choice behavior -->
<input type="radio" name="small" value="small">
<input type="radio" name="large" value="large">

Use the same name for all choices in one group:

<input type="radio" name="size" value="small">
<input type="radio" name="size" value="large">

Using selected instead of checked

selected belongs to an <option> inside a <select>, not to radio buttons:

<!-- Incorrect -->
<input type="radio" name="size" value="small" selected>

Use checked:

<input type="radio" name="size" value="small" checked>

Marking multiple options as checked

<!-- Avoid this -->
<input type="radio" name="size" value="small" checked>
<input type="radio" name="size" value="large" checked>

A group should have zero or one intended default. Mark only one option with checked.

Omitting useful value attributes

A selected radio without a meaningful value gives the server less useful data.

<!-- Less useful -->
<input type="radio" name="imgsel" value="" checked>

Use a meaningful value:

<input type="radio" name="imgsel" value="medium" checked>

Changing only the HTML attribute with JavaScript

For a live page, use the property:

radio.checked = true;

This updates the current selection. The checked HTML attribute primarily represents the initial default state.

Radio buttons versus checkboxes

Use radio buttons when options are mutually exclusive:

<label><input type="radio" name="format" value="pdf" checked> PDF</label>
<label><input type="radio" name="format" value="csv"> CSV</label>

Use checkboxes when choices are independent:

<label><input type="checkbox" name="features" value="email"> Email alerts</label>
<label><input type="checkbox" name="features" value="sms"> SMS alerts</label>

Both checkboxes can be selected, while only one format radio button can be selected.

<!-- One radio group with a default choice -->
<label>
  <input type="radio" name="groupName" value="optionA" checked>
  Option A
</label>
<label>
  <input type="radio" name="groupName" value="optionB">
  Option B
</label>

• Use checked to select a radio button by default.
• Give every radio in one choice set the same name.
• Give each option a distinct, meaningful value.
• Add checked to only one intended default per group.
• Use selected only for <option> elements in <select>.
• In JavaScript, change a live selection with element.checked = true.
• Associate text with controls using a wrapping <label> or matching label for and input id.
• Selected radio buttons submit only the selected option's name=value pair.

How do I set a radio button as checked by default in HTML?

Add the checked attribute to the input:

<input type="radio" name="color" value="blue" checked>

Can more than one radio button be checked at once?

Not when they have the same name. A radio group is designed to have one active choice. Mark only one option as the intended default.

Why can I select multiple radio buttons on my page?

They probably have different name values. Use the same name for options that belong to one group.

Is checked="checked" valid?

Yes. checked is a Boolean attribute, so modern HTML usually uses the shorter form: checked.

Should I use checked or selected for radio buttons?

Use checked. The selected attribute is for <option> elements in a <select> control.

How do I change the selected radio button with JavaScript?

Set the input's .checked property:

document.querySelector('#dark-theme').checked = true;

Does a default radio button get sent with a form?

Yes. If it remains selected at submission, its name and value are submitted. For example, name="size" value="medium" sends size=medium.

• HTML forms — Radio buttons are form controls that collect user input.
• Checkboxes — Similar controls, but intended for independent multiple selections.
• <select> elements — A compact alternative for selecting one option from a list.
• HTML Boolean attributes — Explains attributes such as checked, required, and disabled.
• Form validation — Use required when a user must choose a radio option.
• Labels and accessibility — Proper labels make controls easier to use with clicks, keyboards, and assistive technology.
• JavaScript DOM properties — .checked changes an input's current state after the document loads.