Checkbox

Componente checkbox con API conveniente y compuesta

Componente checkbox construido con Ark UI que admite tanto una API conveniente como una API compuesta completa.

Acepto los términos y condiciones

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

export default function Example() {
  return <Checkbox label="Acepto los términos y condiciones" />;
}

View Code

Instalación

bash

liminal add checkbox

Uso

Acepto los términos y condiciones

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

export default function Example() {
  return <Checkbox label="Acepto los términos y condiciones" />;
}

View Code

Ejemplos

API compuesta

Suscribirse al boletín

import {
  CheckboxRoot,
  CheckboxControl,
  CheckboxLabel,
  CheckboxHiddenInput,
} from "@/components/ui/checkbox";

export default function Example() {
  return (
    <CheckboxRoot className="inline-flex items-center gap-2">
      <CheckboxHiddenInput />
      <CheckboxControl />
      <CheckboxLabel>Suscribirse al boletín</CheckboxLabel>
    </CheckboxRoot>
  );
}

View Code

API

Prop	Type	Default	Description
label	React.ReactNode	-	Texto del label que se muestra junto al checkbox.
checked	boolean	-	Estado checked controlado.
defaultChecked	boolean	-	Estado checked inicial cuando no está controlado.
onCheckedChange	(details: { checked: boolean }) => void	-	Callback cuando cambia el estado checked.