Checkbox
Standard checkbox for form selections and multi-select lists. Pair with Label and wrap both in a Field container so the whole row is a click target, not just the box.
Live preview
open in new tab ↗"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"
function Checkbox({ className, ...props }) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className)}
{...props}
>
<CheckboxPrimitive.Indicator className="grid place-content-center text-current">
<CheckIcon className="size-3.5" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
)
}
export { Checkbox }Block id: shadcn-checkboxreact-tailwind · drop-in
More input blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.