Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box;}
/**Typeo CSS End**/
.radio-list{ font-family: Poppins; width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background-color: #f3f3f3;
    border: #ccc 1px solid;}
.radio-list .radio-item {
	width: 100%; 
	position: relative; 
	margin: 5px 0;
}
.radio-list input[type="radio"]{ 
	opacity: 0; 
	cursor: pointer; 
	position: absolute; 
	top: 6px; 
	left: 7px;
}
.custom-radio{
	min-height: 28px; 
	display: flex;
	align-items: center; 
	flex-flow: row wrap; 
	padding-left: 34px; 
	position: relative; 
	cursor:pointer;
}
.custom-radio:before { 
	content: ''; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	border-radius: 100%; 
	display: inline-block; 
	width:22px; 
	border: #0270f7 2px solid; 
	height:22px;
}
.custom-radio:after {content: '';
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    position: absolute;
    left: 6px;
    top: 6px;
    border-radius: 100%;
    display: inline-block;
    width: 14px;
    background-color: #0270f7;
    height: 14px; opacity: 0}
.custom-radio.selected:after{ opacity: 1; }

/*--Custom Radio Button--*/
var firstRadioItem = document.querySelector('.radio-item:first-child .custom-radio');
firstRadioItem.classList.add('selected');

var customRadios = document.querySelectorAll('.custom-radio');
customRadios.forEach(function(radio) {
  radio.addEventListener('click', function() {
    customRadios.forEach(function(radio) {
      radio.classList.remove('selected');
    });
    this.classList.add('selected');
  });
});
/*--Custom Radio Button--*/