From 70f8c4a2abe919e31ab963485d0db5082f5f19d6 Mon Sep 17 00:00:00 2001
From: Alex <alex.kingman@blackbaud.com>
Date: Thu, 14 Nov 2019 08:56:55 -0500
Subject: [PATCH] Added required input in checkbox component (#77)

* Added support for required attribute in checkbox component

* reverted some accidental commits

* test coverage for reactive forms

* test coverage for required validity

* added comment

* label tweak

* required input property

* reverted some accidental commits

* added more coverage

* leveraging angulars checkboxvalidator to do the heavy-lifting

* removed fit from test

* reordered imports

* enforcing required css class
---
 .../checkbox-required-validator.directive.ts  |  32 ++
 .../modules/checkbox/checkbox.component.html  |   8 +-
 .../checkbox/checkbox.component.spec.ts       | 316 +++++++++++++++++-
 .../modules/checkbox/checkbox.component.ts    | 104 +++---
 .../modules/checkbox/checkbox.module.ts       |  25 +-
 .../checkbox/checkbox-visual.component.html   |  69 ++++
 .../checkbox/checkbox-visual.component.ts     |  34 +-
 7 files changed, 534 insertions(+), 54 deletions(-)
 create mode 100644 src/app/public/modules/checkbox/checkbox-required-validator.directive.ts

diff --git a/src/app/public/modules/checkbox/checkbox-required-validator.directive.ts b/src/app/public/modules/checkbox/checkbox-required-validator.directive.ts
new file mode 100644
index 00000000..edcaa23e
--- /dev/null
+++ b/src/app/public/modules/checkbox/checkbox-required-validator.directive.ts
@@ -0,0 +1,32 @@
+import {
+  Directive,
+  forwardRef,
+  Provider
+} from '@angular/core';
+
+import {
+  CheckboxRequiredValidator,
+  NG_VALIDATORS
+} from '@angular/forms';
+
+// tslint:disable:no-forward-ref
+export const SKY_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
+  provide: NG_VALIDATORS,
+  useExisting: forwardRef(() => SkyCheckboxRequiredValidatorDirective),
+  multi: true
+};
+// tslint:enable
+
+/**
+ * Validator support for the `required` input on `sky-checkbox`.
+ * Angular's `CheckboxRequiredValidator` only works with `input type=checkbox`. This directive
+ * extends the angular validator to work with `sky-checkbox` tags.
+ * This is based on Angular Material's similar implementation:
+ * https://github.com/angular/components/blob/a415b52ead2ec202ba37edb7d7866b29dd790394/src/material/checkbox/checkbox-required-validator.ts
+ */
+@Directive({
+  selector: `sky-checkbox[required][formControlName],
+             sky-checkbox[required][formControl], sky-checkbox[required][ngModel]`,
+  providers: [SKY_CHECKBOX_REQUIRED_VALIDATOR]
+})
+export class SkyCheckboxRequiredValidatorDirective extends CheckboxRequiredValidator {}
diff --git a/src/app/public/modules/checkbox/checkbox.component.html b/src/app/public/modules/checkbox/checkbox.component.html
index e1eccb9f..c7082724 100644
--- a/src/app/public/modules/checkbox/checkbox.component.html
+++ b/src/app/public/modules/checkbox/checkbox.component.html
@@ -1,6 +1,10 @@
 <label
   class="sky-checkbox-wrapper sky-switch"
-  [ngClass]="{ 'sky-switch-disabled': disabled }">
+  [ngClass]="{
+    'sky-control-label-required': required,
+    'sky-switch-disabled': disabled
+  }"
+>
   <input
     class="sky-switch-input"
     type="checkbox"
@@ -8,9 +12,11 @@
     [checked]="checked"
     [disabled]="disabled"
     [name]="name"
+    [required]="required"
     [tabIndex]="tabindex"
     [attr.aria-label]="label"
     [attr.aria-labelledby]="labelledBy"
+    [attr.aria-required]="(required) ? true : null"
     (blur)="onInputBlur()"
     (change)="onInteractionEvent($event)"/>
   <span
