49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
/**
|
|
* ✓ Checkbox Component
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
|
({ label, error, id, className = '', ...props }, ref) => {
|
|
const checkboxId = id || `checkbox-${Math.random()}`;
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
<input
|
|
ref={ref}
|
|
id={checkboxId}
|
|
type="checkbox"
|
|
className={`
|
|
w-5
|
|
h-5
|
|
rounded
|
|
border-gray-300
|
|
text-blue-600
|
|
focus:ring-blue-500
|
|
cursor-pointer
|
|
${error ? 'border-red-500' : 'border-gray-300'}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
{label && (
|
|
<label htmlFor={checkboxId} className="ml-2 text-gray-700 cursor-pointer">
|
|
{label}
|
|
</label>
|
|
)}
|
|
{error && <p className="text-red-500 text-sm ml-2">{error}</p>}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
Checkbox.displayName = 'Checkbox';
|
|
|
|
export default Checkbox;
|