Vai al contenuto
Italia daisy
Storybook
Tema
  • Italia
  • daisyUI

Componente

Checkbox

Caselle di controllo native con daisyUI checkbox nel colore primario, raggruppate in un fieldset con legenda, testo di aiuto e messaggio di errore.

Riferimento
<it-checkbox>
Classi
ita-checkboxita-checkbox-smita-checkbox-lgita-choiceita-choice-endita-choice-textita-choice-hintita-choice-groupita-legendita-choice-listita-choice-list-inlineita-validate
Basato su (daisyUI)
checkboxfieldsetvalidator
Solo CSS
Lo stato indeterminato esiste solo come proprietà DOM (el.indeterminate = true): non ha un attributo HTML, quindi serve una riga di JavaScript. L'etichetta avvolge il controllo, così tutta la riga è cliccabile.
Storybook
Apri le storie di Checkbox

Esempio base

Mostra il codice HTML
<div class="flex flex-col gap-3">
  <label for="checkbox-1" class="ita-choice"><input type="checkbox" id="checkbox-1" class="ita-checkbox" name="termini"><span class="ita-choice-text"><span>Accetto i termini del servizio</span></span></label>
  <label for="checkbox-2" class="ita-choice"><input type="checkbox" id="checkbox-2" class="ita-checkbox" name="newsletter" checked><span class="ita-choice-text"><span>Iscrivimi alla newsletter</span></span></label>
</div>

Gruppo con legenda

Argomenti di interesse

Puoi sceglierne più di uno.

Mostra il codice HTML
<fieldset class="ita-choice-group" aria-describedby="checkbox-group-3-hint">
  <legend class="ita-legend">Argomenti di interesse</legend>
  <p id="checkbox-group-3-hint" class="ita-hint">Puoi sceglierne più di uno.</p>
  <div class="ita-choice-list">
    <label for="checkbox-4" class="ita-choice"><input type="checkbox" id="checkbox-4" class="ita-checkbox" name="interessi" value="cultura" checked><span class="ita-choice-text"><span>Cultura e turismo</span></span></label>
    <label for="checkbox-5" class="ita-choice"><input type="checkbox" id="checkbox-5" class="ita-checkbox" name="interessi" value="mobilita"><span class="ita-choice-text"><span>Mobilità e trasporti</span></span></label>
    <label for="checkbox-6" class="ita-choice"><input type="checkbox" id="checkbox-6" class="ita-checkbox" name="interessi" value="scuola"><span class="ita-choice-text"><span>Scuola e formazione</span></span></label>
  </div>
</fieldset>

In linea

Giorni di reperibilità
Mostra il codice HTML
<fieldset class="ita-choice-group">
  <legend class="ita-legend">Giorni di reperibilità</legend>
  <div class="ita-choice-list ita-choice-list-inline">
    <label for="checkbox-8" class="ita-choice"><input type="checkbox" id="checkbox-8" class="ita-checkbox" name="giorni" value="lun" checked><span class="ita-choice-text"><span>Lun</span></span></label>
    <label for="checkbox-9" class="ita-choice"><input type="checkbox" id="checkbox-9" class="ita-checkbox" name="giorni" value="mar" checked><span class="ita-choice-text"><span>Mar</span></span></label>
    <label for="checkbox-10" class="ita-choice"><input type="checkbox" id="checkbox-10" class="ita-checkbox" name="giorni" value="mer"><span class="ita-choice-text"><span>Mer</span></span></label>
    <label for="checkbox-11" class="ita-choice"><input type="checkbox" id="checkbox-11" class="ita-checkbox" name="giorni" value="gio"><span class="ita-choice-text"><span>Gio</span></span></label>
    <label for="checkbox-12" class="ita-choice"><input type="checkbox" id="checkbox-12" class="ita-checkbox" name="giorni" value="ven"><span class="ita-choice-text"><span>Ven</span></span></label>
  </div>
</fieldset>

Con descrizione

Notifiche
Mostra il codice HTML
<fieldset class="ita-choice-group">
  <legend class="ita-legend">Notifiche</legend>
  <div class="ita-choice-list">
    <label for="checkbox-14" class="ita-choice"><input type="checkbox" id="checkbox-14" class="ita-checkbox" checked aria-describedby="checkbox-14-hint"><span class="ita-choice-text"><span>Email</span><span id="checkbox-14-hint" class="ita-choice-hint">Ricevi un riepilogo settimanale all'indirizzo registrato.</span></span></label>
    <label for="checkbox-15" class="ita-choice"><input type="checkbox" id="checkbox-15" class="ita-checkbox" aria-describedby="checkbox-15-hint"><span class="ita-choice-text"><span>SMS</span><span id="checkbox-15-hint" class="ita-choice-hint">Solo per scadenze e pagamenti.</span></span></label>
    <label for="checkbox-16" class="ita-choice"><input type="checkbox" id="checkbox-16" class="ita-checkbox" aria-describedby="checkbox-16-hint"><span class="ita-choice-text"><span>App IO</span><span id="checkbox-16-hint" class="ita-choice-hint">Messaggi e avvisi sull'app dei servizi pubblici.</span></span></label>
  </div>
