Checkbox
A control that toggles between checked and unchecked states.
Installation
$
Usage
import { Checkbox } from "@/components/ui/checkbox"Examples
Default
Sizes
With description
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | The checkbox size: sm (14px), default (16px), or lg (20px). The check icon scales to match. |
| checked | boolean | "indeterminate" | - | The controlled checked state. Use with onCheckedChange. |
| defaultChecked | boolean | - | The initial checked state when uncontrolled. |
| onCheckedChange | (checked: boolean | "indeterminate") => void | - | Called when the checked state changes. |
| disabled | boolean | false | Disables the checkbox and dims it to 70% opacity. |
"use client"
import * as React from "react"
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
import { CheckIcon, MinusIcon } from "lucide-react"
import { cn } from "@/registry/lib/utils"
function Checkbox({
className,
size = "default",
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
size?: "sm" | "default" | "lg"
}) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
data-size={size}
className={cn(
"peer group/checkbox tap-target inline-flex items-center justify-center border-border dark:bg-neutral-800 data-[checked]:bg-accent data-[checked]:text-accent-foreground dark:data-[checked]:bg-accent data-[checked]:border-accent focus-visible:border-accent focus-visible:ring-ring-accent aria-invalid:ring-ring-destructive aria-invalid:border-destructive shrink-0 rounded-sm border shadow-xs transition-[transform,color,background-color,border-color,box-shadow] duration-150 ease-out motion-reduce:transition-none active:scale-[0.98] outline-none focus-visible:ring-1 cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70 data-[size=sm]:size-3.5 data-[size=default]:size-4 data-[size=lg]:size-5",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="grid place-content-center text-current animate-in zoom-in-50 duration-150 motion-reduce:animate-none"
>
<CheckIcon className="group-data-[indeterminate]/checkbox:hidden group-data-[size=sm]/checkbox:size-2 group-data-[size=default]/checkbox:size-2.5 group-data-[size=lg]/checkbox:size-3" />
<MinusIcon className="hidden group-data-[indeterminate]/checkbox:block group-data-[size=sm]/checkbox:size-2 group-data-[size=default]/checkbox:size-2.5 group-data-[size=lg]/checkbox:size-3" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
)
}
export { Checkbox }