diff --git a/src/app/public/modules/checkbox/checkbox.component.spec.ts b/src/app/public/modules/checkbox/checkbox.component.spec.ts
index 272ad4cb..19d95d39 100644
--- a/src/app/public/modules/checkbox/checkbox.component.spec.ts
+++ b/src/app/public/modules/checkbox/checkbox.component.spec.ts
@@ -15,10 +15,12 @@ import {
 } from '@angular/platform-browser';
 import {
   FormsModule,
+  NgForm,
   NgModel,
   FormControl,
   FormGroup,
-  ReactiveFormsModule
+  ReactiveFormsModule,
+  Validators
 } from '@angular/forms';
 
 import {
@@ -31,6 +33,7 @@ import {
   SkyCheckboxModule
 } from './';
 
+// #region helpers
 /** Simple component for testing a single checkbox. */
 @Component({
   template: `
@@ -77,6 +80,40 @@ class CheckboxWithFormDirectivesComponent {
   public isGood: boolean = false;
 }
 
+/** Simple component for testing a required template-driven checkbox. */
+@Component({
+  template: `
+  <div>
+    <form>
+      <sky-checkbox name="cb" ngModel [required]="required">
+        <sky-checkbox-label>
+          Be good
+        </sky-checkbox-label>
+      </sky-checkbox>
+    </form>
+  </div>
+  `
+})
+class CheckboxWithRequiredInputComponent {
+  public required = true;
+}
+
+/** Simple component for testing a required template-driven checkbox. */
+@Component({
+  template: `
+  <div>
+    <form>
+      <sky-checkbox name="cb" ngModel required>
+        <sky-checkbox-label>
+          Be good
+        </sky-checkbox-label>
+      </sky-checkbox>
+    </form>
+  </div>
+  `
+})
+class CheckboxWithRequiredAttributeComponent {}
+
 /** Simple component for testing an MdCheckbox with ngModel. */
 @Component({
   template: `
@@ -93,7 +130,45 @@ class CheckboxWithFormDirectivesComponent {
 })
 class CheckboxWithReactiveFormComponent {
   public checkbox1: FormControl = new FormControl(false);
+  public checkboxForm = new FormGroup({'checkbox1': this.checkbox1});
+}
 
+/** Simple component for testing a reactive form checkbox with required validator. */
+@Component({
+  template: `
+  <div>
+    <form [formGroup]="checkboxForm">
+      <sky-checkbox name="cb" formControlName="checkbox1" [required]="required" #wut>
+        <sky-checkbox-label>
+          Be good
+        </sky-checkbox-label>
+      </sky-checkbox>
+    </form>
+  </div>
+  `
+})
+class CheckboxWithReactiveFormRequiredInputComponent {
+  public checkbox1: FormControl = new FormControl(false);
+  public checkboxForm = new FormGroup({'checkbox1': this.checkbox1});
+  public required = true;
+}
+
+/** Simple component for testing a reactive form checkbox with required validator. */
+@Component({
+  template: `
+  <div>
+    <form [formGroup]="checkboxForm">
+      <sky-checkbox name="cb" formControlName="checkbox1" #wut>
+        <sky-checkbox-label>
+          Be good
+        </sky-checkbox-label>
+      </sky-checkbox>
+    </form>
+  </div>
+  `
+})
+class CheckboxWithReactiveFormRequiredValidatorComponent {
+  public checkbox1: FormControl = new FormControl(false, Validators.requiredTrue);
   public checkboxForm = new FormGroup({'checkbox1': this.checkbox1});
 }
 
@@ -162,6 +237,7 @@ class CheckboxWithOnPushChangeDetectionComponent {
   public isChecked: boolean = false;
   constructor(public ref: ChangeDetectorRef) {}
 }
+// #endregion
 
 describe('Checkbox component', () => {
   let fixture: ComponentFixture<any>;
@@ -183,6 +259,10 @@ describe('Checkbox component', () => {
         CheckboxWithOnPushChangeDetectionComponent,
         CheckboxWithTabIndexComponent,
         CheckboxWithReactiveFormComponent,
+        CheckboxWithReactiveFormRequiredInputComponent,
+        CheckboxWithReactiveFormRequiredValidatorComponent,
+        CheckboxWithRequiredAttributeComponent,
+        CheckboxWithRequiredInputComponent,
         MultipleCheckboxesComponent,
         SingleCheckboxComponent
       ],
@@ -191,6 +271,9 @@ describe('Checkbox component', () => {
         FormsModule,
         ReactiveFormsModule,
         SkyCheckboxModule
+      ],
+      providers: [
+        NgForm
       ]
     });
   });
@@ -591,6 +674,132 @@ describe('Checkbox component', () => {
         });
       });
     }));
