HTML Radio Buttons

Radio buttons allow users to select one option from a group of related choices. They are commonly used when only one answer should be selected, such as gender, payment method, education level, or delivery preference.

1. What is a Radio Button?

A radio button is created using the <input> element with type="radio".

<input type="radio" name="gender" value="male"> Male

The user can select the radio button to choose the associated option.

2. Basic Radio Button Example

<form>
    <input type="radio" name="gender" value="male">
    <label>Male</label>

    <input type="radio" name="gender" value="female">
    <label>Female</label>
</form>

Output

3. The Importance of the name Attribute

The name attribute groups radio buttons together. Radio buttons with the same name allow only one option to be selected.

<input type="radio" name="course" value="dotnet"> .NET
<input type="radio" name="course" value="java"> Java
<input type="radio" name="course" value="python"> Python

Since all three radio buttons use the same name="course", only one course can be selected.

4. Radio Buttons with Labels

It is recommended to connect every radio button with a <label>. The for attribute of the label should match the radio button's id.

<input type="radio" id="dotnet" name="course" value="dotnet">
<label for="dotnet">.NET</label>

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

Output

5. The value Attribute

The value attribute stores the value associated with the selected radio button. This value is submitted when the form is sent.

<input type="radio"
       id="beginner"
       name="level"
       value="beginner">

<label for="beginner">Beginner</label>

If the user selects this option, the submitted value is beginner.

6. Selecting a Radio Button by Default

Use the checked attribute when one option should be selected by default.

<input type="radio"
       id="online"
       name="mode"
       value="online"
       checked>

<label for="online">Online</label>

<input type="radio"
       id="offline"
       name="mode"
       value="offline">

<label for="offline">Offline</label>

Output

7. Required Radio Buttons

Add the required attribute when the user must select an option before submitting the form.

<input type="radio"
       id="yes"
       name="experience"
       value="yes"
       required>

<label for="yes">Yes</label>

<input type="radio"
       id="no"
       name="experience"
       value="no">

<label for="no">No</label>

8. Radio Buttons in a Form

<form>

    <p>Choose your course:</p>

    <input type="radio"
           id="html-course"
           name="course"
           value="html"
           required>
    <label for="html-course">HTML</label>

    <input type="radio"
           id="css-course"
           name="course"
           value="css">
    <label for="css-course">CSS</label>

    <input type="radio"
           id="js-course"
           name="course"
           value="javascript">
    <label for="js-course">JavaScript</label>

    <br><br>

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

</form>

9. Example: Gender Selection

<fieldset>
    <legend>Select Gender</legend>

    <input type="radio"
           id="male"
           name="gender"
           value="male">
    <label for="male">Male</label>

    <input type="radio"
           id="female"
           name="gender"
           value="female">
    <label for="female">Female</label>

    <input type="radio"
           id="other"
           name="gender"
           value="other">
    <label for="other">Other</label>
</fieldset>

Output

10. Using fieldset and legend

The <fieldset> element groups related form controls, while <legend> provides a caption for the group.

<fieldset>
    <legend>Preferred Payment Method</legend>

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

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

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

11. Radio Buttons vs Checkboxes

Radio buttons and checkboxes are both form controls, but they are used for different purposes.

12. Example of One Selection Only

<p>Choose your experience level:</p>

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

<input type="radio"
       id="intermediate-level"
       name="experience-level"
       value="intermediate">
<label for="intermediate-level">Intermediate</label>

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

Because all three controls use the same name="experience-level", only one option can be selected.

13. Disabled Radio Button

Use the disabled attribute when an option should not be selectable.

<input type="radio"
       id="offline"
       name="training-mode"
       value="offline"
       disabled>

<label for="offline">Offline - Not Available</label>

Output

14. Radio Button with Styling

Radio buttons can be styled using CSS while keeping the HTML structure simple.

<style>
    input[type="radio"] {
        accent-color: #4f46e5;
    }
</style>

15. Common Mistakes

Mistake 1: Different name attributes

<input type="radio" name="course1" value="html">
<input type="radio" name="course2" value="css">

These controls are treated as separate groups and may both be selected.

Mistake 2: Missing value attribute

<input type="radio" name="course">

It is better to provide a meaningful value so the selected option can be identified during form submission.

Mistake 3: Missing labels

<input type="radio" name="course" value="html">

Without a label, the option may be less clear and less convenient to use.

16. Best Practices

• Use the same name for radio buttons in the same group.
• Always provide a meaningful value.
• Use labels with matching for and id values.
• Use required when a selection is mandatory.
• Use fieldset and legend for related options when appropriate.
• Keep radio button choices clear and easy to understand.

17. Practice Example

Create a form that asks the user to choose one preferred learning mode:

<form>

    <fieldset>
        <legend>Preferred Learning Mode</legend>

        <input type="radio"
               id="online-learning"
               name="learning-mode"
               value="online"
               required>
        <label for="online-learning">Online</label>

        <input type="radio"
               id="offline-learning"
               name="learning-mode"
               value="offline">
        <label for="offline-learning">Offline</label>

        <input type="radio"
               id="hybrid-learning"
               name="learning-mode"
               value="hybrid">
        <label for="hybrid-learning">Hybrid</label>

    </fieldset>

    <br>

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

</form>

18. Key Attributes of Radio Buttons