Docs ejecutables de HTML: Checkbox en HTML

Q: ¿Cómo se hace un checkbox en HTML?

Usa dentro de una etiqueta: Acepto . La etiqueta hace que el texto también se pueda pulsar.

Q: ¿Cómo dejo un checkbox marcado por defecto?

Añade el atributo checked: . Lo que cuenta es su presencia, así que checked="false" también lo marca. En JavaScript, asigna box.checked = true o false.

Q: ¿Cómo obtengo el valor de un checkbox en JavaScript?

Lee box.checked, que es true o false. box.value es el valor que enviaría, y no cambia esté marcada la casilla o no. Escucha el evento change para reaccionar cuando se marca o desmarca.

Q: ¿Cómo cambio el color de un checkbox?

Ponle accent-color: input[type=checkbox] { accent-color: #16a34a; }. Para un aspecto totalmente propio, pon appearance: none y dibuja tú la casilla y la marca con CSS.

Cómo hacer un checkbox en HTML

Una casilla de verificación es un <input type="checkbox">. Ponla dentro de un <label> con su texto, así al pulsar el texto también se marca. Marca una casilla o las dos y pulsa Save para ver lo que envía el formulario:

<!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>

Con el estado por defecto, el formulario solo envía updates=on. Dos reglas lo explican:

Una casilla marcada envía name=value. La segunda casilla no tiene value, así que envía el valor por defecto, on.
Una casilla sin marcar no envía nada. Ni newsletter=no ni un valor vacío: el nombre no aparece en los datos.

checked en el HTML fija el estado inicial. Como todo atributo booleano, lo que cuenta es su presencia: checked="false" también marca la casilla.

Atributos del checkbox

Atributo	Hace
`name`	La clave que se envía cuando está marcada
`value`	Lo que se envía cuando está marcada (por defecto `on`)
`checked`	Marcada al cargar la página
`required`	El formulario no se envía hasta que esta casilla esté marcada
`disabled`	No se puede marcar ni desmarcar y no se envía

Un grupo de checkboxes

Para "elige cualquiera de estas", dale a todas las casillas el mismo name y un value distinto. Envuélvelas en un <fieldset> con un <legend> para que el grupo tenga nombre:

<!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>

El formulario envía topic=html y topic=css: el mismo nombre dos veces. La mayoría de los frameworks de servidor pueden leerlo como una lista. PHP es la excepción: solo se queda con el último salvo que el nombre termine en corchetes, name="topic[]". En JavaScript, new FormData(form).getAll('topic') devuelve ['html', 'css'].

Enviar un valor cuando la casilla no está marcada

Cuando el servidor necesita un "no" explícito, pon un input oculto con el mismo nombre antes del checkbox. Sin marcar, solo se envía el valor oculto; marcada, se envían los dos y el servidor se queda con el último:

<!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>

Pulsa Continue: el formulario se niega a enviarse hasta que marques la casilla de condiciones, porque es required. Después envía marketing=no y terms=accepted, o marketing=no, marketing=yes y terms=accepted con la primera casilla marcada. Frameworks como Rails generan exactamente esta pareja de input oculto. Comprueba cómo lee tu servidor un nombre repetido antes de confiar en ello.

Seleccionar todo y el estado indeterminate

Un checkbox tiene un tercer aspecto, un guion, para "algunas pero no todas". Solo existe en JavaScript: asigna box.indeterminate = true. Una casilla de "seleccionar todo" lo usa cuando algunas de las casillas que controla están marcadas:

<!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 solo cambia el aspecto (y lo que anuncian los lectores de pantalla: "mixto" o "parcialmente marcado"). Por debajo, la casilla sigue estando marcada o sin marcar, y eso es lo que envía el formulario. Pulsar una casilla indeterminada quita el guion y la alterna.

Usa el evento change para reaccionar a un checkbox, y lee box.checked para saber su estado. box.value no cambia al marcar o desmarcar la casilla.

Dar estilo a los checkboxes

El cambio más rápido es accent-color, que cambia el color del checkbox nativo y conserva todo su comportamiento. Para un aspecto totalmente distinto, appearance: none quita el dibujo nativo y te deja dar estilo al input como a cualquier caja:

<!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>

La casilla personalizada sigue siendo un checkbox real: se alterna con un clic y con Espacio, se envía con el formulario y se anuncia como casilla de verificación. Dibújala con :checked y mantén un estilo :focus-visible, porque sin el dibujo nativo no hay anillo de foco que no hayas añadido tú.

Un interruptor toggle

Un interruptor es un checkbox que significa "activado o desactivado ahora mismo" en lugar de "incluir esto". Dibújalo con appearance: none y añade role="switch" para que los lectores de pantalla anuncien un interruptor activado o desactivado en lugar de una casilla marcada:

<!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 coloca el botón desde el inicio de la línea, así que en las páginas de derecha a izquierda el interruptor se desliza en sentido contrario, como debe. Para opciones de sí o no agrupadas donde solo se puede elegir una, consulta radio button en HTML.

Errores comunes

Esperar false de una casilla sin marcar. No se envía nada. Trata un nombre ausente como "desactivado" en el servidor, o añade el input oculto.
checked="false". Sigue marcando la casilla. Quita el atributo.
Un checkbox sin etiqueta, o con texto al lado que no es un <label>. La pequeña casilla se convierte en la única zona que se puede pulsar y los lectores de pantalla anuncian "casilla de verificación" sin nombre. Consulta label en HTML.
Olvidar value, con lo que todas las casillas de un grupo envían on y el servidor no puede distinguirlas.
Leer box.value para saber si está marcada. Usa box.checked.
Checkboxes para "elige una". Para eso están los botones de opción.

Preguntas frecuentes

¿Cómo se hace un checkbox en HTML?

Usa <input type="checkbox"> dentro de una etiqueta: <label><input type="checkbox" name="terms" value="yes"> Acepto</label>. La etiqueta hace que el texto también se pueda pulsar.

¿Cómo dejo un checkbox marcado por defecto?

Añade el atributo checked: <input type="checkbox" name="news" checked>. Lo que cuenta es su presencia, así que checked="false" también lo marca. En JavaScript, asigna box.checked = true o false.

¿Qué valor envía un checkbox sin marcar?

Ninguno. Un checkbox sin marcar se omite por completo de los datos enviados. Uno marcado envía su value, o on si no tiene value. Si el servidor necesita un "no" explícito, pon un input oculto con el mismo nombre antes del checkbox.

¿Cómo obtengo el valor de un checkbox en JavaScript?

Lee box.checked, que es true o false. box.value es el valor que enviaría, y no cambia esté marcada la casilla o no. Escucha el evento change para reaccionar cuando se marca o desmarca.

¿Cómo cambio el color de un checkbox?

Ponle accent-color: input[type=checkbox] { accent-color: #16a34a; }. Para un aspecto totalmente propio, pon appearance: none y dibuja tú la casilla y la marca con CSS.

Conceptos relacionados