59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import * as RadioGroup from "@radix-ui/react-radio-group"
|
|
import { useField } from "formik"
|
|
import React from "react"
|
|
import ErrorMessage from "./ErrorMessage"
|
|
import RequiredAsterisk from "./RequiredAsterisk"
|
|
import Separator from "./Separator"
|
|
|
|
const RadioGroupField = ({
|
|
name,
|
|
label,
|
|
separator,
|
|
options,
|
|
...props
|
|
}: {
|
|
name: string
|
|
label: string
|
|
separator?: boolean
|
|
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="flex flex-col gap-3">
|
|
<div className="flex flex-col gap-4">
|
|
{separator && <Separator/>}
|
|
<label className="font-bold text-sm leading-tight text-indigo-900" htmlFor={label}>
|
|
{label}
|
|
<RequiredAsterisk required={required} />
|
|
</label>
|
|
</div>
|
|
|
|
<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-blue-950 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
|