How to use radio buttons with Formik?

[mattdimicelli]

Hello,

I've referred to the Radio Group example from the Formik documentation, but there is a lot of abstraction going on in the example:

const Example = () => (
  <div>
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
        picked: '',
      }}
      onSubmit={async (values) => {
        await new Promise((r) => setTimeout(r, 500));
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ values }) => (
        <Form>
          <div id="my-radio-group">Picked</div>
          <div role="group" aria-labelledby="my-radio-group">
            <label>
              <Field type="radio" name="picked" value="One" />
              One
            </label>
            <label>
              <Field type="radio" name="picked" value="Two" />
              Two
            </label>
            <div>Picked: {values.picked}</div>
          </div>

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

I would like to understand how to implement radio buttons using a less-abstracted syntax. This was my attempt to do so in a project that I'm working on:

<Formik
          initialValues={{
            signup_first_name: '',
            signup_last_name: '',
            signup_email: '',
            signup_password: '',
            signup_password_confirm: '',
            avatar: '',
            admin: '',
            code: ''
          }}
        onSubmit={(values, { setSubmitting }) => {
            console.log('submitting')
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              setSubmitting(false);
            }, 400);
          }}
     >
     {formik => {

         return (
         /// the rest of the form is here, I cut it out for the purposes of this post ....
<label className="cursor-pointer label w-20">
                  <span className="label-text">Yes</span>
                  <input type="radio" className="radio" name="admin" value="true" id="true" onBlur={formik.handleBlur} onChange={formik.handleChange} />
                </label>
              
                <label className="cursor-pointer label w-20 mb-2">
                  <span className="label-text">No</span>
                  <input type="radio" className="radio" name="admin" value="false" id="false" onBlur={formik.handleBlur} onChange={formik.handleChange} checked />
                </label>
);
}}

Despite my attempt it does not seem to be properly keeping track of the state of the radio buttons. I don't know how to "wire up" the radio buttons with the value, handleChange, handleBlur, etc.

Can anybody help me out?

[mattdimicelli]

<input type="radio" className="radio" name="admin" value="true" id="true" onChange={formik.handleChange} checked={formik.values.admin === 'true'} />

[holabruno]

Following...