HTML Radio Buttons
Single-Choice Input in Forms

HTML Radio Buttons: Making One Choice, Clearly

Radio buttons are used when you want users to pick just one option from a set — and only one. Whether you're asking for a favorite fruit or selecting a payment method, radio buttons help guide clean, exclusive decisions.

Creating a Single Group of Radio Buttons

Radio buttons are created using <input type="radio">. All buttons in the same group must share the same name. Each one should have a unique value and an id for labeling.

<p>Pick your favorite fruit:</p>
<input type="radio" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label><br>

<input type="radio" id="banana" name="fruit" value="banana">
<label for="banana">Banana</label><br>

<input type="radio" id="cherry" name="fruit" value="cherry">
<label for="cherry">Cherry</label>
◯ Apple  
◯ Banana  
◯ Cherry

Only one button can be selected at a time. Selecting one automatically deselects the others.

Setting a Default Selection

Use the checked attribute to preselect a value:

<input type="radio" id="banana" name="fruit" value="banana" checked>
<label for="banana">Banana</label>
◉ Banana

This makes "Banana" the selected option when the page loads.

Radio Buttons Inside a Form

Let’s wrap them in a full form that users can submit:

<form action="/submit" method="post">
  <p>Choose one fruit:</p>

  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">Apple</label><br>

  <input type="radio" id="banana" name="fruit" value="banana">
  <label for="banana">Banana</label><br>

  <input type="radio" id="cherry" name="fruit" value="cherry">
  <label for="cherry">Cherry</label><br><br>

  <input type="submit" value="Submit">
</form>
Choose one fruit:
◯ Apple  
◯ Banana  
◯ Cherry  
[Submit]

Only one value (like "cherry") will be submitted with the form under the name fruit.

Grouping Radio Buttons with Fieldset

Use <fieldset> and <legend> for better organization and accessibility.

<fieldset>
  <legend>Pick one:</legend>

  <input type="radio" id="item1" name="choice" value="item1">
  <label for="item1">Item 1</label><br>

  <input type="radio" id="item2" name="choice" value="item2">
  <label for="item2">Item 2</label>
</fieldset>
Pick one:
◯ Item 1  
◯ Item 2

Best Practices

  • Use the same name for all options in a group
  • Label each radio button with <label> for usability
  • Use checked for default selections only when it makes sense
  • Group related radio buttons with <fieldset> and <legend>

Common Mistake to Avoid

Giving each radio button a different name prevents them from behaving as a group.

<!-- This will NOT work as expected -->
<input type="radio" name="apple" value="apple">
<input type="radio" name="banana" value="banana">

This will allow multiple selections — which defeats the point of radio buttons. Stick to a shared name.

Summary

Radio buttons are designed for exclusive choices. They are simple, intuitive, and easy to implement. You now know how to:

  • Create single-selection groups with <input type="radio">
  • Set default selections using checked
  • Group and label radio buttons semantically

What’s Next?

Now that you’ve handled text inputs, checkboxes, and radio buttons — it’s time to dive into Textareas in HTML for larger, multi-line input fields.

QUIZ

Question 1:Which input type is used to create radio buttons in HTML?

Question 2:Radio buttons allow users to select more than one option at a time.

Question 3:Which of the following are best suited for radio buttons in a school form?

Question 4:How do you ensure that a group of radio buttons work as a single selection set?

Question 5:A radio button can be pre-selected using the checked attribute.

Question 6:Which of these examples show correct usage of radio buttons?