The HTML checkbox, explained.

A single checkbox

<label>
  <input type="checkbox" name="newsletter" value="Yes" />
  Send me the monthly newsletter
</label>

• A ticked box sends its value. This one sends newsletter=Yes. Without a value attribute it sends the word on, so always set one.
• An unticked box sends nothing. Its name is left out of the submission entirely; there is no “No”. If you need an explicit yes or no, use two radio buttons instead.
• Wrap it in its label, or link them with for and id, so clicking the text ticks the box. From the keyboard, the Space key ticks and unticks it.

Ticked by default

Add the checked attribute to tick a box when the page loads. Be careful with marketing consent: in many places, including the EU and UK, consent to newsletters has to be an active choice, so leave those boxes unticked.

In JavaScript, the checked property is the box’s current state, while the attribute is only its starting state.

A group of checkboxes

Give related checkboxes the same name and different values. Visitors can tick any number of them, including none. Put the group in a <fieldset> with a <legend>, so the question is announced with each option.

<fieldset>
  <legend>Which services do you need?</legend>
  <label><input type="checkbox" name="services" value="Design" /> Design</label>
  <label><input type="checkbox" name="services" value="Hosting" /> Hosting</label>
  <label><input type="checkbox" name="services" value="SEO" /> SEO</label>
</fieldset>

A visitor who ticks Design and SEO sends services=Design&services=SEO: the same name twice. Some server languages, such as PHP, only keep the last one unless the name ends in brackets, services[]. Check what your form handler expects.

A required checkbox

On a single checkbox, required means it must be ticked before the form will send. That is how an “I agree” box works:

<label>
  <input type="checkbox" name="consent" value="Agreed" required />
  I agree to the <a href="/privacy">privacy policy</a>
</label>

There is no built-in way to say “tick at least one” in a group: required on a group’s checkbox makes that particular box required. A few lines of JavaScript do it instead, using the browser’s own error message:

const boxes = [...document.querySelectorAll('input[name="services"]')];

function checkGroup() {
  const none = !boxes.some(box => box.checked);
  boxes[0].setCustomValidity(none ? 'Choose at least one service.' : '');
}
boxes.forEach(box => box.addEventListener('change', checkGroup));
checkGroup();

Read checkboxes in JavaScript

Read the checked property for a single box, and select the :checked boxes for a group. The change event fires every time a box is ticked or unticked.

const newsletter = document.querySelector('input[name="newsletter"]');
console.log(newsletter.checked);   // true or false

// Every checked value in a group
const chosen = [...document.querySelectorAll('input[name="services"]:checked')].map(box => box.value);

newsletter.addEventListener('change', () => {
  console.log(newsletter.checked ? 'Subscribed' : 'Not subscribed');
});

// The "some selected" dash, for a "select all" box. It can only be set in JavaScript.
document.querySelector('#select-all').indeterminate = true;

The indeterminate state only changes how the box looks. It is still sent, or not, according to checked.

Style a checkbox

accent-color recolours native checkboxes in every current browser and keeps their keyboard and screen-reader behaviour. For a fully custom box, start from appearance: none, draw the box and tick yourself, and keep a visible focus outline.

/* Recolour the native checkbox */
input[type="checkbox"] { accent-color: #45436f; width: 18px; height: 18px; }

/* A bigger target: the whole row is clickable */
fieldset label { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

A form that sends

This enquiry form posts to Heartdove, which saves every message, emails you an alert and tracks it until it is delivered or bounces. A checkbox group arrives as one field: a visitor who ticks two boxes shows up as “Services: Design, SEO”. Heartdove accepts the name with or without brackets.

<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="New project enquiry" />

  <label for="email">Email</label>
  <input id="email" type="email" name="email" autocomplete="email" required />

  <fieldset>
    <legend>Which services do you need?</legend>
    <label><input type="checkbox" name="services" value="Design" /> Design</label>
    <label><input type="checkbox" name="services" value="Hosting" /> Hosting</label>
    <label><input type="checkbox" name="services" value="SEO" /> SEO</label>
  </fieldset>

  <label for="message">Project details</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send enquiry</button>
</form>

Replace YOUR_ACCESS_KEY with your key from a free Heartdove form. The contact form generator builds checkbox groups for you, under “Choose any”.

Questions

Keep reading

• HTML radio buttons
• Fieldset and legend
• The HTML label
• HTML form validation