📝 Phase 8 · Forms🟢 BeginnerMODULE 31

Radio Buttons

⏱️ 12 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress89%

🎯 What you'll learn: How radio buttons group with a shared name, why only one can ever be selected per group, and how to set a sensible default.

Section 1

Basic Radio Group

type="radio" creates a mutually exclusive choice. All radios that should belong to the same group must share the exact same name — that's what links them together.

radio-basic.html

HTML

<input type="radio" id="yes" name="reply" value="yes">
<label for="yes">Yes</label>

<input type="radio" id="no" name="reply" value="no">
<label for="no">No</label>

Yes No

Section 2

Setting a Default Selection

Just like checkboxes, radios support the checked attribute — but since only one radio per group can be selected, only one should carry it.

radio-default.html

HTML

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

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

⚠️

Only one checked per group

If you accidentally set checked on two radios in the same name group, the browser will only visually honor the last one — don't rely on that, just avoid it.

Section 3

Radio Groups With fieldset

Wrapping a radio group in <fieldset> with a <legend> gives it an accessible group label — screen readers announce the legend before reading each option.

radio-fieldset.html

HTML

<fieldset>
  <legend>Preferred contact method</legend>
  <input type="radio" id="email-c" name="contact" value="email" required>
  <label for="email-c">Email</label>

  <input type="radio" id="phone-c" name="contact" value="phone" required>
  <label for="phone-c">Phone</label>
</fieldset>

Preferred contact method Email Phone

Note that required only needs to appear on one radio in the group for the browser to enforce that at least one is selected.

🧩 Knowledge Check — Lesson 31

5 questions to test your radio button knowledge.

1. What links radio buttons into the same mutually-exclusive group?

2. How many radio buttons in one group can be selected at once?

3. What element/tag pairing gives a radio group an accessible label?

4. Where should the required attribute go for a required radio group?

5. If two radios in the same group both have checked, what happens?

💪

Coding Challenge — Lesson 31

Apply what you learned · Beginner Level

Challenge: Build a Payment Method Picker

Build a fieldset "Choose Payment Method" containing 3 radios sharing the name "payment" (Wise, Bank Transfer, Cash), with Wise pre-selected via checked, and required set on at least one radio.

💡 Show hints if you're stuck

All three: name="payment", distinct value each.

Finished this lesson?

Mark it complete to track your progress.

Module 31 of 62Phase 8 — Forms

Radio Buttons

Basic Radio Group

Setting a Default Selection

Radio Groups With fieldset

Lesson 31 Complete!