Checkbox
FormStyled checkbox with label and indeterminate state.
Preview
Usage
example.jsx
import { Checkbox } from "@/components/ui/checkbox";
export default function Example() {
return <Checkbox />;
}Source Code
Copy this file into components/ui/checkbox.jsx in your project.
checkbox.jsx
"use client";
import { forwardRef } from "react";
import { cn } from "@/lib/utils";
const Checkbox = forwardRef(({ className, ...props }, ref) => {
return (
<input
type="checkbox"
ref={ref}
className={cn(
"h-4 w-4 shrink-0 rounded border border-primary shadow-sm",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
"disabled:cursor-not-allowed disabled:opacity-50",
"accent-primary cursor-pointer",
className
)}
{...props}
/>
);
});
Checkbox.displayName = "Checkbox";
export { Checkbox };
Quick Install
Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.
npm install clsx tailwind-merge