Checkbox

Casilla de verificación con soporte de estado controlado e indeterminado. Tres tamaños, cinco tonos de color y label/description opcionales. Al hacer clic, el estado indeterminado pasa directamente a true.

Sin marcarMarcadoIndeterminadoDeshabilitadoMarcado y deshabilitado

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Checkbox } from "@tsukira/ui"; <Checkbox label="Recordar sesión" defaultChecked /><Checkbox label="Aceptar términos" required /><Checkbox checked="indeterminate" label="Seleccionar todos" onCheckedChange={(v) => console.log(v)} />

Ejemplos#

Playground

cambia las props y el código se regenera

Aceptar términosAcepto los términos y condiciones de uso

name

required

Inactivo

size

tone

label

description

Tamaños

sm · md · lg

smmdlg

Tonos

brand · success · warning · danger · ink

brandsuccesswarningdangerink

Estados

checked · indeterminate · disabled

Sin marcarMarcadoIndeterminadoDeshabilitadoMarcado y deshabilitado

Con description

label + description

MarketingRecibe novedades, descuentos y ofertas exclusivas.Boletín semanalResumen editorial cada lunes a las 9:00.

Fusión: lista de tareas con Badge de prioridad

Checkbox + Badge — estado controlado con useState

Revisar PRs pendientesAlta

Actualizar dependenciasMedia

Escribir tests unitariosMedia

Actualizar READMEBaja

0/4 completadas

Fusión: formulario de consentimientos en Card

Checkbox + Card + Button — botón habilitado solo si se marcan los requisitos

Crear cuenta

Revisa y acepta las condiciones antes de continuar.

Acepto los términos de servicioRequerido para crear una cuenta.He leído la política de privacidadRequerido por normativa RGPD.Quiero recibir comunicaciones de marketingOpcional. Puedes darte de baja en cualquier momento.

API#

CheckboxPropsextends Omit< ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'checked' | 'defaultChecked' >

Prop	Tipo	Default	Descripción
`checked`	`CheckboxCheckedState`	—	Estado controlado.
`defaultChecked`	`CheckboxCheckedState`	—	Estado inicial (no controlado).
`onCheckedChange`	`((checked: CheckboxCheckedState) => void)`	—	Cambio de estado (indeterminate pasa a true al hacer clic).
`name`	`string`	—	Participa en formularios nativos vía un input oculto.
`value`	`string`	—	—
`required`	`boolean`	—	—
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`tone`	`'brand' \| 'success' \| 'warning' \| 'danger' \| 'ink'`	—	—
`label`	`string`	—	—
`description`	`string`	—	—