81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
/**
|
|
* RadioGroupField Component
|
|
*
|
|
* Renders a group of radio buttons using Radix UI with Formik integration.
|
|
* Supports custom options, labels, and an optional separator.
|
|
*/
|
|
|
|
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"
|
|
|
|
/**
|
|
* Props for RadioGroupField.
|
|
*
|
|
* @param name The name attribute for the radio group, used for form submission.
|
|
* @param label Display label for the radio group.
|
|
* @param separator Optional boolean to render a visual separator above the radio group.
|
|
* @param options Array of option strings that the radio group will display.
|
|
* @param props Additional props passed to the radio group, including `required`.
|
|
*/
|
|
|
|
interface RadioGroupFieldProps {
|
|
name: string;
|
|
label: string;
|
|
separator?: boolean;
|
|
options: string[];
|
|
[key: string]: any; // This allows for additional props not explicitly defined in the interface.
|
|
}
|
|
|
|
const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
|
|
name,
|
|
label,
|
|
separator,
|
|
options,
|
|
...props
|
|
}) => {
|
|
const { required, ...restProps } = props
|
|
|
|
// State and helpers from Formik for managing radio group value
|
|
const [field, meta, helpers] = useField({ ...restProps, name })
|
|
|
|
// Handles radio option change, updating Formik's state
|
|
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
|