</fieldset>

Disabilitato

Mostra il codice HTML
<div class="flex flex-col gap-3">
  <label for="checkbox-17" class="ita-choice"><input type="checkbox" id="checkbox-17" class="ita-checkbox" disabled><span class="ita-choice-text"><span>Opzione disabilitata</span></span></label>
  <label for="checkbox-18" class="ita-choice"><input type="checkbox" id="checkbox-18" class="ita-checkbox" checked disabled><span class="ita-choice-text"><span>Opzione selezionata e disabilitata</span></span></label>
</div>

Dimensioni

Mostra il codice HTML
<div class="flex flex-wrap items-center gap-6">
  <label for="checkbox-19" class="ita-choice"><input type="checkbox" id="checkbox-19" class="ita-checkbox ita-checkbox-sm" checked><span class="ita-choice-text"><span>Piccola</span></span></label>
  <label for="checkbox-20" class="ita-choice"><input type="checkbox" id="checkbox-20" class="ita-checkbox" checked><span class="ita-choice-text"><span>Standard</span></span></label>
  <label for="checkbox-21" class="ita-choice"><input type="checkbox" id="checkbox-21" class="ita-checkbox ita-checkbox-lg" checked><span class="ita-choice-text"><span>Grande</span></span></label>
</div>

Validazione

A sinistra lo stato dal server; a destra la validazione nativa: seleziona e deseleziona la casella.

Privacy

Devi accettare l'informativa per proseguire

Privacy
Mostra il codice HTML
<div class="grid gap-8 md:grid-cols-2">
<fieldset class="ita-choice-group" aria-describedby="checkbox-group-22-feedback">
  <legend class="ita-legend">Privacy <span class="ita-required" aria-hidden="true">*</span></legend>
  <div class="ita-choice-list">
    <label for="checkbox-23" class="ita-choice"><input type="checkbox" id="checkbox-23" class="ita-checkbox" required><span class="ita-choice-text"><span>Ho letto l'informativa sulla privacy</span></span></label>
  </div>
  <p id="checkbox-group-22-feedback" class="ita-feedback ita-feedback-invalid"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,18.3h1.2v-1.8h-1.2V18.3z M22,7.9v8.3L16.1,22H7.9L2,16.2V7.9L7.9,2h8.2L22,7.9z M21,8.3L15.7,3H8.3L3,8.3v7.5L8.3,21h7.4l5.3-5.2V8.3z" /></svg><span>Devi accettare l'informativa per proseguire</span></p>
</fieldset>
<fieldset class="ita-choice-group">
  <legend class="ita-legend">Privacy <span class="ita-required" aria-hidden="true">*</span></legend>
  <div class="ita-choice-list">
    <label for="checkbox-25" class="ita-choice"><input type="checkbox" id="checkbox-25" class="ita-checkbox ita-validate" required><span class="ita-choice-text"><span>Ho letto l'informativa sulla privacy</span></span></label>
  </div>
</fieldset>
</div>

Con JavaScript (opzionale)

La ricetta è solo CSS e funziona così com'è. Questi frammenti non sono inclusi nel pacchetto: mostrano come aggiungere il comportamento che richiede uno script, in JavaScript semplice o in React.

«Seleziona tutti» con stato indeterminatojs

indeterminate esiste solo come proprietà DOM: una casella padre che riflette le figlie.

// <input type="checkbox" class="ita-checkbox" data-all="interessi"> + children name="interessi"
document.querySelectorAll("input[data-all]").forEach((all) => {
  const kids = [...document.querySelectorAll('input[name="' + all.dataset.all + '"]')];
  const sync = () => {
    const n = kids.filter((k) => k.checked).length;
    all.checked = n === kids.length;
    all.indeterminate = n > 0 && n < kids.length;
  };
  all.addEventListener("change", () => { kids.forEach((k) => (k.checked = all.checked)); sync(); });
  kids.forEach((k) => k.addEventListener("change", sync));
  sync();
});

Checkbox indeterminato in Reacttsx

import { useEffect, useRef, type InputHTMLAttributes } from "react";

export function Checkbox({ indeterminate = false, label, ...rest }: InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean; label: string }) {
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => { if (ref.current) ref.current.indeterminate = indeterminate; }, [indeterminate]);
  return (
    <label className="flex cursor-pointer items-center gap-3">
      <input ref={ref} type="checkbox" className="ita-checkbox" {...rest} />
      <span>{label}</span>
    </label>
  );
}