Neobrutalism components

Radio Group

'use client'

import { useState } from 'react'

export default function RadioGroup({ items }: { items: string[] }) {
  const [activeItem, setActiveItem] = useState<string | null>(null)

  return (
    <div className="font-base">
      {items.map((item) => {
        const isChecked = activeItem === item

        return (
          <button
            onClick={() => {
              setActiveItem(item)
            }}
            className="my-2 flex items-center"
            role="radio"
            aria-checked={isChecked}
            key={item}
          >
            <div className="mr-2.5 h-5 w-5 rounded-full bg-white dark:bg-darkBg p-1 outline outline-2 outline-black">
              {isChecked && (
                <div className="h-full w-full rounded-full bg-black dark:bg-white"></div>
              )}
            </div>
            <p className="text-text">{item}</p>
          </button>
        )
      })}
    </div>
  )
}

Usage

This component is just a reference how radio group should look like, I highly suggest you to use react-hook-form for this one.

import RadioGroup from '@/components/RadioGroup'

<div className="rounded-base border-2 border-border dark:border-darkBorder bg-main p-10 py-5 shadow-light dark:shadow-dark">
  <RadioGroup items={['item 1', 'item 2', 'item 3']} />
</div>