Selectable Checkbox Badge

import Cmp from "@/registry/origin-ui/comp-423";

export default function Demo() {
  return <Cmp />;
}

import { CheckIcon } from "lucide-react";
import { useId } from "react";

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

export default function Component() {
  const id = useId();
  return (
    <Badge className="relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50">
      <Checkbox
        className="peer sr-only after:absolute after:inset-0"
        defaultChecked
        id={id}
      />
      <CheckIcon
        aria-hidden="true"
        className="hidden peer-data-[state=checked]:block"
        size={12}
      />
      <label
        className="cursor-pointer select-none after:absolute after:inset-0"
        htmlFor={id}
      >
        Selectable
      </label>
    </Badge>
  );
}