diff --git a/src/demos/checkbox/checkbox-demo.component.html b/src/demos/checkbox/checkbox-demo.component.html
index 0bfdf3a4f..c1039b6a6 100644
--- a/src/demos/checkbox/checkbox-demo.component.html
+++ b/src/demos/checkbox/checkbox-demo.component.html
@@ -1,18 +1,47 @@
-<fieldset>
-  <legend>Checkbox options</legend>
-  <ul class="sky-list-unstyled">
-    <li *ngFor="let checkboxItem of checkboxItems">
-      <sky-checkbox [(ngModel)]="checkboxItem.checked" [disabled]="checkboxItem.disabled">
-        <sky-checkbox-label>
-          {{ checkboxItem.description }}
-        </sky-checkbox-label>
-      </sky-checkbox>
-    </li>
-  </ul>
-</fieldset>
-<b>Checked state:</b>
+<h3>
+  Checkbox states
+</h3>
+
 <ul class="sky-list-unstyled">
-  <li *ngFor="let checkboxItem of checkboxItems">
-    {{ checkboxItem.description }}: <b>{{ checkboxItem.checked ? 'true': 'false' }}</b>
+  <li *ngFor="let item of checkboxItems">
+    <sky-checkbox
+      [(ngModel)]="item.checked"
+      [disabled]="item.disabled"
+    >
+      <sky-checkbox-label>
+        {{ item.label }}
+      </sky-checkbox-label>
+    </sky-checkbox>
   </li>
 </ul>
