How to Create a Radio Button in HTML

Use a radio button when users must choose exactly one option from a small set. Radio buttons work best for plan selection, delivery speed, payment methods, and survey questions with single-choice answers.

What you’ll build or solve

You’ll learn how to create radio buttons in HTML with the correct <input> type, shared name, and matching labels. You’ll also know how to group options so only one can be selected.

When this approach works best

This approach is the right choice when users must pick one and only one option.

Common real-world scenarios include:

• Pricing plan selection
• Shipping speed
• Payment method choice
• Survey questions
• Language preference

This is a bad idea when users should be able to choose multiple options. In that case, use checkboxes instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add radio inputs with the same name

Use <input type="radio"> for each option and give every option in the same group the same name.

<input type="radio" id="basic" name="plan" value="basic">
<label for="basic">Basic</label>

<input type="radio" id="pro" name="plan" value="pro">
<label for="pro">Pro</label>

To create larger single-choice groups, keep the same name and change only the id, value, and label text.

<input type="radio" id="usa" name="country" value="usa">
<label for="usa">USA</label>

<input type="radio" id="uk" name="country" value="uk">
<label for="uk">UK</label>

<input type="radio" id="france" name="country" value="france">
<label for="france">France</label>

What to look for:

• Use type="radio" for single-choice input
• All options in the same group must share one name
• Each option needs a unique id
• Match each label for value to its id
• Use checkboxes instead for multi-select choices

Examples you can copy

Pricing plan choice

<input type="radio" id="starter" name="plan" value="starter">
<label for="starter">Starter</label>

<input type="radio" id="business" name="plan" value="business">
<label for="business">Business</label>

Shipping speed

<input type="radio" id="standard" name="shipping" value="standard">
<label for="standard">Standard</label>

<input type="radio" id="express" name="shipping" value="express">
<label for="express">Express</label>

Country selector

<input type="radio" id="usa" name="country" value="usa">
<label for="usa">USA</label>

<input type="radio" id="uk" name="country" value="uk">
<label for="uk">UK</label>

Common mistakes and how to fix them

Mistake 1: Using different name values in one group

What the reader might do:

<input type="radio" id="visa" name="card">
<label for="visa">Visa</label>

<input type="radio" id="paypal" name="wallet">
<label for="paypal">PayPal</label>

Why it breaks: users can select both options because the browser treats them as separate groups.

Corrected approach:

<input type="radio" id="visa" name="payment" value="visa">
<label for="visa">Visa</label>

<input type="radio" id="paypal" name="payment" value="paypal">
<label for="paypal">PayPal</label>

Mistake 2: Missing label connection

What the reader might do:

<input type="radio" id="monthly" name="billing">
<label>Monthly</label>

Why it breaks: clicking the label may not activate the radio button.

Corrected approach:

<input type="radio" id="monthly" name="billing" value="monthly">
<label for="monthly">Monthly</label>

Mistake 3: Using radio buttons for multiple selections

What the reader might do:

<input type="radio" id="html" name="skills">
<label for="html">HTML</label>

<input type="radio" id="css" name="skills">
<label for="css">CSS</label>

Why it breaks: only one option can stay selected, which is wrong for skill checklists.

Corrected approach:

<input type="checkbox" id="html" name="skills" value="html">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="skills" value="css">
<label for="css">CSS</label>

Troubleshooting

If users can select more than one option, check that every radio in the group shares the same name.

If clicking the label does nothing, match the label for value to the radio id.

If the wrong value is submitted, confirm each option has the correct value.

If users need multiple selections, switch from radio buttons to checkboxes.

Quick recap

• Use type="radio" for single-choice input
• Share the same name across one group
• Use unique id values
• Match every label to its radio button
• Use checkboxes for multi-select input