item 1
item 2
item 3
'use client' import { Check } from 'lucide-react' import { useState } from 'react' export default function Checkbox({ item }: { item: string }) { const [isChecked, setIsChecked] = useState(false) return ( <button onClick={() => { setIsChecked(!isChecked) }} className="my-2 flex items-center font-base" role="checkbox" aria-checked={isChecked} > <div className="mr-2.5 grid h-5 w-5 place-items-center bg-white dark:bg-secondaryBlack outline outline-2 outline-border dark:outline-darkBorder"> {isChecked && <Check className="h-4 w-4" />} </div> <p className="text-black">{item}</p> </button> )}
This component is just a reference how checkbox should look like, I highly suggest you to use react-hook-form for this one.
import Checkbox from '@/components/Checkbox'
<div className="rounded-base border-2 border-border dark:border-darkBorder bg-main p-10 py-5 shadow-light dark:shadow-dark"> <Checkbox item="item 1" /> <Checkbox item="item 2" /> <Checkbox item="item 3" /></div>
xd