ChakraRadioButton.tsx

import { useRadio, UseRadioProps, Box } from '@chakra-ui/react';
import React from 'react';
import { QuestionResponse } from '../types';

interface Props extends UseRadioProps {
  children: React.ReactNode;
  question: QuestionResponse;
}

const RadioButton = (props: Props) => {
  const { getInputProps, getCheckboxProps } = useRadio(props);

  const input = getInputProps();
  const checkbox = getCheckboxProps();

  const matchesDefaultValue = props.value === props.question.suggested_response;

  return (
    <Box as="label">
      <input
        {...input}
      />
      <Box
        {...checkbox}
        cursor="pointer"
        borderWidth="1px"
        borderRadius="md"
        boxShadow="md"
        bgColor={matchesDefaultValue ? 'green.50' : 'transparent'}
        _checked={{
          bg: matchesDefaultValue ? "blue.600" : "red.600",
          color: "white",
          borderColor: matchesDefaultValue ? "blue.600" : "red.600",
        }}
        _focus={{
          boxShadow: "outline",
        }}
        px={5}
        py={3}
      >
        {props.children}
      </Box>
    </Box>
  );
};

export default RadioButton;

ChakraRadioCard.tsx

import { HStack, useRadioGroup } from '@chakra-ui/react';
import React from 'react';

import { QuestionResponse } from '../types';
import RadioButton from './RadioButton';

interface Props {
  question: QuestionResponse;
  value: string;
  onChange: (e: string) => void;
}

const RadioCard = ({ question, value, onChange }: Props) => {
  const options = question.excludeNA ? ['Yes', 'No'] : ['Yes', 'No', 'N/A'];

  const { getRootProps, getRadioProps } = useRadioGroup({
    name: `question-${question.question_id}`,
    defaultValue: question.actual_response ?? question.suggested_response?.toString(),
    value,
    onChange: onChange
  });

  const group = getRootProps();

  return (
    <HStack
      {...group}
      w="200px"
    >
      {options.map((value) => {
        const radio = getRadioProps({ value });
        return (
          <RadioButton
            key={value}
            question={question}
            {...radio}
          >
            {value}
          </RadioButton>
        );
      })}
    </HStack>
  );
};

export default RadioCard;