Intro

Radio fields, much like checkbox fields operate a little differently. Except for good reason this time. Radio fields are toggling between a different value for a specific key. Think of something like selecting an account type. The field is accountType but the value changes. In order to represent that in the browser this is when value and checked combination come into play.

Our setup will be that the 3 different field types which each are representing a different value of color.

Field

The first is our normal Field component. We will use this as a normal input and pass in type="radio". This will trigger Formik internals to pass the checked value specifically to the field that the value matches.

In our case we start with an empty value so nothing is selected. The pointer here is to supply the value of the radio.

<label className="text-gray-500 font-bold">
  <Field
    name="color"
    value="blue"
    className="mr-2 leading-tight"
    type="radio"
  />
  <span class="text-sm">Blue</span>
</label>

Field Radio Component

Then rendering our second color we still supply the same name. Then rather than supplying the value="blue" we'll supply a different value and in our case that value is red. So when this radio button is swapped it will set our Formik color value to red and the field that is spread onto our input will have checked={true}.

<Field name="color" type="radio" value="red" component={MySpecialField} />

Also note we'll need to supply type="radio" here just like checkbox.

const MySpecialField = ({ field }) => {
  return (
    <label className="text-gray-500 font-bold">
      <input {...field} className="mr-2 leading-tight" type="radio" />
      <span class="text-sm">Red</span>
    </label>
  );
};

useField Radio

For our useField hook we need to supply 3 different props so the Formik can send the correct values down of field. For radio fields you need to supply the name, specify that it is type: "radio" and also supply the value so that Formik can correctly set checked={true} on `field.

const MySpecialFieldHook = () => {
  const [field] = useField({ name: "color", type: "radio", value: "green" });
  return (
    <label className="text-gray-500 font-bold">
      <input {...field} className="mr-2 leading-tight" type="radio" />
      <span class="text-sm">Green</span>
    </label>
  );
};

Putting it Together

import React from "react";
import { Formik, Form, Field, useField } from "formik";

const MySpecialField = ({ field }) => {
  return (
    <label className="text-gray-500 font-bold">
      <input {...field} className="mr-2 leading-tight" type="radio" />
      <span class="text-sm">Red</span>
    </label>
  );
};

const MySpecialFieldHook = () => {
  const [field] = useField({ name: "color", type: "radio", value: "green" });
  return (
    <label className="text-gray-500 font-bold">
      <input {...field} className="mr-2 leading-tight" type="radio" />
      <span class="text-sm">Green</span>
    </label>
  );
};

function App() {
  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <div className="App">
      <Formik
        initialValues={{
          color: "",
        }}
        onSubmit={handleSubmit}
      >
        {({ values }) => {
          return (
            <Form className="h-screen flex content-center flex-col justify-center">
              <div className="space-x-4 flex content-center justify-center">
                <label className="text-gray-500 font-bold">
                  <Field
                    name="color"
                    value="blue"
                    className="mr-2 leading-tight"
                    type="radio"
                  />
                  <span class="text-sm">Blue</span>
                </label>

                <Field
                  name="color"
                  type="radio"
                  value="red"
                  component={MySpecialField}
                />
                <MySpecialFieldHook />

                <button
                  type="submit"
                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                >
                  Submit {values.color}
                </button>
              </div>
            </Form>
          );
        }}
      </Formik>
    </div>
  );
}

export default App;