HTML Checkbox

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.

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.

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.

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.

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]

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.

• 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

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

Choose the option that lists all and only the correct statements.

1. Select subjects: Maths, Physics, Chemistry
2. Choose gender: Male, Female
3. Opt-in for newsletter updates
4. Choose extra-curricular activities: Dance, Music, Art

Choose the option that lists all and only the correct statements.

1. <input type="checkbox" name="activities" value="sports" checked> Sports

2. <input type="checkbox" name="language" value="Hindi"> Hindi

3. <checkbox name="language"> Telugu

4. <input checkbox name="opt"> Newsletter

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