+
+<h3>
+  Checkbox styles
+</h3>
+
+<sky-checkbox
+  [(ngModel)]="successChecked"
+  checkboxType="success"
+>
+  <sky-checkbox-label>
+    Success
+  </sky-checkbox-label>
+</sky-checkbox>
+
+<sky-checkbox
+  [(ngModel)]="warningChecked"
+  checkboxType="warning"
+>
+  <sky-checkbox-label>
+    Warning
+  </sky-checkbox-label>
+</sky-checkbox>
+
+<sky-checkbox
+  [(ngModel)]="dangerChecked"
+  checkboxType="danger"
+>
+  <sky-checkbox-label>
+    Danger
+  </sky-checkbox-label>
+</sky-checkbox>
diff --git a/src/demos/checkbox/checkbox-demo.component.ts b/src/demos/checkbox/checkbox-demo.component.ts
index 0095a0d59..def4267bc 100644
--- a/src/demos/checkbox/checkbox-demo.component.ts
+++ b/src/demos/checkbox/checkbox-demo.component.ts
@@ -7,18 +7,18 @@ import { Component } from '@angular/core';
 export class SkyCheckboxDemoComponent {
   public checkboxItems = [
     {
-      description: 'Checkbox 1'
+      label: 'Checkbox 1'
     },
     {
-      description: 'Checkbox 2',
+      label: 'Checkbox 2',
       checked: true
     },
     {
-      description: 'Disabled',
+      label: 'Disabled',
       disabled: true
     },
     {
-      description: 'Disabled and selected',
+      label: 'Disabled and checked',
       checked: true,
       disabled: true
     }
diff --git a/src/demos/radio/radio-demo.component.html b/src/demos/radio/radio-demo.component.html
index b2d71af9c..615f1311e 100644
--- a/src/demos/radio/radio-demo.component.html
+++ b/src/demos/radio/radio-demo.component.html
@@ -1,36 +1,91 @@
-<form #checkForm="ngForm">
-  <div>
-    <fieldset>
-      <legend>Radio button options</legend>
-      <ul class="sky-list-unstyled">
-        <li>
-          <sky-radio name="radiotest" [(ngModel)]="selectedValue" #cb="ngModel" value="1">
-            <sky-radio-label>Option 1</sky-radio-label>
-          </sky-radio>
-        </li>
+<h3>
+  Radio states
+</h3>
 
-        <li>
-          <sky-radio
-            name="radiotest"
-            [ngModel]="selectedValue"
-            (ngModelChange)="selectedValue = $event"
-            disabled="true"
-            [value]="valueGuy">
-            <sky-radio-label>Option 2</sky-radio-label>
-          </sky-radio>
-        </li>
+<ul class="sky-list-unstyled">
+  <li>
+    <sky-radio
+      name="radiotest"
+      value="1"
+      [(ngModel)]="selectedValue"
+      #cb="ngModel"
+    >
+      <sky-radio-label>
+        Option 1
+      </sky-radio-label>
+    </sky-radio>
+  </li>
+  <li>
+    <sky-radio
+      disabled="true"
+      name="radiotest"
+      [ngModel]="selectedValue"
+      [value]="valueGuy"
+      (ngModelChange)="selectedValue = $event"
+    >
+      <sky-radio-label>
+        Option 2
+      </sky-radio-label>
+    </sky-radio>
+  </li>
+  <li>
+    <sky-radio
+      name="radiotest"
+      value="3"
+      [ngModel]="selectedValue"
+      (ngModelChange)="selectedValue = $event"
+    >
+      <sky-radio-label>
+        Option 3
+      </sky-radio-label>
+    </sky-radio>
+  </li>
+</ul>
 
-        <li>
-          <sky-radio name="radiotest" [ngModel]="selectedValue" (ngModelChange)="selectedValue = $event" value="3">
-            <sky-radio-label>Option 3</sky-radio-label>
-          </sky-radio>
-        </li>
-      </ul>
-    </fieldset>
+<p>
+  Selected option: <strong>{{ selectedValue }}</strong>
+</p>
 
-    <br />
-    Selected option: {{selectedValue}}
-    Touched: {{cb.touched}}
-    Pristine: {{cb.pristine}}
-  </div>
-</form>
+<h3>
+  Radio styles
+</h3>
+
+<sky-radio
+  name="styleradios"
+  radioType="success"
+  value="success"
+  [ngModel]="selectedStyle"
+  (ngModelChange)="selectedStyle = $event"
+>
+  <sky-radio-label>
+    Success
+  </sky-radio-label>
+</sky-radio>
+
+<sky-radio
+  name="styleradios"
+  radioType="warning"
+  value="warning"
+  [ngModel]="selectedStyle"
+  (ngModelChange)="selectedStyle = $event"
+>
+  <sky-radio-label>
+    Warning
+  </sky-radio-label>
+</sky-radio>
+
+<sky-radio
+  name="styleradios"
+  radioType="danger"
+  value="danger"
+  [ngModel]="selectedStyle"
+  (ngModelChange)="selectedStyle = $event"
+>
+  <sky-radio-label>
+    Danger
+  </sky-radio-label>
+</sky-radio>
+
+<p>
+  Selected style: <strong>{{ selectedStyle }}</strong>
+</p>
diff --git a/src/modules/checkbox/checkbox.component.html b/src/modules/checkbox/checkbox.component.html
index 5fe2e1d3a..aadd12420 100644
--- a/src/modules/checkbox/checkbox.component.html
+++ b/src/modules/checkbox/checkbox.component.html
@@ -1,14 +1,28 @@
-<label class="sky-checkbox-wrapper" [ngClass]="{'sky-checkbox-wrapper-disabled': disabled}">
-  <input type="checkbox"
-        [id]="inputId"
-        [checked]="checked"
-        [disabled]="disabled"
-        [name]="name"
-        [tabIndex]="tabindex"
-        [attr.aria-label]="label"
-        [attr.aria-labelledby]="labelledBy"
-        (blur)="onInputBlur()"
-        (change)="onInteractionEvent($event)"/>
-  <span class="sky-checkbox"></span>
-  <ng-content select="sky-checkbox-label"></ng-content>
+<label
+  class="sky-checkbox-wrapper sky-switch"
+  [ngClass]="classNames"
+>
+  <input
+    class="sky-switch-input"
+    type="checkbox"
+    [id]="inputId"
+    [checked]="checked"
+    [disabled]="disabled"
+    [name]="name"
+    [tabIndex]="tabindex"
+    [attr.aria-label]="label"
+    [attr.aria-labelledby]="labelledBy"
+    (blur)="onInputBlur()"
+    (change)="onInteractionEvent($event)"
+  />
+  <span class="sky-switch-control sky-rounded-corners">
+    <i *ngIf="checked"
+      aria-hidden="true"
+      class="fa fa-fw fa-check"
+    ></i>
+  </span>
+  <span class="sky-switch-label">
+    <ng-content select="sky-checkbox-label">
+    </ng-content>
+  </span>
 </label>
diff --git a/src/modules/checkbox/checkbox.component.scss b/src/modules/checkbox/checkbox.component.scss
index 6a3428ce9..e69de29bb 100644
--- a/src/modules/checkbox/checkbox.component.scss
+++ b/src/modules/checkbox/checkbox.component.scss
@@ -1,62 +0,0 @@
-@import "../../scss/variables";
-@import "../../scss/mixins";
-
-.sky-checkbox-wrapper {
-  cursor: pointer;
-  position: relative;
-}
-
-.sky-checkbox-wrapper.sky-checkbox-wrapper-disabled, .sky-checkbox-wrapper.sky-checkbox-wrapper-disabled input {
-  cursor: default;
-}
-
-.sky-checkbox-wrapper input {
-  opacity: 0;
-  position: absolute;
-  height: 22px;
-  width: 22px;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-.sky-checkbox {
-  background-color: $sky-color-white;
-  @include sky-border(dark, top, bottom, left, right);
-  display: inline-block;
-  height: 22px;
-  margin: 0;
-  padding: 0;
-  vertical-align: middle;
-  width: 22px;
-  text-align: center;
-  font-size: $sky-font-size-base;
-  line-height: 19px;
-}
-
-.sky-checkbox-wrapper input:hover + .sky-checkbox {
-  border: 2px solid $sky-background-color-primary-dark;
-}
-
-.sky-checkbox-wrapper input:checked + .sky-checkbox {
-  background-color: $sky-background-color-primary-dark;
-  border-color: $sky-background-color-primary-dark;
-  border-width: 1px;
-
-  &:before {
-    color: $sky-color-white;
-    content: "\f00c";
-    font-family: FontAwesome;
-    font-size: 13px;
-  }
-}
-
-
-.sky-checkbox-wrapper input:disabled + .sky-checkbox {
-  background-color: $sky-background-color-neutral-light;
-  @include sky-border(light, top, bottom, left, right);
-}
-
-.sky-checkbox-wrapper input:focus + .sky-checkbox {
-  @include sky-focus-outline;
-}
diff --git a/src/modules/checkbox/checkbox.component.spec.ts b/src/modules/checkbox/checkbox.component.spec.ts
index b1e10c8e6..36683e810 100644
--- a/src/modules/checkbox/checkbox.component.spec.ts
+++ b/src/modules/checkbox/checkbox.component.spec.ts
@@ -10,6 +10,14 @@ import { FormsModule, NgModel } from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 
+import {
+  expect
+} from '@blackbaud/skyux-builder/runtime/testing/browser';
+
+import {
+  SkyCheckboxType
+} from './types';
+
 import {SkyCheckboxComponent, SkyCheckboxChange} from './checkbox.component';
 import { SkyCheckboxModule } from './checkbox.module';
 
@@ -18,10 +26,11 @@ import { SkyCheckboxModule } from './checkbox.module';
   template: `
   <div>
     <sky-checkbox
-        id="simple-check"
-        [checked]="isChecked"
-        [disabled]="isDisabled"
-        (change)="checkboxChange($event)">
+      id="simple-check"
+      [checked]="isChecked"
+      [disabled]="isDisabled"
+      [checkboxType]="type"
+      (change)="checkboxChange($event)">
       <sky-checkbox-label>
         Simple checkbox
       </sky-checkbox-label>
@@ -31,6 +40,7 @@ import { SkyCheckboxModule } from './checkbox.module';
 class SingleCheckboxComponent {
   public isChecked: boolean = false;
   public isDisabled: boolean = false;
+  public type: SkyCheckboxType;
 
   public checkboxChange($event: any) {
     this.isChecked = $event.checked;
@@ -241,6 +251,11 @@ describe('Checkbox component', () => {
       expect(inputElement.tabIndex).toBe(0);
     });
 
+    it('should allow changing the checkbox style', () => {
+      fixture.componentInstance.type = 'success';
+      fixture.detectChanges();
+      expect(labelElement).toHaveCssClass('sky-switch-success');
+    });
   });
 
   describe('with change event and no initial value', () => {
diff --git a/src/modules/checkbox/checkbox.component.ts b/src/modules/checkbox/checkbox.component.ts
index 11fb104b1..8ea0b1496 100644
--- a/src/modules/checkbox/checkbox.component.ts
+++ b/src/modules/checkbox/checkbox.component.ts
@@ -9,6 +9,10 @@ import {
 
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 
+import {
+  SkyCheckboxType
+} from './types';
+
 /**
  * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
  */
@@ -39,6 +43,14 @@ export class SkyCheckboxChange {
   providers: [SKY_CHECKBOX_CONTROL_VALUE_ACCESSOR]
 })
 export class SkyCheckboxComponent implements ControlValueAccessor {
+  @Input()
+  public set checkboxType(value: SkyCheckboxType) {
+    this._checkboxType = value;
+  }
+
+  public get checkboxType(): SkyCheckboxType {
+    return this._checkboxType || 'info';
+  }
 
   /**
    * Hidden label for screen readers.
@@ -67,6 +79,19 @@ export class SkyCheckboxComponent implements ControlValueAccessor {
   @Output()
   public change: EventEmitter<SkyCheckboxChange> = new EventEmitter<SkyCheckboxChange>();
 
+  public get classNames(): string {
+    const classNames = [
+      'sky-switch-' + this.checkboxType
+    ];
+
+    if (this.disabled) {
+      classNames.push('sky-switch-disabled');
+    }
+
+    return classNames.join(' ');
+  }
+
+  private _checkboxType: SkyCheckboxType;
   private _checked: boolean = false;
 
   public get inputId(): string {
diff --git a/src/modules/checkbox/types/checkbox-type.ts b/src/modules/checkbox/types/checkbox-type.ts
new file mode 100644
index 000000000..c074aa275
--- /dev/null
+++ b/src/modules/checkbox/types/checkbox-type.ts
@@ -0,0 +1 @@
+export type SkyCheckboxType = 'info' | 'success' | 'warning' | 'danger';
diff --git a/src/modules/checkbox/types/index.ts b/src/modules/checkbox/types/index.ts
new file mode 100644
index 000000000..c18751ed2
--- /dev/null
+++ b/src/modules/checkbox/types/index.ts
@@ -0,0 +1 @@
+export * from './checkbox-type';
diff --git a/src/modules/radio/radio.component.html b/src/modules/radio/radio.component.html
index 41c546ee2..5cad9e3dd 100644
--- a/src/modules/radio/radio.component.html
+++ b/src/modules/radio/radio.component.html
@@ -1,15 +1,28 @@
-<label class="sky-radio-wrapper">
-  <input type="radio"
-        [id]="inputId"
-        [ngModel]="selectedValue"
-        [disabled]="disabled"
-        [name]="name"
-        [value]="value"
-        [tabIndex]="tabindex"
-        [attr.aria-label]="label"
-        [attr.aria-labelledby]="labelledBy"
-        (blur)="onInputBlur()"
-        (ngModelChange)="onRadioChanged($event)"/>
-  <span class="sky-radio"></span>
-  <ng-content select="sky-radio-label"></ng-content>
+<label
+  class="sky-radio-wrapper sky-switch"
+  [ngClass]="classNames"
+>
+  <input
+    class="sky-switch-input"
+    type="radio"
+    [id]="inputId"
+    [ngModel]="selectedValue"
+    [disabled]="disabled"
+    [name]="name"
+    [value]="value"
+    [tabIndex]="tabindex"
+    [attr.aria-label]="label"
+    [attr.aria-labelledby]="labelledBy"
+    (blur)="onInputBlur()"
+    (ngModelChange)="onRadioChanged($event)"
+  />
+  <span class="sky-switch-control sky-rounded-circle">
+    <i *ngIf="selectedValue === value"
+      aria-hidden="true"
+      class="fa fa-fw fa-circle"
+    ></i>
+  </span>
+  <span class="sky-switch-label">
+    <ng-content select="sky-radio-label"></ng-content>
+  </span>
 </label>
diff --git a/src/modules/radio/radio.component.scss b/src/modules/radio/radio.component.scss
index 95f54cc6e..fd95304f8 100644
--- a/src/modules/radio/radio.component.scss
+++ b/src/modules/radio/radio.component.scss
@@ -1,61 +1,5 @@
-@import "../../scss/variables";
-@import "../../scss/mixins";
-
-.sky-radio-wrapper {
-  display: inline-block;
-  margin-bottom: 5px;
-  cursor: pointer;
-}
-
-.sky-radio-wrapper input {
-    opacity: 0;
-    position: absolute;
-    height: 22px;
-    width: 22px;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-}
-
-.sky-radio {
-    @include sky-border(dark, top, bottom, left, right);
-    cursor: pointer;
-    display: inline-block;
-    height: 22px;
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-    width: 22px;
-    text-align: center;
-    font-size: $sky-font-size-base;
-    border-radius: 50%;
-    line-height: 19px;
-}
-
-.sky-radio-wrapper input:hover + .sky-radio {
-    border: 2px solid $sky-background-color-primary-dark;
-}
-
-.sky-radio-wrapper input:checked + .sky-radio {
-    background-color: $sky-background-color-primary-dark;
-    border-color: $sky-background-color-primary-dark;
-    border-width: 1px;
-
-    &:before {
-        color: $sky-color-white;
-        content: "\f00c";
-        font-family: FontAwesome;
-        font-size: 13px;
-    }
-}
-
-
-.sky-radio-wrapper input:disabled + .sky-radio {
-    background-color: $sky-background-color-neutral-light;
-    @include sky-border(light, top, bottom, left, right);
-    cursor: default;
-}
-
-.sky-radio-wrapper input:focus + .sky-radio {
-    @include sky-focus-outline;
+.sky-switch-control {
+  .fa {
+    font-size: 70%;
+  }
 }
diff --git a/src/modules/radio/radio.component.spec.ts b/src/modules/radio/radio.component.spec.ts
index 8ac8cfaef..67cdcfb7d 100644
--- a/src/modules/radio/radio.component.spec.ts
+++ b/src/modules/radio/radio.component.spec.ts
@@ -19,6 +19,14 @@ import {
   By
 } from '@angular/platform-browser';
 
+import {
+  expect
+} from '@blackbaud/skyux-builder/runtime/testing/browser';
+
+import {
+  SkyRadioType
+} from './types';
+
 import { SkyRadioModule } from './radio.module';
 import { SkyRadioComponent } from './radio.component';
 import { SkyRadioLabelComponent } from './radio-label.component';
@@ -42,6 +50,7 @@ describe('Radio component', function () {
         [value]="value2"
         [(ngModel)]="selectedValue"
         [tabindex]="tabindex2"
+        [radioType]="type"
         [disabled]="disabled2">
         <sky-radio-label>My label</sky-radio-label>
       </sky-radio>
@@ -68,6 +77,7 @@ describe('Radio component', function () {
     public labelledBy3: string;
     public tabindex2: string;
     public selectedValue = '1';
+    public type: SkyRadioType;
     public onClick() {}
   }
 
@@ -237,4 +247,12 @@ describe('Radio component', function () {
     expect((componentInstance.onClick as any).calls.count()).toEqual(1);
     expect(radioLabelElement.componentInstance.onClick).toHaveBeenCalled();
   }));
+
+  it('should allow changing the radio style', fakeAsync(function () {
+    fixture.componentInstance.type = 'success';
+    fixture.detectChanges();
+    tick();
+    const radio2El = document.getElementById('hey').querySelector('.sky-radio-wrapper');
+    expect(radio2El).toHaveCssClass('sky-switch-success');
+  }));
 });
diff --git a/src/modules/radio/radio.component.ts b/src/modules/radio/radio.component.ts
index 381cb4eef..556d01f1c 100644
--- a/src/modules/radio/radio.component.ts
+++ b/src/modules/radio/radio.component.ts
@@ -6,6 +6,10 @@ import {
 
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
+import {
+  SkyRadioType
+} from './types';
+
 /**
  * Auto-incrementing integer used to generate unique ids for checkbox components.
  */
@@ -30,6 +34,15 @@ export const SKY_RADIO_CONTROL_VALUE_ACCESSOR: any = {
   providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR]
 })
 export class SkyRadioComponent implements ControlValueAccessor {
+  @Input()
+  public set radioType(value: SkyRadioType) {
+    this._radioType = value;
+  }
+
+  public get radioType(): SkyRadioType {
+    return this._radioType || 'info';
+  }
+
   /**
    * Hidden label for screen readers.
    */
@@ -57,6 +70,18 @@ export class SkyRadioComponent implements ControlValueAccessor {
   @Input()
   public value: any;
 
+  public get classNames(): string {
+    const classNames = [
+      'sky-switch-' + this.radioType
+    ];
+
+    if (this.disabled) {
+      classNames.push('sky-switch-disabled');
+    }
+
+    return classNames.join(' ');
+  }
+
   public get inputId(): string {
     return `input-${this.id}`;
   }
@@ -64,6 +89,8 @@ export class SkyRadioComponent implements ControlValueAccessor {
   public selectedValue: any;
   private onChangeCallback: (value: any) => void;
 
+  private _radioType: SkyRadioType;
+
   public onInputBlur() {
     this.onTouchedCallback();
   }
diff --git a/src/modules/radio/types/index.ts b/src/modules/radio/types/index.ts
new file mode 100644
index 000000000..471f0fddc
--- /dev/null
+++ b/src/modules/radio/types/index.ts
@@ -0,0 +1 @@
+export * from './radio-type';
diff --git a/src/modules/radio/types/radio-type.ts b/src/modules/radio/types/radio-type.ts
new file mode 100644
index 000000000..16b6a4f98
--- /dev/null
+++ b/src/modules/radio/types/radio-type.ts
@@ -0,0 +1 @@
+export type SkyRadioType = 'info' | 'success' | 'warning' | 'danger';
diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
index ced5b4136..0b18b76b0 100644
--- a/src/scss/_forms.scss
+++ b/src/scss/_forms.scss
@@ -51,3 +51,67 @@ fieldset {
   margin: 0;
   padding: 0;
 }
+
+.sky-switch {
+  cursor: pointer;
+  align-items: baseline;
+  vertical-align: middle;
+  display: inline-flex;
+  white-space: nowrap;
+}
+
+.sky-switch-disabled {
+  cursor: default;
+
+  input {
+    cursor: default;
+  }
+}
+
+.sky-switch-info {
+  @include sky-switch-variant(
+    $sky-background-color-info-light,
+    $sky-highlight-color-info
+  );
+}
+
+.sky-switch-success {
+  @include sky-switch-variant(
+    $sky-background-color-success,
+    $sky-highlight-color-success
+  );
+}
+
+.sky-switch-warning {
+  @include sky-switch-variant(
+    $sky-background-color-warning,
+    $sky-highlight-color-warning
+  );
+}
+
+.sky-switch-danger {
+  @include sky-switch-variant(
+    $sky-background-color-danger,
+    $sky-highlight-color-danger
+  );
+}
+
+.sky-switch-control {
+  width: $sky-switch-size;
+  height: $sky-switch-size;
+  margin: auto;
+  margin-right: 5px;
+  display: inline-flex;
+  position: relative;
+  border: 1px solid $sky-background-color-disabled;
+  background-color: $sky-color-white;
+  color: $sky-text-color-default;
+  text-align: center;
+  line-height: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.sky-switch-label {
+  line-height: $sky-switch-size;
+}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 0b20b0eb8..e518aec8f 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -281,3 +281,30 @@
   margin-right: 5px;
   color: $sky-highlight-color-danger;
 }
+
+@mixin sky-switch-variant($bg-color-checked, $border-color-checked) {
+  .sky-switch-input {
+    position: absolute;
+    opacity: 0;
+
+    &:checked + .sky-switch-control {
+      background-color: $bg-color-checked;
+      border-color: $border-color-checked;
+      border-width: 2px;
+    }
+
+    &:disabled + .sky-switch-control {
+      background-color: $sky-background-color-disabled;
+      border-color: transparent;
+    }
+
+    &:focus + .sky-switch-control {
+      @include sky-focus-outline;
+    }
+  }
+
+  &:hover .sky-switch-control {
+    border-color: $border-color-checked;
+    border-width: 2px;
+  }
+}
diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
index e403e5d93..2ff07efaa 100644
--- a/src/scss/_theme.scss
+++ b/src/scss/_theme.scss
@@ -161,6 +161,10 @@ input:-moz-placeholder { /* Firefox 18- */
   border-radius: $sky-border-radius;
 }
 
+.sky-rounded-circle {
+  border-radius: 500em;
+}
+
 .sky-shadow {
   @include sky-shadow;
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 53276181c..241baa9cc 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -36,6 +36,10 @@ $sky-transition-time-medium: 250ms !default;
 $sky-transition-time-long: 500ms !default;
 // end transitions
 
+// begin switch
+$sky-switch-size: 22px !default;
+// end switch
+
 //begin tile
 $sky-tile-header-tool-padding: $sky-padding-plus-half !default;
 $sky-tile-form-background: #F2F2F2 !default;