# Checkbox

A Radix checkbox with checked, unchecked, and indeterminate states, a check indicator, and a disabled state.

- Category: Forms
- License: MIT
- Page: https://www.saasuji.com/components/checkbox
- Install: npx shadcn@latest add https://www.saasuji.com/r/checkbox.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked | `boolean | "indeterminate"` | — | Controlled checked state, including the indeterminate state. |
| defaultChecked | `boolean | "indeterminate"` | `false` | Initial checked state for an uncontrolled checkbox. |
| onCheckedChange | `(checked: boolean | "indeterminate") => void` | — | Called when the checked state changes. |
| disabled | `boolean` | `false` | Disables interaction and reduces opacity. |
| required | `boolean` | `false` | Marks the checkbox as required for form submission. |
| name | `string` | — | Name of the hidden input submitted with a form. |
| value | `string` | `"on"` | Value submitted with the form when the checkbox is checked. |
| className | `string` | — | Additional classes merged onto the checkbox root. |

## Source

```tsx
"use client"

import * as React from "react"
import CheckIcon from "lucide-react/dist/esm/icons/check"
import { Checkbox as CheckboxPrimitive } from "radix-ui"

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

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

```