| 1 |
import { Checkbox, Field, Label } from '@headlessui/react'; |
| 2 |
import { CheckIcon } from '@heroicons/react/24/solid'; |
| 3 |
|
| 4 |
const CheckBox = ({ checked, onChange, label, testid }) => { |
| 5 |
return ( |
| 6 |
<Field className="disco:flex disco:items-center disco:gap-2 disco:cursor-pointer disco:mb-4"> |
| 7 |
<Checkbox |
| 8 |
checked={checked} |
| 9 |
onChange={onChange} |
| 10 |
data-testid={testid} |
| 11 |
className="disco:w-4 disco:h-4 disco:rounded disco:border disco:border-primary disco:data-checked:bg-primary disco:data-checked:border-primary disco:bg-white disco:flex disco:items-center disco:justify-center" |
| 12 |
> |
| 13 |
<CheckIcon className="disco:hidden disco:w-3 disco:h-3 disco:text-white disco:in-data-checked:block" /> |
| 14 |
</Checkbox> |
| 15 |
<Label className="disco:text-base disco:select-none disco:cursor-pointer"> |
| 16 |
{label} |
| 17 |
</Label> |
| 18 |
</Field> |
| 19 |
); |
| 20 |
}; |
| 21 |
|
| 22 |
export default CheckBox; |
| 23 |
|
