React MD like checkbox

In this example below you will see how to do a React MD like checkbox with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by patryklizon, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright patryklizon ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>React MD like checkbox</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/patryklizon/react-md-like-checkbox-YxXrgY */
@-webkit-keyframes ripple {
  0% {
    opacity: 0;
    r: 0;
  }
  50% {
    opacity: .18;
    r: 120%;
  }
  100% {
    opacity: 0;
    r: 140%;
  }
}
@keyframes ripple {
  0% {
    opacity: 0;
    r: 0;
  }
  50% {
    opacity: .18;
    r: 120%;
  }
  100% {
    opacity: 0;
    r: 140%;
  }
}
:root {
  --checkbox-color: $checkbox-color;
  box-sizing: border-box;
}
:root * {
  box-sizing: inherit;
}

.checkbox {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 12px;
}
.t-blue .checkbox {
  --checkbox-color: $color-blue;
}
[dir='ltr'] .checkbox {
  flex-direction: row-reverse;
}

.checkbox__input {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}
.checkbox__input:disabled:checked ~ .checkbox__indicator .checkbox__indicator__mark {
  stroke: #fff;
}
.checkbox__input:disabled ~ .checkbox__indicator {
  border-color: #B0B0B0;
}
.checkbox__input:disabled ~ .checkbox__indicator .checkbox__indicator__bg {
  fill: #B0B0B0;
}
.checkbox__input:focus ~ .checkbox__indicator .checkbox__indicator__ripple {
  -webkit-animation: ripple 600ms;
          animation: ripple 600ms;
}
.checkbox__input:checked ~ .checkbox__indicator .checkbox__indicator__bg {
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: 200ms ease-in-out opacity;
}
.checkbox__input:checked ~ .checkbox__indicator .checkbox__indicator__mark {
  stroke-dashoffset: 0;
}
.checkbox__input:required ~ .checkbox__label:after {
  content: '*';
}

.checkbox__indicator {
  height: 18px;
  width: 18px;
  border-color: #000;
  border-color: var(--checkbox-color, #000);
  border-radius: 2px;
  border-style: solid;
  border-width: 2px;
  overflow: visible !important;
}

.checkbox__indicator--round {
  border-radius: 50%;
}
.checkbox__indicator--round .checkbox__indicator__bg {
  cx: 50%;
  cy: 50%;
  r: 50%;
}

.checkbox__indicator__bg {
  height: 0;
  width: 0;
  fill: #000;
  fill: var(--checkbox-color, #000);
  opacity: 0;
  transition: 200ms ease-in-out opacity;
  will-change: opacity;
}

.checkbox__indicator__mark {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  transition: 200ms linear stroke-dashoffset;
}

.checkbox__indicator__ripple {
  fill: #000;
  fill: var(--checkbox-color, #000);
  cx: 50%;
  cy: 50%;
  will-change: opacity, r;
}

.checkbox__label {
  padding: 0 12px;
}


/*Downloaded from https://www.codeseek.co/patryklizon/react-md-like-checkbox-YxXrgY */
var appHook = document.getElementById('app');
var nextId = 0;

function getNextId() {
	var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'element';

	return prefix + '-' + nextId++;
}

var Checkbox = function Checkbox(_ref) {
	var required = _ref.required,
	    disabled = _ref.disabled,
	    name = _ref.name,
	    checked = _ref.checked,
	    label = _ref.label,
	    value = _ref.value,
	    round = _ref.round,
	    handleChange = _ref.handleChange;

	var elementId = getNextId(),
	    isDisabled = disabled ? 'disabled' : false,
	    isRequired = required ? 'required' : false,
	    isChecked = checked ? 'checked' : false,
	    markLength = 15.749618530273438;

	return React.createElement(
		'label',
		{ className: 'checkbox', htmlFor: elementId },
		React.createElement('input', {
			onChange: handleChange,
			className: 'checkbox__input',
			type: 'checkbox',
			name: name,
			value: value,
			required: isRequired,
			disabled: isDisabled,
			defaultChecked: isChecked,
			id: elementId }),
		React.createElement(
			'svg',
			{ viewBox: '0 0 16 16', className: 'checkbox__indicator ' + (round ? 'checkbox__indicator--round' : '') },
			round ? React.createElement('circle', { className: 'checkbox__indicator__bg' }) : React.createElement('rect', { className: 'checkbox__indicator__bg' }),
			React.createElement('circle', { className: 'checkbox__indicator__ripple' }),
			React.createElement('path', { className: 'checkbox__indicator__mark jsMark', transform: 'translate(1, 2)', strokeDashoffset: markLength, strokeDasharray: markLength, d: 'M1.42420783 6.03075103 5.00322799 9.5725669 12.5960318 2.01301652' })
		),
		label && React.createElement(
			'span',
			{ className: 'checkbox__label' },
			label
		)
	);
};

function App() {
	return React.createElement(
		'div',
		{ id: 'app' },
		React.createElement(
			'fieldset',
			null,
			React.createElement(
				'legend',
				null,
				'Default'
			),
			React.createElement(Checkbox, { label: 'test', round: true }),
			React.createElement(Checkbox, { label: 'test', checked: true, required: true }),
			React.createElement(Checkbox, { label: 'test', disabled: true, required: true }),
			React.createElement(Checkbox, { label: 'test', checked: true, disabled: true })
		),
		React.createElement(
			'fieldset',
			{ className: 't-blue' },
			React.createElement(
				'legend',
				null,
				'Themed'
			),
			React.createElement(Checkbox, { label: 'test', round: true }),
			React.createElement(Checkbox, { label: 'test', checked: true, required: true }),
			React.createElement(Checkbox, { label: 'test', disabled: true, required: true }),
			React.createElement(Checkbox, { label: 'test', checked: true, disabled: true })
		),
		React.createElement(
			'fieldset',
			{ dir: 'rtl' },
			React.createElement(
				'legend',
				null,
				'Text direction: RTL'
			),
			React.createElement(Checkbox, { label: 'test', round: true }),
			React.createElement(Checkbox, { label: 'test', checked: true, required: true }),
			React.createElement(Checkbox, { label: 'test', disabled: true, required: true }),
			React.createElement(Checkbox, { label: 'test', checked: true, disabled: true })
		)
	);
}

ReactDOM.render(React.createElement(App, null), appHook);

Comments