Casilla

checkbox() dibuja un <label> que envuelve un <input type="checkbox"> de verdad y la caja que ves. El input queda oculto a la vista pero sigue ahí, así que recibe foco, se envía y toda la etiqueta es zona de clic — la marca se dibuja a partir del propio estado :checked del input, sin script de por medio.

Casilla básica

Enviarme novedades por correoMarcada

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Enviarme novedades por correo', name: 'updates' }),
  checkbox({ label: 'Marcada', name: 'checked', checked: true }),
)

Colores

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' }),
)

Deshabilitado

No disponibleActivada y bloqueada

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'No disponible', disabled: true }),
  checkbox({ label: 'Activada y bloqueada', checked: true, disabled: true }),
)

Etiquetas largas

La caja se mantiene alineada con la primera línea en vez de centrarse frente a un párrafo.

Ejecutar una auditoría de Lighthouse tras cada compilación y fallar la compilación cuando una puntuación baje de su umbral.

checkbox({
  label: 'Ejecutar una auditoría de Lighthouse tras cada compilación y fallar la compilación cuando una puntuación baje de su umbral.',
  name: 'lighthouse',
  checked: true,
})

Grupos

choiceGroup() construye un conjunto de casillas a partir de datos, con leyenda y nombre compartidos. Pasa un array como value para marcar varias.

Generar

sitemap.xmlrss.xmlÍndice de Pagefind

Cada uno se escribe en dist/ al final de la compilación.

choiceGroup({
  legend: 'Generar',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Índice de Pagefind' },
  ],
  help: 'Cada uno se escribe en dist/ al final de la compilación.',
})

En fila

Categorías

performanceaccessibilityseo

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

Con un field

Una casilla suelta rara vez necesita además una etiqueta encima. Cuando un grupo sí la necesita, field() le da el mismo tratamiento de etiqueta, ayuda y error que a un campo de texto.

CondicionesAcepto las condiciones

Tienes que aceptar las condiciones para continuar.

field({ label: 'Condiciones', error: 'Tienes que aceptar las condiciones para continuar.' },
  checkbox({ label: 'Acepto las condiciones', name: 'terms', color: 'danger' }),
)

Props

Prop	Tipo	Por defecto	Descripción
`label`	`Child`	—	Texto junto a la caja. Omítelo para un control pelado.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color cuando está marcada.
`checked`	`boolean`	`false`	Si empieza marcada.
`name`	`string`	—	Nombre del campo en el formulario.
`value`	`string \| number`	—	Valor que se envía cuando está marcada.
`disabled`	`boolean`	`false`	Deshabilita el input y atenúa la etiqueta.

Todo lo demás aterriza en el <input>, no en la etiqueta: así required, onchange y data-* van donde esperarías. Usa class para dar estilo a la propia etiqueta.

Para un conjunto construido a partir de datos, mira choiceGroup() en la página Grupo de radios: admite las mismas opciones en ambos casos, cambiando con type: 'checkbox'.