#toggleShapeChangeInfo {
  font-size: 30px;
  top: 25%;
  left: 20%;
  transform: translate(-25%, -50%);
  position: absolute;
  pointer-events: none;
}

.lbl {
  position: absolute;
  display: block;
  height: 5%;
  width: 25%;
  top: 20%;
  left: 10%;
  background: #898989;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lbl:after {
  position: absolute;
  left: -2px;
  top: -3px;
  display: block;
  width: 50%;
  height: 120%;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
  content: '';
  transition: all 0.3s ease;
}

.lbl:active:after {
  transform: scale(1.15, 0.85);
}

.cbx:checked~label {
  background: #6fbeb5;
}

.cbx:checked~label:after {
  left: 50%;
  background: #179588;
}

.cbx:disabled~label {
  background: #d5d5d5;
}

.cbx:disabled~label:after {
  background: #bcbdbc;
}

.hidden {
  display: none;
}

.cbx ~ #toggleShapeChangeInfo:after {
  content: 'Off'
}

.cbx:checked~#toggleShapeChangeInfo:after {
  content: 'On'
}

<div id='toggleShapeChange'>
  <input type="checkbox" id="unchecked" class="cbx hidden" checked />
  <label for="unchecked" class="lbl"></label>
  <p id="toggleShapeChangeInfo"></p>
</div>

#toggleShapeChangeInfo {
  font-size: 30px;
  top: 25%;
  left: 20%;
  transform: translate(-25%, -50%);
  position: absolute;
  pointer-events: none;
}

.lbl {
  position: absolute;
  display: block;
  height: 5%;
  width: 25%;
  top: 20%;
  left: 10%;
  background: #898989;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lbl:after {
  position: absolute;
  left: -2px;
  top: -3px;
  display: block;
  width: 50%;
  height: 120%;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
  content: '';
  transition: all 0.3s ease;
}

.lbl:active:after {
  transform: scale(1.15, 0.85);
}

.cbx:checked~label {
  background: #6fbeb5;
}

.cbx:checked~label:after {
  left: 50%;
  background: #179588;
}

.cbx:disabled~label {
  background: #d5d5d5;
}

.cbx:disabled~label:after {
  background: #bcbdbc;
}

.hidden {
  display: none;
}

<div id='toggleShapeChange'>
  <input type="checkbox" id="unchecked" class="cbx hidden" />
  <label for="unchecked" class="lbl"></label>
  <p id="toggleShapeChangeInfo">On</p>
</div>