Casilla de verificación

Accept terms and conditions

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

export default function CheckboxDemo() {
  return (
    <div className="flex items-center gap-3">
      <Checkbox id="checkbox-terms" />
      <Label htmlFor="checkbox-terms">Accept terms and conditions</Label>
    </div>
  )
}

Instalación

npx logic2b@next add checkbox

¿Trabajas con un asistente de IA? Copia este prompt en Claude Code, Cursor o Copilot: incluye los pasos de instalación, una alternativa sin CLI y una lista de verificación.

Add the "checkbox" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@next init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@next add checkbox
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/checkbox.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Instala las dependencias:

npm install radix-ui lucide-react

Copia el contenido en ui/checkbox.tsx:

"use client"

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

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

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

Uso

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

<Checkbox id="terms" />

Ejemplos

Con texto

Combina la casilla con Label y una descripción de ayuda.

Enable notifications

You can turn these off at any time in settings.

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

export default function CheckboxWithTextDemo() {
  return (
    <div className="flex items-start gap-3">
      <Checkbox id="checkbox-notifications" defaultChecked />
      <div className="grid gap-1.5">
        <Label htmlFor="checkbox-notifications">Enable notifications</Label>
        <p className="text-muted-foreground text-sm">
          You can turn these off at any time in settings.
        </p>
      </div>
    </div>
  )
}

Desactivada

Accept terms (unavailable)

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

export default function CheckboxDisabledDemo() {
  return (
    <div className="flex items-center gap-3">
      <Checkbox id="checkbox-disabled" disabled />
      <Label htmlFor="checkbox-disabled">Accept terms (unavailable)</Label>
    </div>
  )
}

Accesibilidad

Expone role="checkbox" y refleja el estado mediante aria-checked, incluido el estado mixto o indeterminado.
Espacio alterna la casilla enfocada; Tab permite alcanzarla.
Asocia un Label mediante un htmlFor que coincida con el id de la casilla para que el texto también active el control.

Playground interactivo

Edita las propiedades del componente y revisa el JSX exacto antes de copiarlo. La vista previa se carga solo cuando esta sección entra en pantalla.

JSX generado

<Checkbox
  defaultChecked
  aria-label="Accept terms"
 />

Referencia de API

Generada a partir de las exportaciones públicas de TypeScript en src/ui/checkbox.tsx. Las descripciones técnicas conservan el texto canónico del código fuente.

Ver JSON

Checkbox

Componente

Props: React.ComponentProps<typeof CheckboxPrimitive.Root>

Contrato de accesibilidad

Comportamiento legible por máquinas y responsabilidades de quien integra checkbox. Los detalles normativos conservan el texto canónico del registro.

Ver JSON

Soporte: Gestionado por la primitiva
Patrón: checkbox; Radix Checkbox

Interacciones de teclado para checkbox
Teclas	Comportamiento
`Enter` `Space`	Activate the focused control.

Semántica incorporada

Exposes role=checkbox and aria-checked, including the mixed state.

Responsabilidades de integración

Associate the control with a visible Label or aria-label.