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.