55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { RadioGroup, useTheme } from "@mui/material";
|
|
import FormControl from "@mui/material/FormControl";
|
|
import {
|
|
Controller,
|
|
useFormContext,
|
|
type FieldPath,
|
|
type FieldValues,
|
|
} from "react-hook-form";
|
|
import { LAYOUT } from "@/Utils/Theme/constants";
|
|
import { RadioWithDescription } from "@/Components/inputs/Radio";
|
|
import { FieldLabel } from "@/Components/inputs/FieldLabel";
|
|
export interface FormRadioOption {
|
|
value: string;
|
|
label: string;
|
|
description: string;
|
|
}
|
|
|
|
interface FormRadioGroupProps<T extends FieldValues> {
|
|
name: FieldPath<T>;
|
|
options: FormRadioOption[];
|
|
fieldLabel?: string;
|
|
}
|
|
export const FormRadioGroup = <T extends FieldValues>({
|
|
name,
|
|
options,
|
|
fieldLabel,
|
|
}: FormRadioGroupProps<T>) => {
|
|
const { control } = useFormContext<T>();
|
|
const theme = useTheme();
|
|
return (
|
|
<Controller
|
|
name={name}
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<FormControl error={!!fieldState.error}>
|
|
{fieldLabel && <FieldLabel>{fieldLabel}</FieldLabel>}
|
|
<RadioGroup
|
|
{...field}
|
|
sx={{ gap: theme.spacing(LAYOUT.MD) }}
|
|
>
|
|
{options.map((option) => (
|
|
<RadioWithDescription
|
|
key={option.value}
|
|
value={option.value}
|
|
label={option.label}
|
|
description={option.description}
|
|
/>
|
|
))}
|
|
</RadioGroup>
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
);
|
|
};
|