0
0
HTMLmarkup~5 mins

Radio buttons and checkboxes in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Radio buttons and checkboxes let users pick options on a form. They help collect choices easily.

When you want the user to select only one option from a list (use radio buttons).
When you want the user to select multiple options from a list (use checkboxes).
When creating surveys or quizzes that need user answers.
When asking users to agree to terms or select preferences.
When building forms for sign-ups or settings.
Syntax
HTML
<input type="radio" name="group1" value="option1"> Option 1
<input type="checkbox" name="check1" value="optionA"> Option A

Radio buttons with the same name belong to one group; only one can be selected.

Checkboxes work independently; users can select many or none.

Examples
Two radio buttons in the same group named "color". User can pick only one color.
HTML
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="blue"> Blue
Two checkboxes named "fruit". User can pick one, both, or none.
HTML
<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
Radio buttons with one pre-selected option using checked.
HTML
<input type="radio" name="size" value="small" checked> Small
<input type="radio" name="size" value="large"> Large
A single checkbox that is checked by default.
HTML
<input type="checkbox" name="subscribe" value="yes" checked> Subscribe to newsletter
Sample Program

This page shows a form with two groups: one for picking a single favorite color using radio buttons, and one for selecting multiple hobbies using checkboxes. Labels make it easy to click the option text. The form is accessible and responsive.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio and Checkbox Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 400px;
      margin: auto;
    }
    fieldset {
      margin-bottom: 1.5rem;
      border: 1px solid #ccc;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    legend {
      font-weight: bold;
      padding: 0 0.5rem;
    }
    label {
      display: block;
      margin-bottom: 0.5rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <main>
    <form aria-label="Favorite options form">
      <fieldset>
        <legend>Choose your favorite color</legend>
        <label><input type="radio" name="color" value="red"> Red</label>
        <label><input type="radio" name="color" value="green"> Green</label>
        <label><input type="radio" name="color" value="blue"> Blue</label>
      </fieldset>

      <fieldset>
        <legend>Select your hobbies</legend>
        <label><input type="checkbox" name="hobby" value="reading"> Reading</label>
        <label><input type="checkbox" name="hobby" value="sports"> Sports</label>
        <label><input type="checkbox" name="hobby" value="music"> Music</label>
      </fieldset>

      <button type="submit">Submit</button>
    </form>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use <label> tags with inputs for better accessibility and easier clicking.

Use the same name attribute for radio buttons in one group to link them.

Checkboxes can have the same or different name depending on how you want to collect data.

Summary

Radio buttons let users pick only one option from a group.

Checkboxes let users pick any number of options, including none.

Labels improve usability and accessibility for both controls.