Checkbox

"use client"

import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"

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

function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "group/checkbox peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors not-data-disabled:cursor-pointer group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-hidden aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-[checked=mixed]:border-primary aria-[checked=mixed]:bg-primary aria-[checked=mixed]:text-primary-foreground aria-invalid:aria-[checked=mixed]:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 [&[data-disabled]~[data-slot=field-label]]:cursor-not-allowed [&~[data-slot=field-label]]:cursor-pointer",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
        render={(
          props: React.ComponentProps<"span">,
          state: CheckboxPrimitive.Indicator.State
        ) => (
          <svg
            viewBox="0 0 14 14"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
          >
            <path
              d="M11.9095 3.58171C12.3001 3.97224 12.3001 4.6054 11.9095 4.99593L6.25269 10.6528C6.06515 10.8403 5.8108 10.9457 5.54558 10.9457C5.28037 10.9457 5.02601 10.8403 4.83848 10.6528L2.29289 8.10719C1.90237 7.71667 1.90237 7.08351 2.29289 6.69298C2.68342 6.30246 3.31658 6.30246 3.70711 6.69298L5.54558 8.53146L10.4953 3.58171C10.8859 3.19119 11.519 3.19119 11.9095 3.58171Z"
              className="invisible group-data-checked/checkbox:visible"
            />
            {state.indeterminate && (
              <rect x="3" y="5.8" width="8" height="2.4" rx="1.2" />
            )}
          </svg>
        )}
      />
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

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

<Checkbox />