+
+    it('should not have required and aria-reqiured attributes when not required', () => {
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('required')).toBeNull();
+        expect(inputElement.getAttribute('aria-required')).toBeNull();
+      });
+    });
+
+    it('should not have "sky-control-label-required" class', () => {
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(labelElement).not.toHaveCssClass('sky-control-label-required');
+      });
+    });
+  });
+
+  describe('with ngModel and required input', () => {
+    let checkboxElement: DebugElement;
+    let testComponent: CheckboxWithRequiredInputComponent;
+    let inputElement: HTMLInputElement;
+    let checkboxNativeElement: HTMLElement;
+    let ngModel: NgModel;
+    let labelElement: HTMLLabelElement;
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(CheckboxWithRequiredInputComponent);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        checkboxElement = fixture.debugElement.query(By.directive(SkyCheckboxComponent));
+        testComponent = fixture.componentInstance;
+        checkboxNativeElement = checkboxElement.nativeElement;
+        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+        ngModel = <NgModel> checkboxElement.injector.get(NgModel);
+        labelElement =
+          <HTMLLabelElement>checkboxElement
+            .nativeElement.querySelector('label.sky-checkbox-wrapper');
+      });
+    }));
+
+    it('should have required and aria-reqiured attributes', async(() => {
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('required')).not.toBeNull();
+        expect(inputElement.getAttribute('aria-required')).toEqual('true');
+      });
+    }));
+
+    it('should have "sky-control-label-required" class', () => {
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(labelElement).toHaveCssClass('sky-control-label-required');
+      });
+    });
+
+    it('should not have required and aria-reqiured attributes when input is false', async(() => {
+      fixture.detectChanges();
+      testComponent.required = false;
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('required')).toBeNull();
+        expect(inputElement.getAttribute('aria-required')).not.toEqual('true');
+      });
+    }));
+
+    it('should mark form as invalid when required input is true and checkbox is not checked', async(() => {
+      fixture.detectChanges();
+      expect(ngModel.valid).toBe(false);
+      labelElement.click();
+      expect(ngModel.valid).toBe(true);
+      labelElement.click();
+      expect(ngModel.valid).toBe(false);
+    }));
+
+    it('should not mark form as invalid when required input is false and checkbox is not checked', async(() => {
+      testComponent.required = false;
+      fixture.detectChanges();
+      expect(ngModel.valid).toBe(true);
+      labelElement.click();
+      expect(ngModel.valid).toBe(true);
+      labelElement.click();
+      expect(ngModel.valid).toBe(true);
+    }));
+  });
+
+  describe('with ngModel and required attribute', () => {
+    let checkboxElement: DebugElement;
+    let inputElement: HTMLInputElement;
+    let checkboxNativeElement: HTMLElement;
+    let ngModel: NgModel;
+    let labelElement: HTMLLabelElement;
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(CheckboxWithRequiredAttributeComponent);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        checkboxElement = fixture.debugElement.query(By.directive(SkyCheckboxComponent));
+        checkboxNativeElement = checkboxElement.nativeElement;
+        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+        ngModel = <NgModel> checkboxElement.injector.get(NgModel);
+        labelElement =
+          <HTMLLabelElement>checkboxElement
+            .nativeElement.querySelector('label.sky-checkbox-wrapper');
+      });
+    }));
+
+    it('should have required and aria-reqiured attributes', async(() => {
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('required')).not.toBeNull();
+        expect(inputElement.getAttribute('aria-required')).toEqual('true');
+      });
+    }));
+
+    it('should mark form as invalid when required input is true and checkbox is not checked', async(() => {
+      fixture.detectChanges();
+      expect(ngModel.valid).toBe(false);
+      labelElement.click();
+      expect(ngModel.valid).toBe(true);
+      labelElement.click();
+      expect(ngModel.valid).toBe(false);
+    }));
   });
 
   describe('with reactive form', () => {
@@ -683,6 +892,111 @@ describe('Checkbox component', () => {
         });
       });
     }));
