InputRadioGroup.js

import React, {useState, useEffect} from 'react';

/**
 * InputRadioGroup component
 * @param {string} id - Base ID for radio inputs
 * @param {string} name - Name attribute for all radio inputs
 * @param {string|number} value - Currently selected value
 * @param {Array} options - Array of options: [{value: '1', label: 'On'}, {value: '0', label: 'Off'}]
 * @param {function} onChange - Callback when selection changes
 * @param {string} className - Additional CSS class for each radio option wrapper
 * @param {boolean} disabled - Disable all radio inputs
 * @param {JSX.Element} separator - Separator element between radio options
 * @return {JSX.Element} Radio button group
 */
export default function InputRadioGroup({
    id,
    name,
    value: initialValue,
    options = [],
    onChange,
    className = 'spbc_radio_option',
    disabled = false,
    separator = <>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</>,
}) {
    const [selectedValue, setSelectedValue] = useState(String(initialValue ?? ''));

    useEffect(() => {
        setSelectedValue(String(initialValue ?? ''));
    }, [initialValue]);

    const handleChange = (event) => {
        const newValue = event.target.value;
        setSelectedValue(newValue);
        if (onChange) {
            onChange(event);
        }
    };

    return (
        <>
            {options.map((option, index) => (
                <React.Fragment key={`${id}-${option.value}`}>
                    <span className={className}>
                        <label>
                            <input
                                type="radio"
                                id={`${id}_${option.value}`}
                                name={name}
                                value={option.value}
                                checked={selectedValue === String(option.value)}
                                onChange={handleChange}
                                disabled={disabled || option.disabled}
                                className="spbc_setting_field"
                            />
                            <span>{option.label}</span>
                        </label>
                    </span>
                    {index < options.length - 1 && separator}
                </React.Fragment>
            ))}
        </>
    );
}