Implementing a Custom Radio Button Component with CSS Styling in React.js

• Creating a custom radio button in React that follows a similar dynamic styling approach as the custom checkbox involves using CSS variables for customization and React for functionality. Here's how you can create a custom radio button component with dynamic styles.

Step 1: Define CSS Variables for the Radio Button

• In your global CSS file (e.g., `App.css`), define the CSS variables for your radio button:

  :root {

    --radio-size: 20px;

    --radio-border-color: #4CAF50;

    --radio-checked-color: #4CAF50;

    --radio-unchecked-color: #fff;

    --radio-border-radius: 50%;

    --radio-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

  }

Step 2: Create the Radio Button Component

• Create a React component (`CustomRadioButton.js`) for the radio button. This component will use props to dynamically update its appearance based on the CSS variables:

    import React from 'react';

    import './App.css'; // Assuming your CSS variables are defined here

    const CustomRadioButton = ({ name, value, checked, onChange }) => {

        return (

            <label className="radio-container">

                <input

                    type="radio"

                    name={name}

                    value={value}

                    checked={checked}

                    onChange={onChange}

                    className="custom-radio"

                />

                <span className="radio-custom"></span>

            </label>

        );

    };

    export default CustomRadioButton;

Step 3: Style the Radio Button

• Add the necessary styles in `App.css` to use the CSS variables. These styles include the custom appearance for both the checked and unchecked states of the radio button:

  .radio-container {

    display: inline-block;

    position: relative;

    padding-left: 35px;

    cursor: pointer;

    font-size: 22px;

    user-select: none;

  }

  .custom-radio {

    position: absolute;

    opacity: 0;

    cursor: pointer;

  }

  .radio-custom {

    position: absolute;

    top: 0;

    left: 0;

    height: var(--radio-size);

    width: var(--radio-size);

    background-color: var(--radio-unchecked-color);

    border-radius: var(--radio-border-radius);

    border: 2px solid var(--radio-border-color);

    box-shadow: var(--radio-shadow);

  }

  .custom-radio:checked+.radio-custom {

    background-color: var(--radio-checked-color);

  }

  .radio-custom::after {

    content: "";

    position: absolute;

    display: none;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: white;

  }

  .custom-radio:checked+.radio-custom::after {

    display: block;

  }

Step 4: Use the Radio Button Component

• You can now use the `CustomRadioButton` component in your app. Here's an example of how to use it within a form:

    import React, { useState } from 'react';

    import CustomRadioButton from './CustomRadioButton';

    function App() {

        const [selectedOption, setSelectedOption] = useState('');

        const handleRadioChange = (event) => {

            setSelectedOption(event.target.value);

        };

        return (

            <div className="App">

                <CustomRadioButton

                    name="customOption"

                    value="option1"

                    checked={selectedOption === 'option1'}

                    onChange={handleRadioChange}

                /> Option 1

                <CustomRadioButton

                    name="customOption"

                    value="option2"

                    checked={selectedOption === 'option2'}

                    onChange={handleRadioChange}

                /> Option 2

            </div>

        );

    }

    export default App;

Customizing the Radio Button

• To customize the radio button styles, users can override the CSS variables in their own styles:

  :root {

    --radio-border-color: #FF5722;

    /* Change the border color */

    --radio-checked-color: #FF5722;

    /* Change the color when checked */

  }

• This setup provides a customizable and reusable radio button component in React using CSS variables for dynamic styling.