Simple React dumb toggle checkbox

toggle.js

import React, {Component} from 'react';
import './Toggle.scss';

const Toggle = ({ checked, title, leftLabel, rightLabel, disabled, onChange }) => {

	return (
		<form styleName="switch-field">
			<div className="label">{title}</div>
			<div>
				<input
					type="radio"
					id="switch_left"
					name="switchToggle"
					value={leftLabel}
					onChange={onChange}
					checked={checked}
					disabled={disabled}
				/>
				<label htmlFor="switch_left">{leftLabel}</label>

				<input
					type="radio"
					id="switch_right"
					name="switchToggle"
					value={rightLabel}
					onChange={onChange}
					checked={!checked}
					disabled={disabled}
				/>
				<label htmlFor="switch_right">{rightLabel}</label>
			</div>
		</form>
	);
}

export default Toggle;

Toggle.scss

@import '~shared/sass/base/variables';

.switch-title {
    font-weight: $bold;
    margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;

    &:checked + label {
        background-color: #1955a5;
        color: #fff;
        box-shadow: none;
    }

    &:disabled + label {
        background-color: #f9f9f9;
        color: lighten($black, 75);
        cursor: not-allowed;
    }
}

.switch-field label {
  display: inline-block;
  width: 100px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: $semibold;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease-in-out;
  width: 50%;

    &:hover {
        cursor: pointer;
    }

    &:first-of-type {
        border-radius: 4px 0 0 4px;
    }

    &:last-of-type {
        border-radius: 0 4px 4px 0;
    }
}