Custom Checkbox

ankushsingh
Jan 13, 2026 2
Live Preview

Live Editor

<div class="switch-toggle">
	<input class="switch-toggle-checkbox" type="checkbox" id="pricing-plan-switch" />
	<label class="switch-toggle-label" for="pricing-plan-switch">
		<span>Yearly</span>
		<span>Monthly</span>
	</label>
</div>
body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #000;
}

/* Toggle Switch (with label) */
.switch-toggle {
	--width: 260px;
	--height: 50px;
	--offset: 2px;
	--radius: 4px;
	position: relative;
	width: var(--width);
	height: var(--height);
	padding: var(--offset);
	background: rgba(227, 229, 232, 0.5);
	border-radius: var(--radius);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	font-style: normal;
}

.switch-toggle input[type="checkbox"] {
	cursor: pointer;
	position: absolute;
	inset: 0;
	appearance: none;
	z-index: 2;
}

/* Checked state */
.switch-toggle input[type="checkbox"]:checked + label.switch-toggle-label::before {
	translate: 100% 0;
}

.switch-toggle input[type="checkbox"]:checked + label.switch-toggle-label span:nth-child(1) {
	color: gray;
}

.switch-toggle input[type="checkbox"]:checked + label.switch-toggle-label span:nth-child(2) {
	color: #1a1a1a;
}

/* Label */
.switch-toggle input[type="checkbox"] + label.switch-toggle-label {
	position: absolute;
	inset: var(--offset, 0);
	padding: 10px 0;
	display: grid;
	gap: 2px;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	place-items: center;
	user-select: none;
	pointer-events: none;
}

/* Sliding background */
.switch-toggle input[type="checkbox"] + label.switch-toggle-label::before {
	content: "";
	position: absolute;
	width: 50%;
	inset: 0;
	background: #fff;
	border-radius: calc(var(--radius) - var(--offset));
	box-shadow: 0px 10px 20px 0px rgba(16, 39, 68, 0.1);
	translate: 0 0;
	transition: translate 250ms cubic-bezier(0.93, 0.26, 0.07, 0.69);
}

/* Text */
.switch-toggle input[type="checkbox"] + label.switch-toggle-label span {
	position: relative;
	transition: 200ms linear;
}

.switch-toggle input[type="checkbox"] + label.switch-toggle-label span:nth-child(1) {
	color: #1a1a1a;
}

.switch-toggle input[type="checkbox"] + label.switch-toggle-label span:nth-child(2) {
	color: gray;
}
Categories

Custom Checkbox

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
