Checkbox

Un control que permite al usuario alternar entre marcado y no marcado.

default.tsx

1'use client';
2
3import { Checkbox } from '@/components/ui/checkbox';
4
5export function Default() {
6  return <Checkbox aria-label="Default checkbox" />;
7}

Instalación

pnpm dlx nachui add checkbox

Anatomía

1import { Checkbox } from '@/components/ui/checkbox';

1<Checkbox id="terms" />

Variantes

Predeterminado (Default)

default.tsx

1'use client';
2
3import { Checkbox } from '@/components/ui/checkbox';
4
5export function Default() {
6  return <Checkbox aria-label="Default checkbox" />;
7}

Con Etiqueta (With Label)

Acompañado de una etiqueta (Label) para proveer contexto extra.

Accept terms and conditions

with-label.tsx

1'use client';
2
3import { Checkbox } from '@/components/ui/checkbox';
4import { Label } from '@/components/ui/label';
5
6export function WithLabel() {
7  return (
8    <div className="flex items-center gap-2">
9      <Checkbox id="terms" />
10      <Label htmlFor="terms">Accept terms and conditions</Label>
11    </div>
12  );
13}

Deshabilitado (Disabled)

Estado en el que el usuario no puede interactuar con él.

Accept terms and conditions

disabled.tsx

1'use client';
2
3import { Checkbox } from '@/components/ui/checkbox';
4import { Label } from '@/components/ui/label';
5
6export function Disabled() {
7  return (
8    <div className="flex items-center gap-2">
9      <Checkbox id="disabled-terms" disabled />
10      <Label htmlFor="disabled-terms" className="opacity-50">
11        Accept terms and conditions
12      </Label>
13    </div>
14  );
15}

Referencia de API

Checkbox

Prop	Tipo	Por defecto	Descripción
`onCheckedChange`	`(checked: boolean) => void`	-	Handler cuando el estado cambia
`disabled`	`boolean`	-	Evita interacción y reduce opacidad

AnteriorCard SiguienteCollapsible