diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js b/monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js
new file mode 100644
index 000000000..4cfd022f0
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js
@@ -0,0 +1,68 @@
+import '../../styles/Checkbox.scss'
+import React from 'react';
+
+class Checkbox extends React.PureComponent {
+
+  componentDidUpdate(prevProps) {
+    if (this.props.checked !== prevProps.checked) {
+      this.setState({checked: this.props.checked});
+    }
+  }
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			checked: this.props.checked,
+      necessary: this.props.necessary,
+			isAnimating: false
+		};
+		this.toggleChecked = this.toggleChecked.bind(this);
+		this.ping = this.ping.bind(this);
+		this.composeStateClasses = this.composeStateClasses.bind(this);
+	}
+
+	//
+	toggleChecked() {
+		if (this.state.isAnimating) return false;
+		this.setState({
+			checked: !this.state.checked,
+			isAnimating: true,
+		}, () => { this.props.changeHandler(this.props.name, this.state.checked)});
+	}
+
+	//
+	ping() {
+		this.setState({ isAnimating: false })
+	}
+
+	//
+	composeStateClasses(core) {
+		let result = core;
+    if (this.state.necessary){
+      return result + ' blocked'
+    }
+		if (this.state.checked) { result += ' is-checked'; }
+		else { result += ' is-unchecked' }
+
+		if (this.state.isAnimating) { result += ' do-ping'; }
+		return result;
+	}
+
+	//
+	render() {
+		const cl = this.composeStateClasses('ui-checkbox-btn');
+		return (
+			<div
+				className={ cl }
+				onClick={ this.state.necessary ? void(0) : this.toggleChecked}>
+					<input className="ui ui-checkbox"
+                 type="checkbox" value={this.state.checked}
+                 name={this.props.name}/>
+					<label className="text">{ this.props.children }</label>
+				<div className="ui-btn-ping" onTransitionEnd={this.ping}></div>
+			</div>
+		)
+	}
+}
+
+export default Checkbox;