+
+    it('should not have required and aria-reqiured attributes when not required', () => {
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('required')).toBeNull();
+        expect(inputElement.getAttribute('aria-required')).toBeNull();
+      });
+    });
+  });
+
+  describe('with reactive form and required validator', () => {
+    let checkboxElement: DebugElement;
+    let testComponent: CheckboxWithReactiveFormRequiredValidatorComponent;
+    let inputElement: HTMLInputElement;
+    let checkboxNativeElement: HTMLElement;
+    let formControl: FormControl;
+    let labelElement: HTMLLabelElement;
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(CheckboxWithReactiveFormRequiredValidatorComponent);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        checkboxElement = fixture.debugElement.query(By.directive(SkyCheckboxComponent));
+        checkboxNativeElement = checkboxElement.nativeElement;
+        testComponent = fixture.debugElement.componentInstance;
+        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+        formControl = testComponent.checkbox1;
+        labelElement =
+          <HTMLLabelElement>checkboxElement
+            .nativeElement.querySelector('label.sky-checkbox-wrapper');
+      });
+    }));
+
+    it('should have required and aria-reqiured attributes', async(() => {
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('required')).not.toBeNull();
+        expect(inputElement.getAttribute('aria-required')).toEqual('true');
+      });
+    }));
+
+    it('should mark form as invalid when required checkbox is not checked', async(() => {
+      fixture.detectChanges();
+      expect(formControl.valid).toBe(false);
+      labelElement.click();
+      expect(formControl.valid).toBe(true);
+      labelElement.click();
+      expect(formControl.valid).toBe(false);
+    }));
+  });
+
+  describe('with reactive form and required input', () => {
+    let checkboxElement: DebugElement;
+    let testComponent: CheckboxWithReactiveFormRequiredInputComponent;
+    let inputElement: HTMLInputElement;
+    let checkboxNativeElement: HTMLElement;
+    let formControl: FormControl;
+    let labelElement: HTMLLabelElement;
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(CheckboxWithReactiveFormRequiredInputComponent);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        checkboxElement = fixture.debugElement.query(By.directive(SkyCheckboxComponent));
+        checkboxNativeElement = checkboxElement.nativeElement;
+        testComponent = fixture.debugElement.componentInstance;
+        inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
+        formControl = testComponent.checkbox1;
+        labelElement =
+          <HTMLLabelElement>checkboxElement
+            .nativeElement.querySelector('label.sky-checkbox-wrapper');
+      });
+    }));
+
+    it('should have required and aria-reqiured attributes', async(() => {
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(inputElement.getAttribute('required')).not.toBeNull();
+        expect(inputElement.getAttribute('aria-required')).toEqual('true');
+      });
+    }));
+
+    it('should update validator when required input is changed', async(() => {
+      fixture.detectChanges();
+      expect(formControl.valid).toBe(false);
+      testComponent.required = false;
+      fixture.detectChanges();
+      expect(formControl.valid).toBe(true);
+      testComponent.required = true;
+      fixture.detectChanges();
+      expect(formControl.valid).toBe(false);
+    }));
+
+    it('should mark form as invalid when required checkbox is not checked', async(() => {
+      fixture.detectChanges();
+      expect(formControl.valid).toBe(false);
+      labelElement.click();
+      expect(formControl.valid).toBe(true);
+      labelElement.click();
+      expect(formControl.valid).toBe(false);
+    }));
   });
 
   describe('with name attribute', () => {
diff --git a/src/app/public/modules/checkbox/checkbox.component.ts b/src/app/public/modules/checkbox/checkbox.component.ts
index 90458496..45351ae2 100644
--- a/src/app/public/modules/checkbox/checkbox.component.ts
+++ b/src/app/public/modules/checkbox/checkbox.component.ts
@@ -2,18 +2,17 @@
 import {
   Component,
   EventEmitter,
-  forwardRef,
   Input,
-  Output
+  OnInit,
+  Optional,
+  Output,
+  Self
 } from '@angular/core';
 
 import {
   AbstractControl,
   ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-  ValidationErrors,
-  Validator,
-  NG_VALIDATORS
+  NgControl
 } from '@angular/forms';
 
 /**
@@ -21,39 +20,17 @@ import {
  */
 let nextId = 0;
 
-/**
- * Provider Expression that allows sky-checkbox to register as a ControlValueAccessor.
- * This allows it to support [(ngModel)].
- */
-// tslint:disable:no-forward-ref no-use-before-declare
-export const SKY_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => SkyCheckboxComponent),
-  multi: true
-};
-
-const SKY_CHECKBOX_VALIDATOR = {
-  provide: NG_VALIDATORS,
-  useExisting: forwardRef(() => SkyCheckboxComponent),
-  multi: true
-};
-
 // A simple change event emitted by the SkyCheckbox component.
 export class SkyCheckboxChange {
   public source: SkyCheckboxComponent;
   public checked: boolean;
 }
