Checkbox

Casilla de verificación accesible con label integrado.

---

Import

import { Checkbox } from '@imansi/ui';

---

Uso básico

<Checkbox label="Acepto los términos y condiciones" />

---

Con label separado

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Acepto los términos</Label>
</div>

---

Estados

Marcado por defecto

<Checkbox label="Recibir newsletter" defaultChecked />

Deshabilitado

<Checkbox label="Opción no disponible" disabled />
<Checkbox label="Opción fija" disabled defaultChecked />

---

Con hint

<Checkbox
  label="Recordarme"
  hint="Mantené la sesión activa por 30 días"
/>

---

Controlado

import { useState } from 'react';
import { Checkbox } from '@imansi/ui';

export function Ejemplo() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      label="Acepto los términos"
      checked={checked}
      onCheckedChange={setChecked}
    />
  );
}

---

Props

Prop	Tipo	Default	Descripción
label	string | ReactNode	—	Texto del checkbox
hint	string	—	Texto de ayuda debajo
checked	boolean	—	Estado controlado
defaultChecked	boolean	false	Estado inicial
onCheckedChange	(checked: boolean) => void	—	Callback al cambiar
disabled	boolean	false	Deshabilita el checkbox
id	string	autogenerado	ID del input
className	string	—	Clases adicionales

---

Accesibilidad

• Navegable con Tab
• Se marca/desmarca con Space
• aria-checked se actualiza automáticamente
• Compatible con lectores de pantalla