Casilla

"use client"

import { Checkbox } from "@/components/ui/checkbox"

La casilla de verificación es el control estándar para decisiones binarias: marcada, sin marcar o indeterminada para selecciones parciales. Está construida sobre la primitiva Base UI Checkbox y sigue la receta neobrutalista: bordes gruesos, sombras duras y tipografía contundente.

Úsalo cuando:

• Términos y consentimiento — la casilla de «Acepto» en los flujos de registro y pago, enviada junto con el formulario.
• Filtros de selección múltiple — categorías, etiquetas o rangos de precio en una barra lateral donde cualquier combinación es válida.
• Selección masiva en tablas — casillas por fila más un «seleccionar todo» indeterminado en la cabecera.

Instalación#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
npx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
Copiar

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Copiar

"use client"

import * as React from "react"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer relative flex size-5 shrink-0 items-center justify-center rounded border-2 bg-input shadow-sm transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-checked:border-border data-checked:bg-primary data-checked:text-primary-foreground",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
      >
        <CheckIcon />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

Uso#

Copiarimport { Checkbox } from "@/components/ui/checkbox"

Copiar<Checkbox />

Estado marcado#

Usa defaultChecked para casillas no controladas, o checked y onCheckedChange para controlar el estado.

Copiarimport * as React from "react"
 
export function Example() {
  const [checked, setChecked] = React.useState(false)
 
  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

Estado no válido#

Aplica aria-invalid a la casilla y data-invalid al contenedor del campo para mostrar los estilos de error.

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

Ejemplos#

Básico#

Combina la casilla con Field y FieldLabel para una disposición y un etiquetado correctos.

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

Descripción#

Usa FieldContent y FieldDescription para el texto de ayuda.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,

Deshabilitado#

Usa la prop disabled para impedir la interacción y añade el atributo data-disabled al componente <Field> para aplicar los estilos deshabilitados.

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

Grupo#

Usa varios campos para crear una lista de casillas.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,

Tabla#

"use client"

import * as React from "react"

RTL#

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad#

La casilla de verificación sigue el patrón Checkbox de WAI-ARIA: la primitiva renderiza un elemento role="checkbox" con aria-checked (incluido "mixed" para el estado indeterminado) y sincroniza un input nativo oculto para que el valor se envíe con los formularios.

Interacciones de teclado:

Enter no alterna la casilla: lo dicta el patrón ARIA, no es un error.

Referencia de API#

Consulta la documentación de Base UI para obtener más información.