checkbox.html

<div class="check-multisiteconstructionsite">
  <div>
    <label class="label" for="checkbox_use">Obra Multisite</label>
    <div class="space"></div>
    <div class="switch">
      <input
       type="checkbox"
       class="switch-checkbox form-control"
       id="checkbox-construction-site-type"
      >
      <label for="checkbox-construction-site-type"
             data-period="period-at-fvs-service-verification"
             class="switch-label checkbox-construction-site-type">
        <span class="switch-inner"></span>
        <span class="switch-circle"></span>
      </label>
    </div>
  </div>
</div>

checkbox.scss

.switch {
	position: relative;
	top: 7px;
	width: 40px;
	height: 33px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.switch-checkbox {
	display: none;
}

.switch-label {
	margin: 0;
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid #f4f3f3;
	border-radius: 20px;
}

.switch-inner {
	display: block;
	width: 200%;
	margin-left: -100%;
	text-align: left;
  transition: margin 0.1s ease-in;

	&::before,
	&::after {
		display: block;
		float: left;
		width: 50%;
		height: 16px;
		padding: 0;
		line-height: 15px;
		font-size: 8px;
		color: white;
		font-weight: bold;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	&::before {
		content: "SIM";
		padding-left: 8px;
		background-color: orange;
		color: #fff;
	}
	&::after {
		content: "NÃO";
		padding-right: 6px;
		background-color: #eee;
		color: #999;
		text-align: right;
	}
}

.switch-circle {
  display: block;
  position: absolute;
  top: -2px;
  bottom: 0;
  right: 29px;
  width: 22px;
  height: 22px;
  margin: 0;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 20px;
  transition: right 0.1s ease-in;
}

.switch-checkbox:checked + .switch-label .switch-inner {
  margin-left: 0;
}
.switch-checkbox:checked + .switch-label .switch-circle {
  right: -11px;
}