HTML Radio Buttons

HTML radio buttons allow users to select one option from a group of choices. They are commonly used in registration forms, surveys, online examinations, feedback forms, and checkout pages. The <input type="radio"> element creates a radio button in HTML.

What Are HTML Radio Buttons?

Radio buttons are form controls that let users choose only one option from a group when the options share the same name attribute.

For example, a registration form might ask users to select their preferred course from Java, Python, or Web Development. Users can select one option from the group.

To understand form controls, explore HTML Input and HTML Input Types.

HTML Radio Button Example

The following example demonstrates how to create a group of radio buttons.

<form>
  <p>Select Your Course:</p>

  <input type="radio" id="java" name="course" value="Java">
  <label for="java">Java</label>

  <input type="radio" id="python" name="course" value="Python">
  <label for="python">Python</label>

  <input type="radio" id="web" name="course" value="Web Development">
  <label for="web">Web Development</label>

  <button type="submit">Submit</button>
</form>

In this example, all three radio buttons use name="course". This groups them together so that users can select only one course.

The value attribute specifies the value submitted with the form, while each label helps users identify an option.

Important Attributes of Radio Buttons

HTML radio buttons support several useful attributes.

• type="radio" creates a radio button.
• name groups related radio buttons together.
• value specifies the value submitted when the option is selected.
• id uniquely identifies an individual input.
• checked selects an option by default.
• required requires an option from the group to be selected before normal form submission.

For example:

<form>
  <p>Choose a Payment Method:</p>

  <input type="radio" id="upi" name="payment" value="UPI" required>
  <label for="upi">UPI</label>

  <input type="radio" id="card" name="payment" value="Card">
  <label for="card">Credit or Debit Card</label>

  <input type="radio" id="cash" name="payment" value="Cash">
  <label for="cash">Cash</label>

  <button type="submit">Continue</button>
</form>

The required attribute makes selecting a payment option necessary. Learn more about HTML Form Attributes and the HTML Required Attribute.

Selecting a Default Radio Button

You can use the checked attribute to select a radio button automatically when the page loads.

<input type="radio" id="beginner" name="level" value="Beginner" checked>
<label for="beginner">Beginner</label>

<input type="radio" id="advanced" name="level" value="Advanced">
<label for="advanced">Advanced</label>

In this example, Beginner is selected by default. Users can change their selection to Advanced.

Styling HTML Radio Buttons with CSS

CSS can improve the appearance of radio buttons and make forms more consistent with a website’s design.

<style>
  input[type="radio"] {
    accent-color: #007bff;
  }

  label {
    margin-right: 12px;
    cursor: pointer;
  }
</style>

The accent-color property changes the color of the selected radio button in browsers that support it.

Radio Buttons vs Checkboxes

Radio buttons and checkboxes serve different purposes. Radio buttons allow one selection from a group, while checkboxes allow users to select multiple independent options.

For example, choosing one payment method is a good use case for radio buttons. Selecting several interests is better handled with checkboxes. Learn more in HTML Checkboxes.

Frequently Asked Questions

Can users select multiple radio buttons in one group?

No. Radio buttons with the same name belong to the same group, so only one can be selected at a time.

Can I select a radio button by default?

Yes. Add the checked attribute to the option you want selected initially.

Is the value attribute necessary?

It is strongly recommended. The value attribute determines what is submitted for the selected option. Without it, a selected radio button typically submits the default value on.

How do I make radio buttons mandatory?

Add the required attribute to a radio button in the group. Users must select an option before normal browser form validation allows submission.