diff --git a/src/demo-app/a11y/a11y-module.ts b/src/demo-app/a11y/a11y-module.ts
index 2ca041402fb..0d05281f0e0 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/demo-app/a11y/a11y-module.ts
@@ -17,6 +17,7 @@ import {IconAccessibilityDemo} from './icon/icon-a11y';
import {InputAccessibilityDemo} from './input/input-a11y';
import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
import {SelectAccessibilityDemo} from './select/select-a11y';
@@ -54,6 +55,7 @@ export class AccessibilityRoutingModule {}
ProgressSpinnerAccessibilityDemo,
RadioAccessibilityDemo,
SliderAccessibilityDemo,
+ SlideToggleAccessibilityDemo,
SnackBarAccessibilityDemo,
SelectAccessibilityDemo,
]
diff --git a/src/demo-app/a11y/a11y.ts b/src/demo-app/a11y/a11y.ts
index 17e258e6282..7d63ede8bbe 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/demo-app/a11y/a11y.ts
@@ -29,6 +29,7 @@ export class AccessibilityDemo {
{name: 'Progress spinner', route: 'progress-spinner'},
{name: 'Radio buttons', route: 'radio'},
{name: 'Slider', route: 'slider'},
+ {name: 'Slide toggle', route: 'slide-toggle'},
{name: 'Snack bar', route: 'snack-bar'},
{name: 'Select', route: 'select'},
];
diff --git a/src/demo-app/a11y/routes.ts b/src/demo-app/a11y/routes.ts
index 871b9913245..24215c7fdd3 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/demo-app/a11y/routes.ts
@@ -12,6 +12,7 @@ import {IconAccessibilityDemo} from './icon/icon-a11y';
import {InputAccessibilityDemo} from './input/input-a11y';
import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
import {SelectAccessibilityDemo} from './select/select-a11y';
@@ -29,6 +30,7 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
{path: 'progress-spinner', component: ProgressSpinnerAccessibilityDemo},
{path: 'radio', component: RadioAccessibilityDemo},
{path: 'slider', component: SliderAccessibilityDemo},
+ {path: 'slide-toggle', component: SlideToggleAccessibilityDemo},
{path: 'snack-bar', component: SnackBarAccessibilityDemo},
{path: 'select', component: SelectAccessibilityDemo},
];
diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html
new file mode 100644
index 00000000000..3fe2d1ef16b
--- /dev/null
+++ b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html
@@ -0,0 +1,28 @@
+
+ Receive email update
+ Showing a toggle to manage whether receive email update.
+
+ Receive email update
+
+
+
+
+ Music
+ Showing a disabled toggle to control music on/off status.
+
+ Music {{musicToggle ? 'on' : 'off'}} (disabled)
+
+
+
+
+ Terms and conditions
+ Showing a required toggle to accept terms and conditions in a form.
+
+
diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts
new file mode 100644
index 00000000000..6975bcfcd8b
--- /dev/null
+++ b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts
@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+
+@Component({
+ moduleId: module.id,
+ selector: 'slide-toggle-a11y',
+ templateUrl: 'slide-toggle-a11y.html'
+})
+export class SlideToggleAccessibilityDemo {
+ emailToggle: boolean = true;
+ termsToggle: boolean = false;
+ musicToggle: boolean = false;
+
+ constructor(private snackBar: MdSnackBar) {}
+
+ onFormSubmit() {
+ this.snackBar.open('Terms and condistions accepted!', '', {duration: 2000});
+ }
+}