JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<h1>Yes/No checkbox switcher</h1>

<form>
  <div class="checkbox-switcher">
    <input id="checkbox" type="checkbox">
    <div class="checkbox-switcher__panel">
      <label for="checkbox" class="checkbox-switcher__panel-btn">Yes</label>
      <label for="checkbox" class="checkbox-switcher__panel-btn">No</label>
    </div>
  </div>
</form>

SCSS

.checkbox-switcher {
  input {
    display: none;
    &:not(:checked) {
      &+.checkbox-switcher__panel {
        .checkbox-switcher__panel-btn {
          &:first-child {
            color: #fff;
          }
        }
      }
    }
    &:checked {
      &+.checkbox-switcher__panel {
        .checkbox-switcher__panel-btn {
          &:last-child {
            color: #fff;
          }
        }
        &:before {
          left: 50%;
        }
      }
    }
  }
  &__panel {
    display: flex;
    width: 100px;
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid;
    position: relative;
    user-select: none;
    &:before {
      content: '';
      position: absolute;
      width: 50%;
      left: 0;
      top: 0;
      bottom: 0;
      background: #000;
      transition: .15s ease-in;
      border-radius: 99px;
      box-shadow: 0 0 0 1px
    }
    &-btn {
      width: 50%;
      text-align: center;
      position: relative;
      transition: .15s ease-in;
      &:first-child {
        border-radius: 99px 0 0 99px;
      }
      &:last-child {
        border-radius: 0 99px 99px 0;
      }
    }
  }
}