Usando formik con un esquema de validación, type: 'checkbox' funciona bien, pero type: 'radio' no. Con Yup.boolean().required() , cuando marco la casilla de verificación, el botón Enviar se habilita correctamente, pero cuando selecciono el botón de opción, el botón Enviar permanece deshabilitado.

Como necesito la funcionalidad del botón de opción, para simularlo con una casilla de verificación, creé un método onChange para deshabilitar la casilla de verificación cuando está marcada, pero luego el botón Enviar no está habilitado cuando está marcado, al igual que el problema con el uso de un botón de opción.

Estoy usando formik 1.5.8, pero actualicé a 2.x para probarlo, pero con los mismos resultados.

Según los documentos de Formik, hay soporte para botones de radio, pero no puedo entender por qué no funciona para mí.

A continuación se muestra el código artificial que estoy usando, pero solo use el botón de opción o la casilla de verificación, no ambos a la vez, pero se incluyen ambos ejemplos de código

 class Login extends React.Component { LogInSchema = () => { const vs = Yup.object().shape({ captcha: Yup.boolean().required(), }); }; // to simulate a radio button; once it's selected, you can't unselect it handleChange = event => { if (event.target.checked) { event.target.disabled = true; } }; renderFocusTrappedForm = () => { return ( <FocusTrap> <Form> <FormRadio name='captcha' /> {/* doesn't enable the submit button when checked */} <Field name='captcha' value='captchaToggle' type='radio' checked={this.props.formik.values.captcha} /> {/* enables the submit button when checked, but only when no custom onChange is passed */} <Field name='captcha' value='captchaToggle' type='checkbox' onChange={this.handleChange} // prevents the submit button from enabling checked={this.props.formik.values.captcha} /> <button>Login</button> </Form> </FocusTrap> ); }; render() { return ( <Formik initialValues={this.props.initialValues} validationSchema={this.LogInSchema} onSubmit={this.onSubmit} render={this.renderFocusTrappedForm()} /> ); } } compose( connect(mapStateToProps, mapDispatchToProps), withFormik({ mapPropsToValues: props => ({ captcha: 'captchaToggle', }), }), )(Login);