Wire Up a Radio Button Using React Hook Form and Chakra UI

React Hook Form and Chakra UI offer a powerful combination for building user-friendly and aesthetically pleasing forms. These libraries allow quick and easy out-of-the-box solutions for building forms and using UI components in Javascript.  When it comes down to wiring up the form hooks with the UI components together, however, some input components may not be as straightforward to wire up, especially the radio button.

In the spirit of quick solutions, I’ll cut to the chase. Here’s my solution.

Wiring Up the Radio Button

import { HStack, Radio, RadioGroup, Text } from "@chakra-ui/react";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    getValues,
  } = useForm({
    defaultValues: { currentWeather: "Clear" },
  });
  const onSubmit = (data) => console.log(data);
  console.log(errors);

  const currentWeatherFormFieldId = "currentWeather";

  const currentWeatherDefault = getValues(currentWeatherFormFieldId);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <RadioGroup defaultValue={currentWeatherDefault}>
        <HStack>
          <Radio
            {...register(currentWeatherFormFieldId)}
            value={"Clear"}
            size="lg"
          >
            <Text>Clear</Text>
          </Radio>
          <Radio
            {...register(currentWeatherFormFieldId)}
            value={"Rainy"}
            size="lg"
          >
            <Text>Rainy</Text>
          </Radio>
          <Radio
            {...register(currentWeatherFormFieldId)}
            value={"Cloudy"}
            size="lg"
          >
            <Text>Cloudy</Text>
          </Radio>
        </HStack>
      </RadioGroup>
      <input type="submit" />
    </form>
  );
}

The key here lies on line 18: the RadioGroup Chakra component looks for a default value to set an initial value for the radio group from the top level. Therefore, we need to use the getValues function provided by the useForm hook and read our initial value from the form. That way, the radio group matches what is selected by the form.

It’s important to note that the getValues function returns an optimized version of the current form value and won’t cause any re-renders (see the docs here). This is ideal for most situations. But, if you want to render content dynamically based on the radio button value, you’ll have to use React Hook Form’s counterpart to  getValues : watch.  This will ‘watch’ the current state of the form value and cause any re-renders necessary to handle that change.

Finalizing the Form

Now that the radio button group is ready, you can add other form elements or validation as needed. Remember to handle the form submission and use the selected value in your application logic.

Wiring Up a Radio Button

Here we’ve explored how to use radio buttons in a form using React Hook Form and Chakra UI. By integrating Chakra UI’s components, we can easily create an attractive and accessible user interface. Chakra UI offers various customization options to match your design needs, so feel free to experiment with the styles. Happy coding!