Casella di controllo

checkbox() renderizza una <label> che avvolge un vero <input type="checkbox"> e la casella che vedi. L’input è nascosto visivamente ma c’è ancora, quindi riceve il focus, viene inviato, e tutta l’etichetta è un bersaglio cliccabile — il segno di spunta è disegnato a partire dallo stato :checked dell’input stesso, senza che entri in gioco alcuno script.

Casella di base

Mandami gli aggiornamenti via emailSpuntata

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Mandami gli aggiornamenti via email', name: 'updates' }),
  checkbox({ label: 'Spuntata', name: 'checked', checked: true }),
)

Colori

stack({ direction: 'row', gap: 'lg', wrap: true },
  checkbox({ label: 'Primary', checked: true, color: 'primary' }),
  checkbox({ label: 'Neutral', checked: true, color: 'neutral' }),
  checkbox({ label: 'Success', checked: true, color: 'success' }),
  checkbox({ label: 'Warning', checked: true, color: 'warning' }),
  checkbox({ label: 'Danger', checked: true, color: 'danger' }),
)

Disattivata

Non disponibileSpuntata, e bloccata

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Non disponibile', disabled: true }),
  checkbox({ label: 'Spuntata, e bloccata', checked: true, disabled: true }),
)

Etichette lunghe

La casella resta allineata alla prima riga invece di centrarsi rispetto a un paragrafo.

Esegui un audit Lighthouse dopo ogni build, e fai fallire la build quando un punteggio scende sotto la sua soglia.

checkbox({
  label: 'Esegui un audit Lighthouse dopo ogni build, e fai fallire la build quando un punteggio scende sotto la sua soglia.',
  name: 'lighthouse',
  checked: true,
})

Gruppi

choiceGroup() costruisce dai dati un insieme di caselle, con legenda e nome condivisi. Passa un array come value per spuntarne diverse.

Genera

sitemap.xmlrss.xmlIndice Pagefind

Ciascuno viene scritto in dist/ alla fine della build.

choiceGroup({
  legend: 'Genera',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Indice Pagefind' },
  ],
  help: 'Ciascuno viene scritto in dist/ alla fine della build.',
})

In riga

Categorie

performanceaccessibilityseo

choiceGroup({
  legend: 'Categorie',
  name: 'categories',
  type: 'checkbox',
  direction: 'row',
  value: ['performance'],
  options: ['performance', 'accessibility', 'seo'],
})

Con un campo

Una singola casella raramente ha bisogno anche di un’etichetta sopra. Quando ne ha bisogno un gruppo, field() gli dà lo stesso trattamento di etichetta, aiuto ed errore di un campo di testo.

CondizioniAccetto le condizioni

Devi accettare le condizioni per proseguire.

field({ label: 'Condizioni', error: 'Devi accettare le condizioni per proseguire.' },
  checkbox({ label: 'Accetto le condizioni', name: 'terms', color: 'danger' }),
)

Props

Prop	Tipo	Predefinito	Descrizione
`label`	`Child`	—	Testo accanto alla casella. Omettilo per un controllo nudo.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Colore quando è spuntata.
`checked`	`boolean`	`false`	Se parte spuntata.
`name`	`string`	—	Nome del campo del form.
`value`	`string \| number`	—	Valore inviato quando è spuntata.
`disabled`	`boolean`	`false`	Disattiva l’input e attenua l’etichetta.

Tutto il resto finisce sull’<input>, non sull’etichetta — quindi required, onchange e data-* vanno dove ti aspetteresti. Usa class per dare stile all’etichetta stessa.

Per un insieme costruito dai dati, vedi choiceGroup() nella pagina Gruppo di radio — accetta le stesse opzioni in entrambi i casi, commutate da type: 'checkbox'.