Guida HTML interattiva: Checkbox

Q: Come si crea una checkbox in HTML?

Usa dentro un'etichetta: I agree . L'etichetta rende cliccabile anche il testo.

Q: Come faccio a rendere una checkbox selezionata di default?

Aggiungi l'attributo checked: . Conta la sua presenza, quindi checked="false" la seleziona comunque. In JavaScript, imposta box.checked = true o false.

Q: Come leggo il valore di una checkbox in JavaScript?

Leggi box.checked, che è true o false. box.value è il valore che invierebbe, e resta uguale che la casella sia selezionata o no. Ascolta l'evento change per reagire quando viene cambiata.

Q: Come cambio il colore di una checkbox?

Imposta accent-color: input[type=checkbox] { accent-color: #16a34a; }. Per un aspetto del tutto personalizzato, imposta appearance: none e disegna tu la casella e il segno di spunta con il CSS.

Come creare una checkbox in HTML

Una checkbox è un <input type="checkbox">. Mettila dentro un <label> con il suo testo, così cliccando il testo la casella cambia stato. Spunta una o entrambe le caselle e premi Save per vedere cosa invia il form:

<!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 lo stato iniziale il form invia solo updates=on. Due regole lo spiegano:

Una casella selezionata invia name=value. La seconda casella non ha value, quindi invia il valore predefinito, on.
Una casella non selezionata non invia proprio nulla. Né newsletter=no né un valore vuoto: il nome manca dai dati.

checked nell'HTML imposta lo stato di partenza. Come per ogni attributo booleano, conta la sua presenza: checked="false" seleziona comunque la casella.

Attributi della checkbox

Attributo	Cosa fa
`name`	La chiave inviata quando è selezionata
`value`	Cosa viene inviato quando è selezionata (predefinito `on`)
`checked`	Selezionata al caricamento della pagina
`required`	Il form non viene inviato finché questa casella non è selezionata
`disabled`	Non si può cambiare e non viene inviata

Un gruppo di checkbox

Per "scegli quelle che vuoi", dai a ogni casella lo stesso name e un value diverso. Racchiudile in un <fieldset> con una <legend> così il gruppo ha un nome:

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

Il form invia topic=html e topic=css: lo stesso nome due volte. Quasi tutti i framework lato server sanno leggerlo come una lista. PHP è l'eccezione: tiene solo l'ultimo, a meno che il nome non finisca con le parentesi quadre, name="topic[]". In JavaScript, new FormData(form).getAll('topic') restituisce ['html', 'css'].

Inviare un valore quando la casella non è selezionata

Quando il server ha bisogno di un "no" esplicito, metti un input nascosto con lo stesso nome prima della checkbox. Se non è selezionata, viene inviato solo il valore nascosto; se è selezionata, vengono inviati entrambi e il server prende l'ultimo:

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

Premi Continue: il form si rifiuta finché la casella dei termini non è spuntata, perché è required. Poi invia marketing=no e terms=accepted, oppure marketing=no, marketing=yes e terms=accepted con la prima casella spuntata. Framework come Rails generano proprio questa coppia con l'input nascosto. Controlla come il tuo server legge un nome ripetuto prima di contarci.

Seleziona tutto e lo stato indeterminate

Una checkbox ha un terzo aspetto, un trattino, per "alcune ma non tutte". Esiste solo in JavaScript: imposta box.indeterminate = true. Una casella "seleziona tutto" lo usa quando solo alcune delle caselle che controlla sono selezionate:

<!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 cambia solo l'aspetto (e quello che annunciano i lettori di schermo: "misto" o "parzialmente selezionata"). Sotto, la casella resta selezionata o non selezionata, ed è questo che il form invia. Cliccare una casella indeterminata toglie il trattino e ne cambia lo stato.

Usa l'evento change per reagire a una checkbox, e leggi box.checked per il suo stato. box.value non cambia quando la casella viene spuntata o no.

Dare stile alle checkbox

La modifica più rapida è accent-color, che ricolora la checkbox nativa e ne conserva tutto il comportamento. Per un aspetto del tutto diverso, appearance: none toglie il disegno nativo e ti permette di dare stile all'input come a qualsiasi riquadro:

<!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 casella personalizzata è ancora una vera checkbox: cambia stato con il clic e con la barra spaziatrice, viene inviata con il form e viene annunciata come checkbox. Disegnala con :checked e mantieni uno stile :focus-visible, perché senza il disegno nativo non c'è nessun contorno di focus che non abbia aggiunto tu.

Un interruttore (toggle switch)

Un interruttore è una checkbox che significa "acceso/spento adesso" invece di "includi questo". Disegnalo con appearance: none e aggiungi role="switch" così i lettori di schermo annunciano un interruttore acceso o spento invece di una checkbox selezionata:

<!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 posiziona il pomello a partire dall'inizio della riga, quindi l'interruttore scorre nell'altro verso nelle pagine da destra a sinistra, come deve. Per scelte sì/no raggruppate in cui se ne può scegliere solo una, vedi i radio button in HTML.

Errori comuni

Aspettarsi false per una casella non selezionata. Non viene inviato niente. Sul server tratta un nome mancante come "spento", oppure aggiungi l'input nascosto.
checked="false". Seleziona comunque la casella. Togli l'attributo.
Una checkbox senza etichetta, o con accanto un testo che non è un <label>. La casellina diventa l'unico punto cliccabile e i lettori di schermo annunciano "checkbox" senza nome. Vedi label in HTML.
Dimenticare value, così ogni casella di un gruppo invia on e il server non riesce a distinguerle.
Leggere box.value per sapere se è selezionata. Usa box.checked.
Checkbox per "scegline una". A questo servono i radio button.

Domande frequenti

Come si crea una checkbox in HTML?

Usa <input type="checkbox"> dentro un'etichetta: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. L'etichetta rende cliccabile anche il testo.

Come faccio a rendere una checkbox selezionata di default?

Aggiungi l'attributo checked: <input type="checkbox" name="news" checked>. Conta la sua presenza, quindi checked="false" la seleziona comunque. In JavaScript, imposta box.checked = true o false.

Che valore invia una checkbox non selezionata?

Nessuno. Una checkbox non selezionata resta completamente fuori dai dati inviati. Una selezionata invia il suo value, oppure on se non ha value. Se il server ha bisogno di un "no" esplicito, metti un input nascosto con lo stesso nome prima della checkbox.

Come leggo il valore di una checkbox in JavaScript?

Leggi box.checked, che è true o false. box.value è il valore che invierebbe, e resta uguale che la casella sia selezionata o no. Ascolta l'evento change per reagire quando viene cambiata.

Come cambio il colore di una checkbox?

Imposta accent-color: input[type=checkbox] { accent-color: #16a34a; }. Per un aspetto del tutto personalizzato, imposta appearance: none e disegna tu la casella e il segno di spunta con il CSS.

Concetti correlati