36 lines
1019 B
TypeScript
36 lines
1019 B
TypeScript
"use client";
|
|
import React, { forwardRef } from "react";
|
|
|
|
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label: string;
|
|
error?: string;
|
|
}
|
|
|
|
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
|
({ label, error, className = "", ...props }, ref) => {
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
ref={ref}
|
|
className={`
|
|
mt-1 w-4 h-4 rounded border-crisp text-ocean
|
|
focus:ring-ocean focus:ring-offset-0 cursor-pointer
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
<label className="text-[13px] text-navy/60 font-medium leading-tight cursor-pointer">
|
|
{label}
|
|
</label>
|
|
</div>
|
|
{error && (
|
|
<span className="text-red-500 text-xs font-bold">{error}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Checkbox.displayName = "Checkbox"; |