diff --git a/services/web/public/coffee/ide/editor/EditorManager.coffee b/services/web/public/coffee/ide/editor/EditorManager.coffee
index b2b954eaf9..a10a499bc2 100644
--- a/services/web/public/coffee/ide/editor/EditorManager.coffee
+++ b/services/web/public/coffee/ide/editor/EditorManager.coffee
@@ -1,6 +1,7 @@
 define [
 	"ide/editor/Document"
 	"ide/editor/directives/aceEditor"
+	"ide/editor/directives/toggleSwitch"
 	"ide/editor/controllers/SavingNotificationController"
 ], (Document) ->
 	class EditorManager
diff --git a/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee b/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee
new file mode 100644
index 0000000000..afdc36fc64
--- /dev/null
+++ b/services/web/public/coffee/ide/editor/directives/toggleSwitch.coffee
@@ -0,0 +1,37 @@
+define [
+  "base"
+], (App) ->
+  App.directive "toggleSwitch", () ->
+    restrict: "E"
+    scope:
+      description: "@"
+      labelFalse: "@"
+      labelTrue: "@"
+      ngModel: "="
+    template: """
+  <fieldset class="toggle-switch">
+    <legend class="sr-only">{{description}}</legend>
+
+    <input
+      type="radio"
+      name="editor-mode"
+      class="toggle-switch-input"
+      id="toggle-switch-false-{{$id}}"
+      ng-value="false"
+      ng-model="ngModel"
+    >
+    <label for="toggle-switch-false-{{$id}}" class="toggle-switch-label">{{labelFalse}}</label>
+
+    <input
+      type="radio"
+      class="toggle-switch-input"
+      name="editor-mode"
+      id="toggle-switch-true-{{$id}}"
+      ng-value="true"
+      ng-model="ngModel"
+    >
+    <label for="toggle-switch-true-{{$id}}" class="toggle-switch-label">{{labelTrue}}</label>
+
+    <span class="toggle-switch-selection"></span>
+  </fieldset>
+"""