form
	h1.material-title Material Design Checkbox
	input.material-checkbox#checkbox(type="checkbox")
	label.material-checkbox-label(for="checkbox") Toggle Me
	input.material-checkbox#checkbox2(checked, type="checkbox")
	label.material-checkbox-label(for="checkbox2") Already Toggled
	input.material-checkbox#checkbox3(type="checkbox", disabled)
	label.material-checkbox-label(for="checkbox3") Disabled
View Compiled
// demo styles
body
	font-family -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
	margin 5%

// variables
$materialCheckboxSize ?= 0.5em
$materialCheckboxColour ?= transparentify(black, 0.54)
$materialCheckboxBorderWidth ?= 0.2em
$materialCheckboxBorderRadius ?= $materialCheckboxBorderWidth
$materialCheckboxCheckedIcon ?= url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K")
$materialCheckboxCheckedBackground ?= #3f51b5

// helpers
$disabled
	cursor not-allowed
	opacity 0.5

// the real deal
.material-title
	font-size 1.8em
	margin 1em 0
.material-checkbox
	appearance none
	cursor pointer
	border 0.15em solid currentColor
	color $materialCheckboxColour
	padding $materialCheckboxSize
	border-radius $materialCheckboxBorderRadius
	display inline-block
	vertical-align middle
	transition 0.4s ease background, 0.1s ease transform
	position relative
	&:before
		content ""
		transition inherit
		position absolute
		width 100%
		height 100%
		transform scale(0)
		background $materialCheckboxCheckedBackground - 15
		opacity 0.4
		border-radius 50%
		transform-origin 100% 100%
	&:checked
		background $materialCheckboxCheckedBackground $materialCheckboxCheckedIcon
	&[disabled]
		@extend $disabled
		& + label
			@extend $disabled
	&:active
		&:before
			transform scale(2)
	&-label
		display inline-block
		vertical-align middle
		cursor pointer
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.