Create RadioGroup with RadioButtons using React with TypeScript

Let’s create a RadioGroup component composed of RadioButtons.

First, we create the RadioGroup component.

import React, { useState } from 'react';
import RadioGroup from './RadioGroup'; // Adjust the path according to your file structure
import RadioButton from './RadioButton'; // Adjust the path according to your file structure

const YourComponent = () => {
  const [gender, setGender] = useState(""); // State to handle gender selection

  return (
    <RadioGroup
      title={"Example for DevCodeLight"}
      radioButtons={[
        <RadioButton
          key={"Male"}
          id={"Male"}
          label={"Male"}
          value={"Male"}
          checked={gender === "Male"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGender(newValue); // Update the state with the new selection
          }}
        />,
        <RadioButton
          key={"Female"}
          id={"Female"}
          label={"Female"}
          value={"Female"}
          checked={gender === "Female"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGender(newValue); // Update the state with the new selection
          }}
        />
      ]}
    />
  );
};

export default YourComponent;

Now, let’s create a RadioButton component as shown below:

import React from 'react';
import { rojoerror } from '../../constants/Colors'; // Adjust the path according to your file structure

interface RadioButtonProps {
  id: string;
  label: string;
  value: string;
  checked: boolean;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  showError?: boolean; // New property to show error
}

function RadioButton({ id, label, value, onChange, checked, showError }: RadioButtonProps) {
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChange(event);
  };

  return (
    <div>
      <input
        type="radio"
        id={id}
        value={value}
        checked={checked}
        onChange={handleInputChange}
        style={{
          borderColor: showError ? rojoerror : 'initial',
          color: showError ? rojoerror : 'initial',
          fontWeight: showError ? 'bold' : 'normal'
        }}
      />
      <label htmlFor={id} style={{ color: showError ? rojoerror : 'initial' }}>{label}</label>
    </div>
  );
}

export default RadioButton;

Next, let’s use the components as follows:

import React, { useState } from 'react';
import RadioGroup from './RadioGroup'; // Adjust the path according to your file structure
import RadioButton from './RadioButton'; // Adjust the path according to your file structure

const YourComponent = () => {
  const [gender, setGender] = useState(""); // State to handle gender selection

  return (
    <RadioGroup
      title={"Example for DevCodeLight"}
      radioButtons={[
        <RadioButton
          key={"Male"}
          id={"Male"}
          label={"Male"}
          value={"Male"}
          checked={gender === "Male"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGender(newValue); // Update the state with the new selection
          }}
        />,
        <RadioButton
          key={"Female"}
          id={"Female"}
          label={"Female"}
          value={"Female"}
          checked={gender === "Female"}
          onChange={(event) => {
            const newValue = event.target.value;
            setGender(newValue); // Update the state with the new selection
          }}
        />
      ]}
    />
  );
};

export default YourComponent;

Finally, here’s the result:

I hope this helps you. Have a great day!

DevCodeLight