Radio Buttons and Checkboxes in Forms
When you fill out a form online—like a survey or a signup page—you often see small circles and squares you can click. Those are radio buttons (circles) and checkboxes (squares).
In this article, you’ll learn what they are, when to use each one, and how to build them with simple HTML code. You don’t need any coding experience. We’ll go step by step, and you can copy and paste the examples into your own files.
What are radio buttons and checkboxes?
Let’s start with the basics.
Radio buttons
Radio buttons let users choose one option from a small list.
Example uses:
- Selecting gender (e.g., Male, Female, Prefer not to say)
- Choosing a payment method (e.g., Credit Card, PayPal)
- Picking a delivery option (e.g., Standard, Express)
With radio buttons, only one choice in the group can be selected at a time.
Checkboxes
Checkboxes let users choose zero, one, or many options.
Example uses:
- Selecting hobbies
- Choosing newsletter topics
- Agreeing to terms or additional options
With checkboxes, users can tick as many as they like—or none at all.
Getting set up (you can do this!)
To follow along, you only need:
- A plain text editor (like Notepad on Windows, TextEdit on Mac in plain text mode, or a code editor like VS Code).
- A web browser (Chrome, Firefox, Edge, Safari, etc.).
Steps:
- Create a new file and name it
form-example.html. - Copy the following basic HTML into it.
- Save the file and open it in your browser (double-click the file).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Example</title>
</head>
<body>
<h1>My First Form</h1>
<!-- We will add our form fields here -->
</body>
</html>
You should see a page with the heading “My First Form”. Great start!
Example 1: Your first radio buttons
Let’s add a simple question using radio buttons: “What is your favorite color?”
Add this code inside the <body> tag, below the <h1> line:
<form>
<p>What is your favorite color?</p>
<!-- Each input is a radio button option -->
<label>
<input type="radio" name="favoriteColor" value="red">
Red
</label><br>
<label>
<input type="radio" name="favoriteColor" value="blue">
Blue
</label><br>
<label>
<input type="radio" name="favoriteColor" value="green">
Green
</label>
</form>
What this code does
<form>…</form>: Wraps everything that belongs to the form.<p>: Shows the question text.<input type="radio">: Creates a radio button.name="favoriteColor": Groups the buttons together. All radio buttons with the same name belong to one group.value="red"(and others): The value that gets sent when the form is submitted.<label> ... </label>: Makes the text clickable along with the button.
What you should see
In your browser, you should now see three small circles labeled Red, Blue, and Green. You can only select one at a time. When you click another, the previous one is unchecked.
Try it yourself
Change the color names and values to your own favorites (e.g., yellow, purple). Refresh the browser and see the new options.
Example 2: Adding checkboxes for multiple choices
Now, let’s ask about hobbies, where users can pick more than one.
Add this below the previous form, or inside it as another question:
<p>Which hobbies do you enjoy? (You can choose more than one)</p>
<label>
<input type="checkbox" name="hobby" value="reading">
Reading
</label><br>
<label>
<input type="checkbox" name="hobby" value="sports">
Sports
</label><br>
<label>
<input type="checkbox" name="hobby" value="music">
Music
</label><br>
<label>
<input type="checkbox" name="hobby" value="gaming">
Gaming
</label>
What this code does
<input type="checkbox">: Creates a checkbox instead of a radio button.- All checkboxes share the same
name="hobby", which groups them. - Users can tick any combination: just “Reading”, “Reading and Music”, all of them, or none.
What you should see
You’ll see four little square boxes next to the hobby names. Try checking several at once. Unlike radio buttons, these don’t uncheck when you choose another.
Try it yourself
Add at least two more hobbies of your own. You just need to copy one <label> block, paste it, and adjust the text and value.
Example 3: Making options required and pre-selected
Sometimes, you want the user to have to choose an option, or you want one option checked by default.
Let’s improve the favorite color question.
Replace your first question with this version:
<p>What is your favorite color?</p>
<label>
<input type="radio" name="favoriteColor" value="red" required>
Red
</label><br>
<label>
<input type="radio" name="favoriteColor" value="blue" checked>
Blue (default)
</label><br>
<label>
<input type="radio" name="favoriteColor" value="green">
Green
</label>
What changed
requiredon the first radio input: This means one option in this group must be selected before the form can be submitted.checkedon the blue option: This makes Blue selected when the page first loads.
How it behaves
At first, Blue is already chosen. If you add a submit button (we’ll do that next) and try to submit without any radio button picked (after unselecting via code), the browser will force you to choose one.
Try it yourself
Move the checked attribute to another color and refresh the page. See which one is selected by default.
Example 4: A small complete form with a submit button
Let’s put everything together in one simple form you can actually submit (even if it doesn’t go anywhere yet).
Replace everything inside <body> with this code:
<h1>Survey Form</h1>
<form>
<!-- Radio buttons: choose one age range -->
<p>What is your age range?</p>
<label>
<input type="radio" name="age" value="under18" required>
Under 18
</label><br>
<label>
<input type="radio" name="age" value="18-30">
18–30
</label><br>
<label>
<input type="radio" name="age" value="31-50">
31–50
</label><br>
<label>
<input type="radio" name="age" value="51plus">
51+
</label>
<!-- Checkboxes: choose any interests -->
<p>What are you interested in? (Choose all that apply)</p>
<label>
<input type="checkbox" name="interest" value="coding">
Coding
</label><br>
<label>
<input type="checkbox" name="interest" value="design">
Design
</label><br>
<label>
<input type="checkbox" name="interest" value="marketing">
Marketing
</label><br>
<label>
<input type="checkbox" name="interest" value="business">
Business
</label>
<!-- Submit button sends the form -->
<p>
<button type="submit">Submit Survey</button>
</p>
</form>
What this full example does
- Creates a simple survey with one radio button group (age) and one checkbox group (interests).
- The
requiredattribute on the first age option ensures that one age range must be selected before submitting. - The Submit Survey button sends the form data.
In this basic example, the form doesn’t send data to a server (we didn’t add an action yet), but you’ll see the browser try to submit, and it will enforce the required rule.
Try it yourself
- Remove the
requiredattribute and see how the behavior changes. - Add
checkedto one or two checkboxes so they start out selected. - Change the question text and options to make your own custom survey.
When to use radio buttons vs checkboxes
Here’s a quick rule of thumb:
- Use radio buttons when the user must choose exactly one option from a small list.
- Use checkboxes when the user can choose any number of options, including none.
If you find yourself thinking, “Pick one,” you probably want radio buttons. If you’re thinking, “Pick all that apply,” you want checkboxes.
Quick recap and next steps
You’ve learned how to:
- Create radio buttons for single-choice questions.
- Create checkboxes for multiple-choice questions.
- Group options using the
nameattribute. - Make options required or pre-selected with
requiredandchecked. - Build a small, working survey form.
This is a big step—forms are a core part of almost every website. You’re already using the same building blocks professionals use.
What’s next?
- Experiment by adding more questions and options.
- Look up how to use the
actionandmethodattributes on<form>to send data to a server. - Explore other form fields like text inputs, dropdowns (
<select>), and text areas.
Keep practicing, even in tiny steps. Each small form you build makes you a more confident coder.
