| 1 |
export const CheckboxInput = ({ |
| 2 |
label, |
| 3 |
checked, |
| 4 |
onChange, |
| 5 |
slug = 'checkbox-input', |
| 6 |
}) => { |
| 7 |
return ( |
| 8 |
<label |
| 9 |
htmlFor={slug} |
| 10 |
className="relative flex h-full w-full cursor-pointer items-center justify-between rounded-xs p-2 text-gray-900" |
| 11 |
> |
| 12 |
<div className="flex flex-auto items-center"> |
| 13 |
<span className="relative mr-1 inline-block h-4 w-4 align-middle rtl:ml-1 rtl:mr-0"> |
| 14 |
<input |
| 15 |
id={slug} |
| 16 |
className="h-4 w-4 rounded-xs focus:ring-0 focus:ring-offset-0" |
| 17 |
type="checkbox" |
| 18 |
onChange={onChange} |
| 19 |
checked={checked} |
| 20 |
/> |
| 21 |
<svg |
| 22 |
className="absolute inset-0 -mt-px block h-4 w-4 text-transparent" |
| 23 |
viewBox="1 0 20 20" |
| 24 |
fill="none" |
| 25 |
xmlns="http://www.w3.org/2000/svg" |
| 26 |
role="presentation" |
| 27 |
> |
| 28 |
<path |
| 29 |
d="M8.72912 13.7449L5.77536 10.7911L4.76953 11.7899L8.72912 15.7495L17.2291 7.24948L16.2304 6.25073L8.72912 13.7449Z" |
| 30 |
fill="currentColor" |
| 31 |
/> |
| 32 |
</svg> |
| 33 |
</span> |
| 34 |
<span className="font-light">{label}</span> |
| 35 |
</div> |
| 36 |
</label> |
| 37 |
); |
| 38 |
}; |
| 39 |
|
