initial setup, formik, fields, layout

components/Form/RadioGroup.tsx

@@ -0,0 +1,57 @@
+import { useField } from "formik"
+import React from "react"
+import ErrorMessage from "./ErrorMessage"
+import RequiredAsterisk from "./RequiredAsterisk"
+import * as RadioGroup from "@radix-ui/react-radio-group"
+
+const RadioGroupField = ({
+  name,
+  label,
+  options,
+  ...props
+}: {
+  name: string
+  label: string
+  options: string[]
+  [x: string]: any // Allow any other props
+}) => {
+  const { required, ...restProps } = props
+  const [field, meta, helpers] = useField({ ...restProps, name })
+
+  const handleChange = (value: string) => {
+    helpers.setValue(value)
+  }
+
+  return (
+    <div className="mb-4">
+      <label className="text-md" htmlFor={label}>
+        {label}
+      </label>
+      <RequiredAsterisk required={required} />
+      <RadioGroup.Root
+        className="flex gap-3"
+        value={field.value}
+        onValueChange={handleChange}
+        aria-label={label}
+      >
+        {options.map((option) => (
+          <div className="flex items-center" key={option}>
+            <RadioGroup.Item
+              className="hover:bg-violet3 h-[25px] w-[25px] cursor-default rounded-full border bg-white outline-none focus:shadow-[0_0_0_2px]"
+              value={option}
+              id={`${name}-${option}`}
+            >
+              <RadioGroup.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-violet-400 after:content-['']" />
+            </RadioGroup.Item>
+            <label className="pl-[15px] text-[15px] leading-none" htmlFor={`${name}-${option}`}>
+              {option}
+            </label>
+          </div>
+        ))}
+      </RadioGroup.Root>
+      <ErrorMessage touched={meta.touched} error={meta.error} />
+    </div>
+  )
+}
+
+export default RadioGroupField