react-tailwind-form-validator/dist/components/RadioButton.jsx

A lightweight and customizable React form validation library built with Tailwind CSS for modern, responsive, and accessible forms.

import clsx from 'clsx';
import React, { useEffect } from 'react';
import { useFormData } from '../hooks/useFormData';
const RadioButton = ({ options, containerClassName, fieldKey, labelClassName, textClassName, onChange, className, required = false, }) => {
    const { formData, updateFormData, setInputValidity } = useFormData();
    // Automatically set the first option as default
    useEffect(() => {
        if (!formData[fieldKey] && options.length > 0) {
            const defaultValue = options[0].value.toString();
            updateFormData(fieldKey, defaultValue);
            setInputValidity(fieldKey, true);
        }
    }, [fieldKey, options, formData, updateFormData, setInputValidity]);
    const handleChange = (e) => {
        const value = e.target.value;
        updateFormData(fieldKey, value);
        setInputValidity(fieldKey, true);
        if (onChange) {
            onChange(e);
        }
    };
    // Defaulting to first option if not set
    const actualSelectedValue = formData[fieldKey] ?? options[0].value.toString();
    return (<div className={clsx('flex gap-2', containerClassName)}>
      {options.map((option) => (<label key={option.value} className={clsx('flex items-center gap-2 cursor-pointer', labelClassName)}>
          <input type="radio" value={option.value} name={fieldKey} checked={actualSelectedValue === option.value.toString()} onChange={handleChange} className={clsx('w-4 h-4 appearance-none rounded-full transition-all duration-300 ease-in-out', 'border-2 border-gray-950', 'focus:outline-none focus:ring-2 focus:ring-offset-1', {
                'checked:bg-[#000103] checked:border-[#1e2631]': true,
                'focus:ring-[#1e2631]': true,
            }, className)} required={required} aria-label={option.label}/>
          <span className={textClassName}>{option.label}</span>
        </label>))}
    </div>);
};
export default RadioButton;