Radio or checkbox use CSS only (+React)

radio-checkbox

import React from 'react';
import './styles/Radio.less';

const Radio = (props) => {
  const {
    label,
    value,
    checked = false,
    disabled = false,
    name = 'name',
    change = () => {},
  } = props;
  return (
    <label htmlFor={label} className={`radio-styled${disabled ? ' disabled' : ''}`}>
      <input
        onChange={() => change(value, name)}
        name={name}
        value={value}
        id={label}
        type="radio"
        disabled={disabled}
        checked={checked}
        defaultChecked={checked}
      />
      <span className="radio-styled-mark" />
      <span className="radio-styled-label">{label}</span>
    </label>
  );
};

export { Radio as default };

@color-checked: #268ad2;

.radio-styled {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  margin-right: 10px;
  cursor: pointer;

  input {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;

    &:checked + .radio-styled-mark {
      border-color: @color-checked;

      &::after {
        position: absolute;
        left: 2px;
        top: 2px;
        bottom: 2px;
        right: 2px;
        content: '';
        border-radius: 100%;
        background: @color-checked;
      }
    }

    &:checked ~ .radio-styled-label {
      color: @color-checked;
    }
  }
  
  &.disabled {
    cursor: default;
    .radio-styled-mark,
    .radio-styled-label {
      opacity: .5;
    }
  }
}

.radio-styled-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  opacity: 0.54;
  border-radius: 100%;
  border: 2px solid #010101;
}