PrimitiveDisponible
Checkbox
Selección independiente con estados marcado, mixto y deshabilitado.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/checkbox.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
'use client';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
export default function Demo() {
return (
<div className="grid gap-5">
<div className="flex items-center gap-3">
<Checkbox id="updates" defaultChecked />
<Label htmlFor="updates">Email me product updates</Label>
</div>
<div className="flex items-center gap-3">
<Checkbox id="disabled-checkbox" disabled />
<Label htmlFor="disabled-checkbox">Unavailable option</Label>
</div>
</div>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- Documenta el valor inicial, seleccionado, deshabilitado y foco. La selección cambia el indicador o la posición, además del color.
- Usa Espacio para activar botones de selección; las flechas cambian radios y sliders. Checkbox admite un estado mixto.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| checked | boolean | uncontrolled | Controlled checked state. |
| indeterminate | boolean | false | Represents a partially selected group. |
| onCheckedChange | function | — | Called when the selection changes. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Conserva las etiquetas visibles y el HTML semántico del ejemplo.
Mantén el foco visible y comprueba la composición mediante el teclado.
Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.