diff --git a/docs/src/pages/components/Switch.vue b/docs/src/pages/components/Switch.vue
index 0d92631..d922851 100644
--- a/docs/src/pages/components/Switch.vue
+++ b/docs/src/pages/components/Switch.vue
@@ -96,7 +96,21 @@
+ <div>
+ <md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
+ </div>
+ <div>
+ <md-switch v-model="checked1" id="my-test1" name="my-test1" class="md-primary">Primary Color</md-switch>
+ </div>
+
+ <div>
+ <md-switch v-model="checked2" id="my-test2" name="my-test2" class="md-warn">Warn Color</md-switch>
+ </div>
+
+ <div>
+ <md-switch v-model="checked3" id="my-test3" name="my-test3" disabled>Disabled</md-switch>
+ </div>
@@ -112,7 +126,11 @@
+ <md-switch v-model="checked8" id="my-test8" name="my-test8">Default</md-switch>
+ <form @click.stop.prevent="submit">
+ <md-switch type="submit" v-model="checked9" id="my-test9" name="my-test9" class="md-primary">Submit</md-switch>
+ </form>
@@ -138,7 +156,22 @@
+ <div v-md-theme="'orange'">
+ <md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
+ </div>
+ <div v-md-theme="'green'">
+ <md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
+ </div>
+
+ <div v-md-theme="'brown'">
+ <md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
+ </div>
+
+ <div v-md-theme="'light-blue'">
+ <md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
+ </div>
+ </div>