JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<label for="custom-radio" class="radio-label">
  <input type="radio" id="custom-radio" name="custom-radio" class="custom-radio" />
  <span class="radio-button"></span>
  <span class="radio-text">Radio Button</span>

 <input type="radio" id="custom-radio" name="custom-radio" class="custom-radio" />
  <span class="radio-button"></span>
  <span class="radio-text">Radio Button</span>
</label>

CSS

/* Basic Styling */
.radio-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.custom-radio {
  display: none; /* Hide default radio */
}

.radio-button {
  width: 24px;
  height: 24px;
  border: 3px solid black;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

.radio-button::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}

/* Checked State */
.custom-radio:checked + .radio-button::after {
  background-color: #55c3c8;
}

/* Focus-Visible State */
.custom-radio:focus-visible + .radio-button {
  outline: 2px solid #005aeb; /* Accessible blue focus ring */
  outline-offset: 4px;
}

.radio-text {
  font-size: 16px;
}