62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
// form
|
|
import { useFormContext, Controller } from 'react-hook-form';
|
|
// @mui
|
|
import {
|
|
Radio,
|
|
RadioGroup,
|
|
FormHelperText,
|
|
RadioGroupProps,
|
|
FormControlLabel,
|
|
} from '@mui/material';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
interface IProps {
|
|
name: string;
|
|
options: string[];
|
|
getOptionLabel?: string[];
|
|
fullWidth?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function RHFRadioGroup({
|
|
name,
|
|
options,
|
|
getOptionLabel,
|
|
fullWidth,
|
|
disabled,
|
|
...other
|
|
}: IProps & RadioGroupProps) {
|
|
const { control } = useFormContext();
|
|
|
|
return (
|
|
<Controller
|
|
name={name}
|
|
control={control}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<div>
|
|
<RadioGroup {...field} row {...other}>
|
|
{options.map((option, index) => (
|
|
<FormControlLabel
|
|
style={{width: (fullWidth)?'100%':''}}
|
|
key={option}
|
|
value={option}
|
|
control={<Radio />}
|
|
label={getOptionLabel?.length ? getOptionLabel[index] : option}
|
|
disabled={disabled}
|
|
/>
|
|
|
|
))}
|
|
</RadioGroup>
|
|
|
|
{!!error && (
|
|
<FormHelperText error sx={{ px: 2 }}>
|
|
{error.message}
|
|
</FormHelperText>
|
|
)}
|
|
</div>
|
|
)}
|
|
/>
|
|
);
|
|
}
|