Radio button group returning strings despite providing it with boolean values

[aadlc]

Hello,

I am building a form with RHF V7, MUI V5 and validating its data with yup. The issue I am facing is that a radio button group is returning a string of 'true' or 'false' despite providing it with a boolean true or false value.

Additionally, I test the radio value via onChange={() => console.log(typeof item.value)} and it logs Boolean every time yet, when I log the form data I get {Radio: "true"}.

here is the working example: https://codesandbox.io/s/rhf-v7-radio-casting-string-wiou8

Any ideas?

[bluebill1049]

due to your schema:

const schema = yup.object().shape({
  Radio: yup.string().required("Please select a option.")
});

[sneko]

1 year later but, please see my workaround solution (example with MUI but it would help anyway if using React Hook Form):
https://stackoverflow.com/a/74854174/3608410

[hassnain9166]

try this

import PropTypes from 'prop-types';
import { Controller, useFormContext } from 'react-hook-form';

import Radio from '@mui/material/Radio';
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import FormControlLabel from '@mui/material/FormControlLabel';
import { useTranslation } from 'react-i18next';

// ----------------------------------------------------------------------

export default function RHFRadioGroup({
row,
name,
label,
options,
spacing,
helperText,
...other
}) {
const { control } = useFormContext();
const { t } = useTranslation();
const labelledby = label ? ${name}-${label} : '';

return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => (

{label && (
<FormLabel component="legend" id={labelledby} sx={{ typography: 'body2' }}>
{label}

)}

      <RadioGroup {...field} aria-labelledby={labelledby} row={row} {...other}>
        {options.map((option) => (
          <FormControlLabel
            key={option.value}
            value={option.value}
            control={<Radio />}
            label={t(option.label)}
            sx={{
              '&:not(:last-of-type)': {
                mb: spacing || 0,
              },
              ...(row && {
                mr: 0,
                '&:not(:last-of-type)': {
                  mr: spacing || 2,
                },
              }),
            }}
          />
        ))}
      </RadioGroup>

      {(!!error || helperText) && (
        <FormHelperText error={!!error} sx={{ mx: 0 }}>
          {error ? error?.message : helperText}
        </FormHelperText>
      )}
    </FormControl>
  )}
/>

);
}

RHFRadioGroup.propTypes = {
helperText: PropTypes.string,
label: PropTypes.string,
name: PropTypes.string,
options: PropTypes.array,
row: PropTypes.bool,
spacing: PropTypes.number,
};
<RHFRadioGroup
row
name="specialpackagepiecesbase"
label="Select Package"
spacing={4}
options={[
{ value: 1, label: 'Create a new Package' },
{ value: 2, label: 'Add Existing Package' },
]}
/>