Runnable HTML Docs: Checkbox

Q: How do you make a checkbox in HTML?

Use inside a label: I agree . The label makes the text clickable too.

Q: How do I make a checkbox checked by default?

Add the checked attribute: . Its presence is what counts, so checked="false" still checks it. In JavaScript, set box.checked = true or false.

Q: How do I get the value of a checkbox in JavaScript?

Read box.checked, which is true or false. box.value is the value it would send, and it stays the same whether the box is checked or not. Listen for the change event to react when it is toggled.

Q: How do I change the color of a checkbox?

Set accent-color on it: input[type=checkbox] { accent-color: #16a34a; }. For a fully custom look, set appearance: none and draw the box and the check mark yourself with CSS.

How to make a checkbox in HTML

A checkbox is an <input type="checkbox">. Put it inside a <label> with its text, so clicking the text toggles it too. Tick one or both boxes and press Save to see what the form sends:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

With the default state the form sends only updates=on. Two rules explain it:

A checked box sends name=value. The second box has no value, so it sends the default, on.
An unchecked box sends nothing at all. Not newsletter=no, not an empty value: the name is missing from the data.

checked in the HTML sets the starting state. Like every boolean attribute, its presence is what counts: checked="false" still checks the box.

Checkbox attributes

Attribute	Does
`name`	The key sent when checked
`value`	What is sent when checked (default `on`)
`checked`	Checked when the page loads
`required`	The form will not submit until this box is checked
`disabled`	Cannot be toggled and is not sent

A group of checkboxes

For "pick any of these", give every box the same name and a different value. Wrap them in a <fieldset> with a <legend> so the group has a name:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

The form sends topic=html and topic=css: the same name twice. Most server frameworks can read that as a list. PHP is the exception: it keeps only the last one unless the name ends in brackets, name="topic[]". In JavaScript, new FormData(form).getAll('topic') returns ['html', 'css'].

Sending a value when the box is unchecked

When the server needs an explicit "no", put a hidden input with the same name before the checkbox. Unchecked, only the hidden value is sent; checked, both are sent and the server takes the last one:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Press Continue: the form refuses until the terms box is ticked, because it is required. Then it sends marketing=no and terms=accepted, or marketing=no, marketing=yes and terms=accepted with the first box ticked. Frameworks such as Rails generate exactly this hidden-input pair. Check how your server reads a repeated name before relying on it.

Select all and the indeterminate state

A checkbox has a third look, a dash, for "some but not all". It exists only in JavaScript: set box.indeterminate = true. A "select all" box uses it when some of the boxes it controls are checked:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate only changes the look (and what screen readers announce: "mixed" or "partially checked"). The box is still either checked or unchecked underneath, and that is what the form sends. Clicking an indeterminate box clears the dash and toggles it.

Use the change event to react to a checkbox, and read box.checked for its state. box.value does not change when the box is toggled.

Styling checkboxes

The quickest change is accent-color, which recolors the native checkbox and keeps all its behavior. For a completely different look, appearance: none removes the native drawing and lets you style the input like any box:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

The custom box is still a real checkbox: it toggles on click and Space, is sent with the form, and is announced as a checkbox. Draw it with :checked and keep a :focus-visible style, because without the native drawing there is no focus ring you did not add yourself.

A toggle switch

A switch is a checkbox that means "on/off right now" rather than "include this". Draw it with appearance: none and add role="switch" so screen readers announce a switch that is on or off instead of a checkbox that is checked:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start places the knob from the start of the line, so the switch slides the other way on right-to-left pages, as it should. For grouped yes/no choices where only one can be picked, see HTML radio button.

Common mistakes

Expecting false for an unchecked box. Nothing is sent. Handle a missing name as "off" on the server, or add the hidden input.
checked="false". It still checks the box. Remove the attribute.
A checkbox with no label, or with text next to it that is not a <label>. The small box becomes the only click target and screen readers announce "checkbox" with no name. See HTML label.
Forgetting value, so every box in a group sends on and the server cannot tell them apart.
Reading box.value to see if it is checked. Use box.checked.
Checkboxes for "choose one". That is what radio buttons are for.

Frequently Asked Questions

How do you make a checkbox in HTML?

Use <input type="checkbox"> inside a label: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. The label makes the text clickable too.

How do I make a checkbox checked by default?

Add the checked attribute: <input type="checkbox" name="news" checked>. Its presence is what counts, so checked="false" still checks it. In JavaScript, set box.checked = true or false.

What value does an unchecked checkbox send?

None. An unchecked checkbox is left out of the submitted data entirely. A checked one sends its value, or on if it has no value. If the server needs an explicit "no", put a hidden input with the same name before the checkbox.

How do I get the value of a checkbox in JavaScript?

Read box.checked, which is true or false. box.value is the value it would send, and it stays the same whether the box is checked or not. Listen for the change event to react when it is toggled.

How do I change the color of a checkbox?

Set accent-color on it: input[type=checkbox] { accent-color: #16a34a; }. For a fully custom look, set appearance: none and draw the box and the check mark yourself with CSS.

Related concepts