HTML Checkboxes

HTML checkboxes allow users to select one or more options from a list. They are commonly used in registration forms, surveys, preference settings, product filters, and terms and conditions forms. The <input type="checkbox"> element creates a checkbox in HTML.

What Are HTML Checkboxes?

An HTML checkbox is a form control that users can check or uncheck. Unlike radio buttons, checkboxes allow users to select multiple options independently.

For example, a registration form may ask users to select their programming languages, such as Java, Python, JavaScript, and PHP. Users can select as many options as they need.

To understand form controls, explore HTML Input and HTML Input Types.

HTML Checkbox Example

The following example shows how to create multiple checkboxes.

<form>
  <p>Select Your Skills:</p>

  <input type="checkbox" id="java" name="skills" value="Java">
  <label for="java">Java</label>

  <input type="checkbox" id="python" name="skills" value="Python">
  <label for="python">Python</label>

  <input type="checkbox" id="javascript" name="skills" value="JavaScript">
  <label for="javascript">JavaScript</label>

  <button type="submit">Submit</button>
</form>

In this example, users can select Java, Python, JavaScript, or all three options.

• <input type="checkbox"> creates a checkbox.
• name="skills" identifies the form field.
• value specifies the value submitted when the checkbox is selected.
• <label> provides a description for each option.

Important Attributes of HTML Checkboxes

HTML checkboxes support several useful attributes.

• checked selects a checkbox by default.
• value specifies the value submitted when the checkbox is selected.
• name identifies the field in submitted form data.
• id uniquely identifies the checkbox.
• required requires that particular checkbox to be checked before normal form submission.

For example:

<form>
  <input
    type="checkbox"
    id="terms"
    name="terms"
    value="accepted"
    required
  >

  <label for="terms">
    I agree to the terms and conditions.
  </label>

  <button type="submit">Register</button>
</form>

In this example, users must check the box before submitting the form.

Learn more about HTML Form Attributes and the HTML Required Attribute.

Selecting a Checkbox by Default

You can use the checked attribute to make a checkbox selected when the page loads.

<input type="checkbox" id="newsletter" name="newsletter" value="yes" checked>
<label for="newsletter">Subscribe to our newsletter</label>

The checkbox is selected by default, but users can uncheck it.

For optional subscriptions, it is generally better to let users make their own choice rather than preselecting consent.

Styling HTML Checkboxes with CSS

CSS can improve the appearance of checkboxes and match your website’s design.

<style>
  input[type="checkbox"] {
    accent-color: #007bff;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  label {
    cursor: pointer;
  }
</style>

The accent-color property changes the checkbox’s accent color in supported browsers. The cursor property makes it clear that the control is interactive.

HTML Checkboxes vs Radio Buttons

Checkboxes allow users to select multiple independent options. Radio buttons allow users to select only one option from a group sharing the same name.

For example, selecting multiple interests is suitable for checkboxes, while choosing one payment method is suitable for radio buttons. Read about HTML Radio Buttons to understand the difference.

How Checkbox Values Are Submitted

A checkbox is normally included in submitted form data only when it is checked. If it is unchecked, its name and value are generally omitted from the submission.

For example, if a user selects Java but leaves Python unchecked, only the selected Java checkbox is submitted for that group.

When processing checkbox data, applications should validate the received values on the server instead of assuming that users can submit only the options shown on the page.

Frequently Asked Questions

Can users select multiple checkboxes?

Yes. Each checkbox can be checked or unchecked independently, allowing users to select multiple options.

How do I make a checkbox selected by default?

Add the checked attribute to the checkbox input.

Does an unchecked checkbox submit its value?

No. An unchecked checkbox is normally omitted from the submitted form data.

How do I make a checkbox mandatory?

Add the required attribute when the user must check that specific checkbox, such as an agreement box, before submitting the form.