glide-design-system/src/lib/components/radioButton/RadioButton.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useEffect, useState } from "react";
import styles from "./RadioButton.module.css";

function RadioButton({
  name,
  style,
  disabled,
  size,
  children,
  onChange,
  value,
  className,
  label,
  required,
}) {
  const combinedStyle = {
    // backgroundColor: disabled ? "#333333" : "",
    width:
      size === "small"
        ? "16px"
        : size === "medium"
        ? "18px"
        : size === "large"
        ? "21px"
        : "20px",
    height:
      size === "small"
        ? "16px"
        : size === "medium"
        ? "18px"
        : size === "large"
        ? "21px"
        : "20px",

    ...style,
  };
  const [selectedValue, setSelectedValue] = useState(value ? value : "");

  const handleRadioChange = (e) => {
    const newValue = e.target.value;
    setSelectedValue(newValue);

    if (onChange) {
      onChange(e, newValue);
    }
  };

  useEffect(() => {
    setSelectedValue(value);
  }, [value]);

  return (
    <div>
      {" "}
      <p className={styles.headers2}>
        {label ? label : "Address"}
        {required && <span className={styles.required}>*</span>}
      </p>
      <div style={{ display: "flex", flexDirection: "row" }}>
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child)) {
            const childId = child.props.id || "";
            const childValue = child.props.value;
            const isChildDisabled = child.props.disabled || disabled;

            return (
              <label className={`${styles.container} `}>
                <input
                  type="radio"
                  id={childId}
                  value={childValue}
                  name={name}
                  checked={childValue === selectedValue}
                  disabled={isChildDisabled}
                  onChange={handleRadioChange}
                />
                <span
                  style={combinedStyle}
                  className={`${styles.checkmark}  ${
                    isChildDisabled ? styles.disabled : ""
                  } ${
                    isChildDisabled && selectedValue
                      ? styles.disabledCheckmark
                      : ""
                  } ${className ? className : ""}  `}
                ></span>
                <div style={{ marginLeft: "10px" }}> {child}</div>
              </label>
            );
          }
          return null;
        })}
      </div>
    </div>
  );
}

export default RadioButton;