HTML Checkbox Input - Multiple Selections with Examples

HTML Checkbox: Choose More Than One

Checkboxes let users make multiple selections from a list of options. They're perfect for choosing favorite fruits, selecting preferences, or agreeing to terms. In this tutorial, you'll learn how to create single and grouped checkboxes, and how to handle multiple selections in a form.

Creating a Single Checkbox

A checkbox input is created using <input type="checkbox">. It's often paired with a <label> for clarity.

<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label>

☐ Apple

This creates a checkbox for a single fruit. When selected, the value "apple" will be submitted with the form.

Creating Multiple Checkboxes

To allow users to select more than one option, give all checkboxes the same name with brackets — like name="fruit[]".

<p>Select your favorite fruits:</p>
<input type="checkbox" id="apple" name="fruit[]" value="apple">
<label for="apple">Apple</label><br>

<input type="checkbox" id="banana" name="fruit[]" value="banana">
<label for="banana">Banana</label><br>

<input type="checkbox" id="cherry" name="fruit[]" value="cherry">
<label for="cherry">Cherry</label>

☐ Apple  
☐ Banana  
☐ Cherry

This allows users to pick one, two, or all three options. Upon form submission, an array of selected values will be sent.

Pre-Checked Checkboxes

You can mark a checkbox as selected by default using the checked attribute.

<input type="checkbox" id="banana" name="fruit[]" value="banana" checked>
<label for="banana">Banana</label>

☑ Banana

This helps when there's a recommended or commonly chosen option.

Checkbox in Forms

Here’s how checkboxes work inside a full form:

<form action="/submit" method="post">
  <p>Pick your fruits:</p>
  <input type="checkbox" id="apple" name="fruits[]" value="apple">
  <label for="apple">Apple</label><br>

  <input type="checkbox" id="banana" name="fruits[]" value="banana">
  <label for="banana">Banana</label><br>

  <input type="checkbox" id="cherry" name="fruits[]" value="cherry">
  <label for="cherry">Cherry</label><br><br>

  <input type="submit" value="Submit">
</form>

Pick your fruits:
☐ Apple  
☐ Banana  
☐ Cherry  
[Submit]

Grouping with Fieldsets

Use <fieldset> and <legend> to group related checkboxes semantically.

<fieldset>
  <legend>Choose your fruits:</legend>
  <input type="checkbox" id="apple" name="fruit[]" value="apple">
  <label for="apple">Apple</label><br>
  <input type="checkbox" id="banana" name="fruit[]" value="banana">
  <label for="banana">Banana</label>
</fieldset>

Choose your fruits:
☐ Apple  
☐ Banana

This adds structure and improves accessibility for screen readers.

Best Practices

• Use labels for every checkbox
• Match label for with input id to allow clickable text
• Use name="field[]" when handling multiple values
• Group with fieldsets when applicable

Summary

Checkboxes are ideal when you want users to select one or more options. In this tutorial, you learned how to:

• Create a single checkbox with label
• Handle multiple checkboxes using [] naming
• Set default selections with checked
• Use <fieldset> for grouping

What’s Next?

Now that you’ve mastered checkboxes, it’s time to explore Radio Buttons — for single-choice questions where only one answer is allowed.