checkbox.jsx 1.1 KB

123456789101112131415161718192021222324252627282930
  1. "use client"
  2. import * as React from "react"
  3. import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
  4. import { CheckIcon } from "lucide-react"
  5. import { cn } from "@/lib/utils"
  6. function Checkbox({
  7. className,
  8. ...props
  9. }) {
  10. return (
  11. <CheckboxPrimitive.Root
  12. data-slot="checkbox"
  13. className={cn(
  14. "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",
  15. className
  16. )}
  17. {...props}>
  18. <CheckboxPrimitive.Indicator
  19. data-slot="checkbox-indicator"
  20. className="grid place-content-center text-current transition-none">
  21. <CheckIcon className="size-3.5" />
  22. </CheckboxPrimitive.Indicator>
  23. </CheckboxPrimitive.Root>
  24. );
  25. }
  26. export { Checkbox }