27. Radio Buttons vs Checkboxes (Radio vs Checkbox)

Explanation

1. Radio button (type="radio"):

• Used when you must choose only one from several options (for example Gender: Male/Female).
• Golden rule: All the radio buttons in a group must have the same name attribute! If the name is different, both will be selected together, which is a big bug.

2. Checkbox (type="checkbox"):

• The user can tick multiple options (Multiple Choices) at the same time (for example Hobbies: Cricket, Music, Coding).

Golden rules

• Always keep the same name="gender" in radio buttons.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px; font-size: 13px;">
  <!-- Radio Button (only 1 can be chosen) -->
  <label style="font-weight: bold;">Select gender (Radio - only one):</label><br>
  <label><input type="radio" name="gender" value="m" checked> Male</label> &nbsp;
  <label><input type="radio" name="gender" value="f"> Female</label><br><br>

  <!-- Checkbox (many can be chosen) -->
  <label style="font-weight: bold;">Hobbies (Checkbox - more than one):</label><br>
  <label><input type="checkbox" name="hobbies" value="cricket" checked> Cricket</label> &nbsp;
  <label><input type="checkbox" name="hobbies" value="music"> Music</label> &nbsp;
  <label><input type="checkbox" name="hobbies" value="coding" checked> Coding</label>
</body>
</html>

Run & edit this in the live editor

Quick quiz

In a group of radio buttons, how do you make sure the user can choose only one option?

1. By giving all of them the same id
2. By giving all of them the same name
3. By giving all of them the same value
4. By adding an only-one attribute