44 lines
959 B
TypeScript
44 lines
959 B
TypeScript
import { forwardRef, type ComponentPropsWithoutRef } from "react";
|
|
import { cn } from "#/lib/cn";
|
|
|
|
export interface CheckboxProps extends ComponentPropsWithoutRef<"input"> {
|
|
label?: string;
|
|
}
|
|
|
|
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
|
({ className, label, id, disabled, ...props }, ref) => {
|
|
return (
|
|
<label
|
|
className={cn(
|
|
"flex items-center gap-2.5 cursor-pointer",
|
|
disabled && "cursor-not-allowed",
|
|
)}
|
|
>
|
|
<input
|
|
ref={ref}
|
|
type="checkbox"
|
|
id={id}
|
|
disabled={disabled}
|
|
className={cn(
|
|
"w-[18px] h-[18px] accent-blue-600 cursor-pointer",
|
|
disabled && "opacity-40 cursor-not-allowed",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
{label && (
|
|
<span
|
|
className={cn(
|
|
"text-sm font-medium text-slate-900",
|
|
disabled && "opacity-40",
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
)}
|
|
</label>
|
|
);
|
|
},
|
|
);
|
|
|
|
Checkbox.displayName = "Checkbox";
|