-// tslint:enable
 
 @Component({
   selector: 'sky-checkbox',
-  templateUrl: './checkbox.component.html',
-  providers: [
-    SKY_CHECKBOX_CONTROL_VALUE_ACCESSOR,
-    SKY_CHECKBOX_VALIDATOR
-  ]
+  templateUrl: './checkbox.component.html'
 })
-export class SkyCheckboxComponent implements ControlValueAccessor, Validator {
+export class SkyCheckboxComponent implements ControlValueAccessor, OnInit {
 
   /**
    * Hidden label for screen readers.
@@ -108,8 +85,8 @@ export class SkyCheckboxComponent implements ControlValueAccessor, Validator {
 
       // Do not mark the field as "dirty"
       // if the field has been initialized with a value.
-      if (this.isFirstChange && this.control) {
-        this.control.markAsPristine();
+      if (this.isFirstChange && this.ngControl) {
+        this.ngControl.control.markAsPristine();
         this.isFirstChange = false;
       }
     }
@@ -119,11 +96,41 @@ export class SkyCheckboxComponent implements ControlValueAccessor, Validator {
     return this._checked;
   }
 
-  private control: AbstractControl;
+  /**
+   * Indicates if the checkbox must be checked to be valid. This property accepts boolean values.
+   */
+  @Input()
+  set required(value: boolean) {
+    this._required = this.coerceBooleanProperty(value);
+  }
+
+  get required(): boolean {
+    return this._required;
+  }
+
   private isFirstChange = true;
+
   private _checkboxType: string;
+
   private _checked: boolean = false;
 
+  private _required: boolean = false;
+
+  constructor(
+    @Self() @Optional() private ngControl: NgControl
+  ) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  public ngOnInit(): void {
+    if (this.ngControl) {
+      // Backwards compatibility support for anyone still using Validators.Required.
+      this.required = this.required || this.hasRequiredValidation(this.ngControl);
+    }
+  }
+
   /**
    * Implemented as part of ControlValueAccessor.
    */
@@ -172,14 +179,6 @@ export class SkyCheckboxComponent implements ControlValueAccessor, Validator {
     this.onTouched();
   }
 
-  public validate(control: AbstractControl): ValidationErrors {
-    if (!this.control) {
-      this.control = control;
-    }
-
-    return;
-  }
-
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   /*istanbul ignore next */
   public onTouched: () => any = () => {};
@@ -201,4 +200,27 @@ export class SkyCheckboxComponent implements ControlValueAccessor, Validator {
   private _toggle() {
     this.checked = !this.checked;
   }
+
+  /**
+   * Gets the required state of the checkbox.
+   * Currently, Angular doesn't offer a way to get this easily, so we have to create an empty
+   * control using the current validator to see if it throws a `required` validation error.
+   * https://github.com/angular/angular/issues/13461#issuecomment-340368046
+   */
+  private hasRequiredValidation(ngControl: NgControl): boolean {
+    const abstractControl = ngControl.control as AbstractControl;
+    if (abstractControl && abstractControl.validator) {
+      const validator = abstractControl.validator({} as AbstractControl);
+      if (validator && validator.required) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /** Coerces a data-bound value (typically a string) to a boolean. */
+  private coerceBooleanProperty(value: any): boolean {
+    return value !== undefined && `${value}` !== 'false';
+  }
+
 }
diff --git a/src/app/public/modules/checkbox/checkbox.module.ts b/src/app/public/modules/checkbox/checkbox.module.ts
index d95be8e5..0a5ee72c 100644
--- a/src/app/public/modules/checkbox/checkbox.module.ts
+++ b/src/app/public/modules/checkbox/checkbox.module.ts
@@ -1,10 +1,11 @@
-// #region imports
-import {
-  NgModule
-} from '@angular/core';
 import {
   CommonModule
 } from '@angular/common';
+
+import {
+  NgModule
+} from '@angular/core';
+
 import {
   FormsModule
 } from '@angular/forms';
@@ -13,18 +14,23 @@ import {
   SkyIconModule
 } from '@skyux/indicators';
 
+import {
+  SkyCheckboxComponent
+} from './checkbox.component';
+
 import {
   SkyCheckboxLabelComponent
 } from './checkbox-label.component';
+
 import {
-  SkyCheckboxComponent
-} from './checkbox.component';
-// #endregion
+  SkyCheckboxRequiredValidatorDirective
+} from './checkbox-required-validator.directive';
 
 @NgModule({
   declarations: [
     SkyCheckboxComponent,
-    SkyCheckboxLabelComponent
+    SkyCheckboxLabelComponent,
+    SkyCheckboxRequiredValidatorDirective
   ],
   imports: [
     CommonModule,
@@ -33,7 +39,8 @@ import {
   ],
   exports: [
     SkyCheckboxComponent,
-    SkyCheckboxLabelComponent
+    SkyCheckboxLabelComponent,
+    SkyCheckboxRequiredValidatorDirective
   ]
 })
 export class SkyCheckboxModule { }
diff --git a/src/app/visual/checkbox/checkbox-visual.component.html b/src/app/visual/checkbox/checkbox-visual.component.html
index 7f9ff31d..fc70493a 100644
--- a/src/app/visual/checkbox/checkbox-visual.component.html
+++ b/src/app/visual/checkbox/checkbox-visual.component.html
@@ -66,3 +66,72 @@
     [checked]="false">
   </sky-checkbox>
 </div>
+
+<div id="template-driven-checkbox">
+  <h3>
+    Template-driven checkbox
+  </h3>
+  <p>
+    <sky-checkbox
+      ngModel
+      [required]="required"
+      #templateDrivenCheckbox="ngModel"
+    >
+      <sky-checkbox-label>
+        Check me
+      </sky-checkbox-label>
+    </sky-checkbox>
+  </p>
+
+  <table>
+    <tr>
+      <th>Touched</th>
+      <td>{{ templateDrivenCheckbox.touched }}</td>
+    </tr>
+    <tr>
+      <th>Pristine</th>
+      <td>{{ templateDrivenCheckbox.pristine }}</td>
+    </tr>
+    <tr>
+      <th>Valid</th>
+      <td>{{ templateDrivenCheckbox.valid }}</td>
+    </tr>
+  </table>
+</div>
+
+<div id="reactive-checkbox">
+  <h3>
+    Reactive checkbox
+  </h3>
+
+  <form
+    [formGroup]="reactiveFormGroup"
+    novalidate
+  >
+      <sky-checkbox
+        [required]="required"
+        formControlName="reactiveCheckbox"
+      >
+        <sky-checkbox-label>
+          Check me
+        </sky-checkbox-label>
+      </sky-checkbox>
+  </form>
+
+  <table>
+    <tr>
+      <th>Touched</th>
+      <td>{{ reactiveFormGroup.touched }}</td>
+    </tr>
+    <tr>
+      <th>Pristine</th>
+      <td>{{ reactiveFormGroup.pristine }}</td>
+    </tr>
+    <tr>
+      <th>Valid</th>
+      <td>{{ reactiveFormGroup.valid }}</td>
+    </tr>
+  </table>
+</div>
+
+<button (click)="toggleRequired()">Toggle required</button>
diff --git a/src/app/visual/checkbox/checkbox-visual.component.ts b/src/app/visual/checkbox/checkbox-visual.component.ts
index 5ce7f2d5..47d62fa0 100644
--- a/src/app/visual/checkbox/checkbox-visual.component.ts
+++ b/src/app/visual/checkbox/checkbox-visual.component.ts
@@ -1,11 +1,41 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+import {
+  FormBuilder,
+  FormGroup
+} from '@angular/forms';
 
 @Component({
   selector: 'checkbox-visual',
   templateUrl: './checkbox-visual.component.html'
 })
-export class CheckboxVisualComponent {
+export class CheckboxVisualComponent implements OnInit {
 
   public checkValue: boolean = true;
 
+  public foo: boolean;
+
+  public bar: boolean;
+
+  public reactiveFormGroup: FormGroup;
+
+  public required: boolean = true;
+
+  constructor(
+    private formBuilder: FormBuilder
+  ) { }
+
+  public ngOnInit(): void {
+    this.reactiveFormGroup = this.formBuilder.group(
+      { reactiveCheckbox: [ undefined ] }
+    );
+  }
+
+  public toggleRequired(): void {
+    this.required = !this.required;
+  }
+
 }