Neobrutalism components

Checkbox

'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-darkBg outline outline-2 outline-border dark:outline-darkBorder">
        {isChecked && <Check className="h-4 w-4" />}
      </div>
      <p className="text-black">{item}</p>
    </button>
  )
}

Usage

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>