Hello Code

src/vs/base/browser/ui/checkbox/checkbox.css

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.custom-checkbox {
+	margin-left: 2px;
+	float: left;
+	cursor: pointer;
+	overflow: hidden;
+	opacity: 0.7;
+	width: 20px;
+	height: 20px;
+	border: 1px solid transparent;
+	padding: 1px;
+
+	-webkit-box-sizing:	border-box;
+	-o-box-sizing:		border-box;
+	-moz-box-sizing:	border-box;
+	-ms-box-sizing:		border-box;
+	box-sizing:			border-box;
+
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.custom-checkbox:hover,
+.custom-checkbox.checked {
+	opacity: 1;
+}
+
+.custom-checkbox:hover {
+	background-color: #EEE;
+}
+
+.custom-checkbox.checked {
+	border-color: #007ACC;
+}
+
+.vs-dark .custom-checkbox:hover {
+	background-color: #292929;
+}
+
+.vs-dark .custom-checkbox.checked {
+	border-color: #007ACC;
+}
+
+.hc-black .custom-checkbox {
+	background: none;
+	border: none;
+}
+
+.hc-black .custom-checkbox:hover {
+	background: none;
+}
+
+.hc-black .custom-checkbox.checked {
+	border: 1px solid #DF740C;
+}

src/vs/base/browser/ui/checkbox/checkbox.ts

@@ -0,0 +1,100 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import 'vs/css!./checkbox';
+import nls = require('vs/nls');
+import Builder = require('vs/base/browser/builder');
+import mouse = require('vs/base/browser/mouseEvent');
+import keyboard = require('vs/base/browser/keyboardEvent');
+import {KeyCode} from 'vs/base/common/keyCodes';
+
+var $ = Builder.$;
+
+export class Checkbox {
+
+	private actionClassName: string;
+	private title: string;
+	public isChecked: boolean;
+	private onChange: () => void;
+	private listenersToRemove: { (): void; }[];
+	public domNode: HTMLElement;
+
+	constructor(actionClassName: string, title: string, isChecked: boolean, onChange: () => void) {
+		this.actionClassName = actionClassName;
+		this.title = title;
+		this.isChecked = isChecked;
+		this.onChange = onChange;
+
+		this.listenersToRemove = [];
+
+		this.domNode = document.createElement('div');
+		this.domNode.title = title;
+		this.render();
+
+		$(this.domNode).attr({
+			'aria-checked': 'false',
+			'aria-label': this.title,
+			'tabindex': 0,
+			'role': 'checkbox'
+		});
+
+		$(this.domNode).on('click', (e: MouseEvent) => {
+			var ev = new mouse.StandardMouseEvent(e);
+			this.isChecked = !this.isChecked;
+			this.render();
+			this.onChange();
+			ev.preventDefault();
+		}, this.listenersToRemove);
+
+		$(this.domNode).on('keydown', (browserEvent: KeyboardEvent) => {
+			var keyboardEvent = new keyboard.StandardKeyboardEvent(browserEvent);
+			if (keyboardEvent.keyCode === KeyCode.Space || keyboardEvent.keyCode === KeyCode.Enter) {
+				this.isChecked = !this.isChecked;
+				this.render();
+				this.onChange();
+				keyboardEvent.preventDefault();
+			}
+		}, this.listenersToRemove);
+	}
+
+	public focus(): void {
+		this.domNode.focus();
+	}
+
+	private render(): void {
+		this.domNode.className = this.className();
+	}
+
+	public setChecked(newIsChecked: boolean): void {
+		this.isChecked = newIsChecked;
+		$(this.domNode).attr('aria-checked', this.isChecked);
+		this.render();
+	}
+
+	private className(): string {
+		return 'custom-checkbox ' + this.actionClassName + ' ' + (this.isChecked ? 'checked' : 'unchecked');
+	}
+
+	public width(): number {
+		return 2 /*marginleft*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */;
+	}
+
+	public enable(): void {
+		this.domNode.tabIndex = 0;
+	}
+
+	public disable(): void {
+		this.domNode.tabIndex = -1;
+	}
+
+	public destroy(): void {
+		this.listenersToRemove.forEach((element) => {
+			element();
+		});
+		this.listenersToRemove = [];
+	}
+}