"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"

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

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer size-4 shrink-0 rounded border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("group flex items-center justify-center text-current")}
    >
      <svg
        width="0.875rem"
        height="0.875rem"
        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-[state=checked]:visible"
        />
        <rect
          x="3"
          y="5.8"
          width="8"
          height="2.4"
          rx="1.2"
          className="invisible group-data-[state=indeterminate]:visible"
        />
      </svg>
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
Checkbox

Installation

Usage

API

Examples

Checked

Disabled
