diff --git a/demo/index.html b/demo/index.html
index ee765c205..daa60b6f5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -38,6 +38,17 @@
               </select>
             </label>
           </p>
+          <p>
+            <label>
+              bellStyle
+              <select id="option-bell-style">
+                <option value="">none</option>
+                <option value="sound">sound</option>
+                <option value="visual">visual</option>
+                <option value="both">both</option>
+              </select>
+            </label>
+          </p>
           <p>
             <label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
           </p>
diff --git a/demo/main.js b/demo/main.js
index 9098c2f02..cb346de2a 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -15,7 +15,8 @@ var terminalContainer = document.getElementById('terminal-container'),
       cursorBlink: document.querySelector('#option-cursor-blink'),
       cursorStyle: document.querySelector('#option-cursor-style'),
       scrollback: document.querySelector('#option-scrollback'),
-      tabstopwidth: document.querySelector('#option-tabstopwidth')
+      tabstopwidth: document.querySelector('#option-tabstopwidth'),
+      bellStyle: document.querySelector('#option-bell-style')
     },
     colsElement = document.getElementById('cols'),
     rowsElement = document.getElementById('rows');
@@ -53,6 +54,9 @@ optionElements.cursorBlink.addEventListener('change', function () {
 optionElements.cursorStyle.addEventListener('change', function () {
   term.setOption('cursorStyle', optionElements.cursorStyle.value);
 });
+optionElements.bellStyle.addEventListener('change', function () {
+  term.setOption('bellStyle', optionElements.bellStyle.value);
+});
 optionElements.scrollback.addEventListener('change', function () {
   term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
 });