Simple and standard radio button with SVG

radioBtnReact.jsx

import * as React from "react";
import { css, cx } from "react-emotion";

const cssRadioButton = css`
  font-size: 17px;

  .label {
    cursor: pointer;
    border-radius: 12px;
    color: #757575;
    display: flex;
    align-items: center;
  }

  .radioDot {
    opacity: 0.06;
  }

  .radioOutline {
    opacity: 0.55;
  }

  .text {
    margin-left: 10px;
  }

  .input {
    opacity: 0;
    position: absolute;

    &:focus,
    &:hover {
      & + .label {
        color: initial;
        background-color: #fbfbfc;

        .radioDot {
          opacity: 0.13;
        }

        .radioOutline {
          opacity: 0.7;
        }
      }
    }

    &:checked + .label {
      color: initial;
      background-color: #eee;

      .radioDot,
      .radioOutline {
        opacity: 1;
      }
    }
  }
`;

function RadioButton({
  name,
  value,
  required,
  children,
  isChecked,
  handleChange,
  className,
  ...props
}) {
  return (
    <div className={cssRadioButton}>
      <input
        className="input"
        id={value}
        name={name}
        value={value}
        required={required}
        type="radio"
        checked={isChecked}
        onChange={handleChange}
        {...props}
      />
      <label className={cx("label", className)} htmlFor={value}>
        <svg
          className="svg"
          fill="currentColor"
          preserveAspectRatio="xMidYMid meet"
          height="30"
          width="30"
          viewBox="0 0 30 30"
        >
          <circle
            className="radioOutline"
            cx="15"
            cy="15"
            r="13"
            fill="none"
            stroke="#000"
            strokeWidth="2"
          />
          <circle className="radioDot" cx="15" cy="15" r="6" fill="#000" />
        </svg>
        <span className="text">{children}</span>
      </label>
    </div>
  );
}

export default RadioButton;