diff --git a/README.md b/README.md
index 7dcd0ff2a..20bfecaa5 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Goponents
 
-###### Currently `v1.7.1`
+###### Currently `v1.8.0`
 
 This project houses a set of UI components for Angular 7+ and designed around the 'Go' design system.
 
diff --git a/projects/go-lib/karma.conf.js b/projects/go-lib/karma.conf.js
index 255dc98be..8c1ef43f1 100644
--- a/projects/go-lib/karma.conf.js
+++ b/projects/go-lib/karma.conf.js
@@ -16,9 +16,9 @@ module.exports = function (config) {
     reporters: ['dots'],
     port: 9876,
     colors: true,
-    logLevel: config.LOG_INFO,
+    logLevel: config.LOG_WARN,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };
diff --git a/projects/go-lib/package.json b/projects/go-lib/package.json
index 184fa5361..dc040662a 100644
--- a/projects/go-lib/package.json
+++ b/projects/go-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tangoe/goponents",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mobi/goponents.git"
diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.html b/projects/go-lib/src/lib/components/go-select/go-select.component.html
index dec8c51d7..69d94a9a7 100644
--- a/projects/go-lib/src/lib/components/go-select/go-select.component.html
+++ b/projects/go-lib/src/lib/components/go-select/go-select.component.html
@@ -22,7 +22,10 @@
   [typeahead]="typeahead"
   [ngClass]="{'go-select--dark': theme === 'dark'}"
   [searchable]="searchable"
-  [typeToSearchText]="typeToSearchText">
+  [typeToSearchText]="typeToSearchText"
+  [virtualScroll]="virtualScroll"
+  (scrollToEnd)="onScrollToEnd()"
+  (scroll)="onScroll($event)">
   <ng-container *ngIf="multiple && showSelectAll">
     <ng-template ng-header-tmp>
       <button
diff --git a/projects/go-lib/src/lib/components/go-select/go-select.component.ts b/projects/go-lib/src/lib/components/go-select/go-select.component.ts
index 3106af929..db1d7a318 100644
--- a/projects/go-lib/src/lib/components/go-select/go-select.component.ts
+++ b/projects/go-lib/src/lib/components/go-select/go-select.component.ts
@@ -1,4 +1,4 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { generateId } from '../../utilities/form.utils';
@@ -33,6 +33,9 @@ export class GoSelectComponent implements OnInit {
   @Input() typeahead?: Subject<string>;
   @Input() typeToSearchText: string = 'Type to Search';
   @Input() theme: 'light' | 'dark' = 'light';
+  @Input() virtualScroll: boolean = false;
+  @Output() scrollToEnd: EventEmitter<any> = new EventEmitter<any>();
+  @Output() scroll: EventEmitter<{ start: number, end: number }> = new EventEmitter<{ start: number; end: number }>();
 
   @ContentChild('goSelectOption', { static: false }) goSelectOption: TemplateRef<any>;
   @ContentChild('goSelectOptionGroup', { static: false }) goSelectOptionGroup: TemplateRef<any>;
@@ -45,4 +48,14 @@ export class GoSelectComponent implements OnInit {
   onSelectAll(): void {
     this.control.patchValue(this.items.map((item: any) => this.bindValue ? item[this.bindValue] : item));
   }
+
+  onScrollToEnd(): void {
+    if (this.virtualScroll) {
+      this.scrollToEnd.emit();
+    }
+  }
+
+  onScroll($event: { start: number; end: number }): void {
+    this.scroll.emit($event);
+  }
 }
diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts b/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts
index 20e6072e5..1988d06d7 100644
--- a/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-table/go-table.component.spec.ts
@@ -149,18 +149,6 @@ describe('GoTableComponent', () => {
     });
   });
 
-  describe('afterViewInit', () => {
-    afterEach(() => {
-      component.selectAllControl.setValue(false);
-    });
-
-    it('should select all rows if preselected', () => {
-      component.tableConfig.preselected = true;
-      component.ngAfterViewInit();
-      expect(component.selectAllControl.value).toBe(true);
-    });
-  });
-
   describe('setPageByPageNumber', () => {
     beforeEach(() => {
       component.localTableConfig.totalCount = 135;
@@ -399,8 +387,12 @@ describe('GoTableComponent', () => {
     });
 
     it('should set selectAllIndeterminate to false if selectAll toggled off', () => {
+      component.ngOnInit();
+
       component.selectAllControl.setValue(false);
 
+      component.ngOnDestroy();
+
       expect(component.selectAllIndeterminate).toBe(false);
     });
 
@@ -414,14 +406,22 @@ describe('GoTableComponent', () => {
     });
 
     it('should reset targetedRows if toggling selectAll on', () => {
+      component.ngOnInit();
+
       component.selectAllControl.setValue(true);
 
+      component.ngOnDestroy();
+
       expect(component.targetedRows).toEqual([]);
     });
 
     it('should reset targetedRows if toggling selectAll off', () => {
+      component.ngOnInit();
+
       component.selectAllControl.setValue(false);
 
+      component.ngOnDestroy();
+
       expect(component.targetedRows).toEqual([]);
     });
 
@@ -433,8 +433,12 @@ describe('GoTableComponent', () => {
       };
       spyOn(component.selectAllEvent, 'emit');
 
+      component.ngOnInit();
+
       component.selectAllControl.setValue(false);
 
+      component.ngOnDestroy();
+
       expect(component.selectAllEvent.emit).toHaveBeenCalledWith(selectionEventData);
     });
   });
@@ -946,11 +950,14 @@ describe('GoTableComponent', () => {
       component.tableConfig.selectBy = 'id';
 
       component.renderTable();
+      component.ngOnInit();
 
       expect(component.rowSelectForm.value['selection_1']).toBe(false);
 
       component.selectAllControl.setValue(true);
 
+      component.ngOnDestroy();
+
       expect(component.rowSelectForm.value['selection_1']).toBe(true);
     });
   });
@@ -1100,6 +1107,16 @@ describe('GoTableComponent', () => {
       component.tableConfig.tableData = fakeTableData;
     });
 
+    afterEach(() => {
+      component.selectAllControl.setValue(false);
+    });
+
+    it('should select all rows if preselected', () => {
+      component.tableConfig.preselected = true;
+      component.ngAfterViewInit();
+      expect(component.selectAllControl.value).toBe(true);
+    });
+
     it('performs a search if datamode is client and table is searchable', () => {
       component.tableConfig.searchConfig.searchTerm = 'koala';
       component.tableConfig.searchConfig.searchable = true;
diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.ts b/projects/go-lib/src/lib/components/go-table/go-table.component.ts
index 16422ebd4..4ff167645 100644
--- a/projects/go-lib/src/lib/components/go-table/go-table.component.ts
+++ b/projects/go-lib/src/lib/components/go-table/go-table.component.ts
@@ -12,15 +12,14 @@ import {
   Output,
   QueryList,
   SimpleChanges,
-  TemplateRef,
-  ViewChild
+  TemplateRef
 } from '@angular/core';
 import {
   FormBuilder,
   FormControl,
   FormGroup
 } from '@angular/forms';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
 import { GoConfigService } from '../../go-config.service';
@@ -125,6 +124,7 @@ export class GoTableComponent implements OnInit, OnChanges, OnDestroy, AfterView
       this.setupSearch();
       this.setupPageSizes();
       this.setupConfigService();
+      this.setupSelectAllControlSub();
     }
   }
 
@@ -164,10 +164,6 @@ export class GoTableComponent implements OnInit, OnChanges, OnDestroy, AfterView
       this.handleSort();
       this.setPage(this.localTableConfig.pageConfig.offset);
       this.setSearchTerm();
-
-      if (this.localTableConfig.selectable) {
-        this.setupSelectAllControlSub();
-      }
     }
 
     this.showTable = Boolean(this.tableConfig);
@@ -546,7 +542,10 @@ export class GoTableComponent implements OnInit, OnChanges, OnDestroy, AfterView
   private setupRowSelectFormControlsSubs(): void {
     this.getDisplayData().forEach((row: any) => {
       this.rowSelectForm.get(`selection_${row[this.localTableConfig.selectBy]}`)
-        .valueChanges.pipe(takeUntil(this.pageChange$))
+        .valueChanges.pipe(
+          takeUntil(this.pageChange$),
+          takeUntil(this.destroy$)
+        )
         .subscribe((value: boolean) => {
           this.selectionChange(value, row);
         });
@@ -554,26 +553,28 @@ export class GoTableComponent implements OnInit, OnChanges, OnDestroy, AfterView
   }
 
   private setupSelectAllControlSub(): void {
-    this.selectAllControl.valueChanges
-      .pipe(
-        distinctUntilChanged(),
-        takeUntil(this.destroy$)
-      )
-      .subscribe(() => {
-        this.targetedRows = [];
-        this.updateRowSelectForm();
-
-        if (!this.selectAllControl.value) {
-          this.selectAllIndeterminate = false;
+    if (this.tableConfig.selectable) {
+      this.selectAllControl.valueChanges
+        .pipe(
+          distinctUntilChanged(),
+          takeUntil(this.destroy$)
+        )
+        .subscribe(() => {
+          this.targetedRows = [];
+          this.updateRowSelectForm();
+
+          if (!this.selectAllControl.value) {
+            this.selectAllIndeterminate = false;
+          }
+
+          this.selectAllEvent.emit({
+            deselectedRows: this.selectAllControl.value ? this.targetedRows : [],
+            selectionMode: this.determineSelectionMode(),
+            selectedRows: !this.selectAllControl.value ? this.targetedRows : []
+          });
         }
-
-        this.selectAllEvent.emit({
-          deselectedRows: this.selectAllControl.value ? this.targetedRows : [],
-          selectionMode: this.determineSelectionMode(),
-          selectedRows: !this.selectAllControl.value ? this.targetedRows : []
-        });
-      }
-    );
+      )
+    }
   }
 
   private updateRowSelectForm(): void {
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-time-format.model.ts b/projects/go-lib/src/lib/components/go-timepicker/go-time-format.model.ts
new file mode 100644
index 000000000..842a3f083
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-time-format.model.ts
@@ -0,0 +1,5 @@
+export interface GoTimeFormat {
+    hours: string;
+    minutes: string;
+    ampm: string;
+  }
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-time.component.html b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.html
new file mode 100644
index 000000000..b5e8b8b2c
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.html
@@ -0,0 +1,70 @@
+<div class="go-time--wrapper">
+  <div
+    class="go-time"
+    [ngClass]="{
+      'go-time--above': displayAbove,
+      'go-time--right': displayFromRight,
+      'go-time--append-to-content': appendToContent
+    }"
+  >
+  <div class="go-time-column">
+      <go-icon-button
+        buttonIcon="keyboard_arrow_up"
+        (click)="increaseHour()"
+      ></go-icon-button>
+      <input
+        #hourInput
+        class="go-form__input hour-minute-input"
+        placeholder="HH"
+        [(ngModel)]="hour"
+        (keypress)="validateInput($event, '^([0-1]|[0][0-9]|[1][0-2])$')"
+      />
+      <go-icon-button
+        buttonIcon="keyboard_arrow_down"
+        (click)="decreaseHour()"
+      ></go-icon-button>
+    </div>
+    <!-- Colon -->
+    <div class="go-time-column colon-content">
+      <span>:</span>
+    </div>
+    <div class="go-time-column">
+      <go-icon-button
+        buttonIcon="keyboard_arrow_up"
+        (click)="increaseMinute()"
+      ></go-icon-button>
+      <input
+      class="go-form__input hour-minute-input"
+      placeholder="MM"
+      [(ngModel)]="minute"
+      (keypress)="validateInput($event, '^([0-5]?[0-9])$')"
+      [ngClass]="{ 'go-form__input--error': inputMinuteError }"
+    />
+      <go-icon-button
+        buttonIcon="keyboard_arrow_down"
+        (click)="decreaseMinute()"
+      ></go-icon-button>
+    </div>
+    <!-- AM / PM Button -->
+    <div class="go-time-column go-time-format">
+      <go-button buttonVariant="secondary" (click)="changeFormat()">
+       {{ format ? 'AM' : 'PM' }}
+      </go-button>
+    </div>
+    <!-- Action Button Group -->
+    <div>
+      <ul class="go-button-group go-time-action">
+        <li class="go-button-group__item">
+          <go-button class="go-time-button" buttonVariant="secondary" (handleClick)="clear()">
+            Clear
+          </go-button>
+        </li>
+        <li class="go-button-group__item">
+          <go-button class="go-time-button" buttonVariant="primary" (handleClick)="apply()">
+            Apply
+          </go-button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-time.component.scss b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.scss
new file mode 100644
index 000000000..7ec63638e
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.scss
@@ -0,0 +1,64 @@
+@import "../../../styles/variables";
+@import "../../../styles/mixins";
+
+.go-time {
+  background: $theme-light-bg;
+  border: 1px solid $theme-light-border;
+  border-radius: $global-radius;
+  position: absolute;
+  z-index: z-index(toaster);
+  padding: 0 $column-gutter--half $column-gutter--half $column-gutter--half;
+}
+
+.go-time--above {
+  bottom: 2.5rem;
+}
+
+.go-time--right {
+  right: 0;
+}
+
+.go-time--append-to-content {
+  position: static;
+}
+
+.go-time--wrapper {
+  display: flex;
+}
+
+.colon-content {
+  margin-top: 1.8rem;
+  padding: $column-gutter--half;
+}
+
+.hour-minute-input::placeholder {
+  font-size: 0.625rem;
+}
+
+.go-time-action {
+  float: right;
+}
+
+.go-time-column {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  float: left;
+}
+
+.hour-minute-input {
+  width: 2.25rem;
+  text-align: center;
+}
+
+.go-time-format {
+  margin-top: 1.8rem;
+  padding-left: $column-gutter--half;
+}
+
+:host ::ng-deep .go-time-button {
+  .go-button {
+    padding: 0.25rem;
+  }
+}
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-time.component.spec.ts b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.spec.ts
new file mode 100644
index 000000000..546e4e77f
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.spec.ts
@@ -0,0 +1,134 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { GoTimeComponent } from './go-time.component';
+import { FormsModule } from '@angular/forms';
+import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module';
+import { GoButtonModule } from '../go-button/go-button.module';
+import { GoTimeFormat } from './go-time-format.model';
+
+describe('GoTimeComponent', () => {
+  let component: GoTimeComponent;
+  let fixture: ComponentFixture<GoTimeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GoTimeComponent],
+      imports: [
+        GoIconButtonModule,
+        GoButtonModule,
+        FormsModule
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GoTimeComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.ngOnInit();
+    expect(component).toBeTruthy();
+  });
+
+
+  describe('increaseHour', () => {
+
+    it('Hour will increase by one', () => {
+
+      component.hour = '10';
+      component.increaseHour();
+      expect(component.hour).toEqual('11');
+    });
+
+    it('Hour will reset to 01 if hour will more than 12', () => {
+
+      component.hour = '13';
+      component.increaseHour();
+      expect(component.hour).toEqual('01');
+    });
+  });
+
+  describe('increaseMinute', () => {
+    it('Minute will increase by one', () => {
+
+      component.minute = '10';
+      component.increaseMinute();
+      expect(component.minute).toEqual('11');
+    });
+
+    it('Minute will reset to 00 if minute will more than 59', () => {
+
+      component.minute = '60';
+      component.increaseMinute();
+      expect(component.minute).toEqual('00');
+    });
+  });
+
+  describe('decreaseHour', () => {
+    it('Hour will decrease by one', () => {
+
+      component.hour = '10';
+      component.decreaseHour();
+      expect(component.hour).toEqual('09');
+    });
+
+    it('Hour will reset to 12 if hour will decrease to 01', () => {
+
+      component.hour = '01';
+      component.decreaseHour();
+      expect(component.hour).toEqual('12');
+    });
+  });
+
+  describe('decreaseMinute', () => {
+    it('Minute will decrease by one', () => {
+
+      component.minute = '10';
+      component.decreaseMinute();
+      expect(component.minute).toEqual('09');
+    });
+
+    it('Minute will reset to 59 if it will decrease to 00', () => {
+
+      component.minute = '00';
+      component.decreaseMinute();
+      expect(component.minute).toEqual('59');
+    });
+  });
+
+  describe('apply time', () => {
+    it('check with time format after apply', () => {
+      component.hour = '06';
+      component.minute = '09';
+      component.format = false;
+      const timeFormat: GoTimeFormat = {
+        hours: '06',
+        minutes: '09',
+        ampm: 'PM',
+      };
+
+      component.apply();
+      expect(component.goTimeFormat).toEqual(timeFormat);
+    });
+
+    it('check with time format if hour and minute is not exist ', () => {
+      const timeFormat: GoTimeFormat = {
+        hours: '12',
+        minutes: '00',
+        ampm: 'AM',
+      };
+
+      component.apply();
+      expect(component.goTimeFormat).toEqual(timeFormat);
+    });
+  });
+
+  describe('validateInput', () => {
+   it('hour and minute will not support more than two digit', () => {
+        const event: KeyboardEvent = new KeyboardEvent('keypress', {key: '', });
+        const regex: string =  '^([0-1]|[0][0-9]|[1][0-2])$';
+
+        expect(component.validateInput(event, regex)).toBe(false);
+    });
+  });
+});
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-time.component.ts b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.ts
new file mode 100644
index 000000000..a8444603e
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-time.component.ts
@@ -0,0 +1,217 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+import { fadeAnimation } from '../../animations/fade.animation';
+import { GoTimeFormat } from './go-time-format.model';
+
+@Component({
+  selector: 'go-time',
+  styleUrls: ['./go-time.component.scss'],
+  templateUrl: './go-time.component.html',
+  animations: [fadeAnimation],
+})
+export class GoTimeComponent implements OnInit, AfterViewInit {
+
+  @Input() appendToContent: boolean;
+  @Input() selectedTime: string;
+  @Input() displayAbove: boolean;
+  @Input() displayFromRight: boolean;
+  @Output() timePicked: EventEmitter<object> = new EventEmitter();
+  @Output() closeTime: EventEmitter<void> = new EventEmitter();
+
+  inputHourError: boolean = false;
+  inputMinuteError: boolean = false;
+  format: boolean = true;
+  clickInside: boolean = false;
+  goTimeFormat: GoTimeFormat;
+  hour: string;
+  minute: string;
+
+  @ViewChild('hourInput', { static: false }) hourInput: ElementRef;
+
+  @HostListener('click')
+  ClickInside(): void {
+    this.clickInside = true;
+  }
+
+  @HostListener('document: click')
+  onDocumentClick(): void {
+    if (!this.clickInside) {
+      this.closeTimePicker();
+      this.resetTimeInput();
+    }
+    this.clickInside = false;
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  keyEvent(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'Esc': // IE/Edge specific value
+      case 'Escape':
+        event.preventDefault();
+        this.closeTimePicker();
+        this.resetTimeInput();
+        break;
+      case 'Enter':
+        this.apply();
+        break;
+      default:
+        return;
+    }
+  }
+
+  public closeTimePicker(): void {
+    this.closeTime.emit();
+  }
+
+  ngOnInit(): void {
+    if (this.selectedTime) {
+      this.changeTimeFormat(this.selectedTime);
+    } else {
+      this.goTimeFormat = this.formatAMPM(new Date());
+      this.hour = this.goTimeFormat.hours;
+      this.minute = this.goTimeFormat.minutes;
+      this.format = this.goTimeFormat.ampm === 'am' ? true : false;
+    }
+  }
+
+  ngAfterViewInit(): void {
+      this.hourInput.nativeElement.focus();
+  }
+
+  private formatAMPM(date: Date): GoTimeFormat  {
+    let hours: number | string = date.getHours();
+    let minutes: number | string = date.getMinutes();
+    const ampm: string = hours >= 12 ? 'pm' : 'am';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    hours = this.addZeroIfNeeded(hours.toString());
+    minutes =  this.addZeroIfNeeded(minutes.toString());
+    this.goTimeFormat = {
+      hours,
+      minutes,
+      ampm
+    };
+    return this.goTimeFormat;
+  }
+
+  private changeTimeFormat(timeString: string): void {
+    const H: number = +timeString.substr(0, 2);
+    const h: any = H % 12 || 12;
+    const ampm: string = H < 12 || H === 24 ? 'AM' : 'PM';
+    const minute: string = timeString.substr(3, 2);
+    this.hour = this.addZeroIfNeeded(h);
+    this.minute = this.addZeroIfNeeded(minute);
+    this.format = ampm === 'AM' ? true : false;
+  }
+
+  changeFormat(): void {
+    this.format = !this.format;
+  }
+
+  increaseHour(): void {
+    if (Number(this.hour) >= 12) {
+      this.hour = '01';
+      return;
+    }
+    this.hour = (Number(this.hour) + 1).toString();
+    this.hour =  this.addZeroIfNeeded(this.hour);
+  }
+
+  increaseMinute(): void {
+    if (Number(this.minute) >= 59) {
+      this.minute = '00';
+      return;
+    }
+    this.minute = (Number(this.minute) + 1).toString();
+    this.minute =  this.addZeroIfNeeded(this.minute);
+  }
+
+  decreaseHour(): void {
+    if (this.hour === '01') {
+      this.hour = '12';
+      return;
+    }
+    this.hour = (Number(this.hour) - 1).toString();
+    this.hour =  this.addZeroIfNeeded(this.hour);
+  }
+
+  decreaseMinute(): void {
+    if (this.minute === '00') {
+      this.minute = '59';
+      return;
+    }
+    this.minute = (Number(this.minute) - 1).toString();
+    this.minute =  this.addZeroIfNeeded(this.minute);
+  }
+
+  private addZeroIfNeeded(value: string): string {
+    if (Number(value) < 10) {
+      value = '0' + +value;
+    }
+    return value;
+  }
+
+  validateInput(event: KeyboardEvent, regex: string): boolean {
+    const input: HTMLInputElement = (event.target as HTMLInputElement);
+
+    if (/\d/.test(event.key)) {
+      const newString: string = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+      if (new RegExp(regex).test(newString + event.key)) {
+        return;
+      }
+    }
+    return false;
+  }
+
+  clear(): void {
+    this.closeTimePicker();
+    this.timePicked.emit();
+  }
+
+  apply(): void {
+    if (Number(this.hour) > 12 || Number(this.minute) > 59) {
+      this.inputTimeError();
+      return;
+    } else {
+      this.resetTimeInput();
+    }
+    if (!this.hour) {
+      this.hour = '12';
+    }
+    if (!this.minute) {
+      this.minute = '00';
+    }
+    this.hour = this.addZeroIfNeeded(this.hour);
+    this.minute = this.addZeroIfNeeded(this.minute);
+    this.goTimeFormat = {
+      hours: this.hour,
+      minutes: this.minute,
+      ampm: this.format ? 'AM' : 'PM',
+    };
+    this.timePicked.emit(this.goTimeFormat);
+    this.closeTimePicker();
+  }
+
+  private inputTimeError(): void {
+    if (Number(this.hour) > 12) {
+      this.inputHourError = true;
+    } else if (Number(this.minute) > 59) {
+      this.inputMinuteError = true;
+    }
+  }
+
+  resetTimeInput(): void {
+    this.inputHourError = false;
+    this.inputMinuteError = false;
+  }
+
+}
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html
new file mode 100644
index 000000000..cfe267480
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.html
@@ -0,0 +1,52 @@
+<label
+  [attr.for]="id"
+  class="go-form__label"
+  [ngClass]="{ 'go-form__label--dark': theme == 'dark' }"
+>
+  {{ label }}
+  <go-required-text [control]="control"></go-required-text>
+</label>
+<div class="go-timepicker">
+  <input
+    #datepickerInput
+    class="go-form__input go-input-time"
+    [id]="id"
+    [placeholder]="placeholder"
+    [ngClass]="{
+      'go-form__input--error': control?.errors?.length,
+      'go-form__input--dark': theme == 'dark'
+    }"
+    [(ngModel)]="selectedTime"
+    [disabled]="control.disabled"
+    (click)="toggleTimepicker($event)"
+    readonly
+  />
+  <go-icon-button
+    class="go-timepicker__toggle"
+    [buttonDisabled]="control.disabled"
+    buttonIcon="schedule"
+    (click)="toggleTimepicker($event)"
+  ></go-icon-button>
+  <go-time
+    *ngIf=timeOpen
+    [appendToContent]="appendToContent"
+    [displayFromRight]="displayFromRight"
+    [displayAbove]="displayAbove"
+    [selectedTime] = "openTimeValue"
+    (timePicked)="timePicked($event)"
+    (closeTime) = "closeTime()"
+  >
+  </go-time>
+</div>
+<go-hint *ngFor="let hint of hints" [message]="hint" [theme]="theme"></go-hint>
+
+<div *ngIf="control?.errors?.length">
+  <go-hint
+    *ngFor="let error of control.errors"
+    [message]="error.message"
+    [label]="error.type"
+    [theme]="theme"
+    type="negative"
+  ></go-hint>
+</div>
+
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.scss b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.scss
new file mode 100644
index 000000000..3200b6be8
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.scss
@@ -0,0 +1,13 @@
+.go-timepicker {
+  position: relative;
+}
+
+.go-timepicker__toggle {
+  position: absolute;
+  right: 0.25rem;
+  top: 0.25rem;
+}
+
+.go-input-time{
+  cursor: pointer;
+}
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.ts b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.ts
new file mode 100644
index 000000000..e14e16492
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.ts
@@ -0,0 +1,106 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { generateId } from '../../utilities/form.utils';
+import { GoTimeFormat } from './go-time-format.model';
+
+@Component({
+  selector: 'go-timepicker',
+  styleUrls: ['./go-timepicker.component.scss'],
+  templateUrl: './go-timepicker.component.html',
+})
+
+export class GoTimepickerComponent implements OnInit {
+  displayAbove: boolean = false;
+  displayFromRight: boolean = true;
+  timeOpen: boolean = false;
+  id: string;
+  openTimeValue: string;
+
+  @Input() key: string;
+  @Input() label: string;
+  @Input() control: FormControl;
+  @Input() hints: string[];
+  @Input() placeholder: string = '';
+  @Input() theme: string = 'light';
+  @Input() appendToContent: boolean = false;
+
+  selectedTime: string = '';
+
+  @ViewChild('datepickerInput', { static: true }) datepickerInput: ElementRef;
+
+  ngOnInit(): void {
+    this.id = this.key || generateId(this.label, 'timepicker');
+    this.selectedTime = this.changeTimeFormat(this.control.value);
+  }
+
+  public changeTimeFormat(timeString: string | Date): string {
+    if (!timeString || timeString == 'Invalid Date') {
+      return;
+    }
+    if (typeof(timeString) === 'object') {
+      timeString = `${this.addZeroIfNeeded(timeString.getHours())}:${this.addZeroIfNeeded(timeString.getMinutes())}:00`;
+    }
+    const H: number = +timeString.substr(0, 2);
+    const h: number | string = H % 12 || 12;
+    const hour: number | string = this.addZeroIfNeeded(h);
+    const ampm: string = H < 12 || H === 24 ? 'AM' : 'PM';
+    timeString = hour + timeString.substr(2, 3) + ' ' + ampm;
+    return timeString;
+  }
+
+  public toggleTimepicker(event: Event): void {
+    event.stopPropagation();
+    // Have to disable this here because of the event that we need to stop propagation on.
+    if (this.control.disabled) {
+      return;
+    }
+
+    this.timeOpen = !this.timeOpen;
+    const position: string = 'top';
+    const distance: object = this.datepickerInput.nativeElement.getBoundingClientRect();
+    this.displayAbove =
+      window.innerHeight - distance[position] < 350 && !this.appendToContent;
+    const convert24Hr: string = /^\s*$/.test(this.selectedTime)
+      ? undefined
+      : this.convertTo24Hour(this.selectedTime);
+    this.openTimeValue = convert24Hr ? convert24Hr : undefined;
+  }
+
+  public timePicked(event: GoTimeFormat): void {
+    if (event) {
+      const selctedTime: string =
+        event.hours + ':' + event.minutes + ' ' + event.ampm;
+      this.control.setValue(this.convertTo24Hour(selctedTime));
+      this.selectedTime = selctedTime;
+    } else {
+      this.selectedTime = '';
+      this.control.setValue(null);
+    }
+  }
+
+ public closeTime(): void {
+    this.timeOpen = false;
+  }
+
+  private convertTo24Hour(time12h: string): string {
+    if (time12h) {
+      const [time, modifier]: string[] = time12h.split(' ');
+
+      let [hours, minutes]: any[] = time.split(':');
+      if (hours === '12') {
+        hours = '00';
+      }
+      if (modifier === 'PM') {
+        hours = parseInt(hours, 10) + 12;
+      }
+      return `${hours}:${minutes}`;
+    }
+  }
+
+  addZeroIfNeeded(value: string | number): string | number {
+    if (Number(value) < 10) {
+      value = '0' + +value;
+    }
+    return value;
+  }
+}
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.ts.spec.ts b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.ts.spec.ts
new file mode 100644
index 000000000..26d310d20
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.component.ts.spec.ts
@@ -0,0 +1,124 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GoTimepickerComponent } from './go-timepicker.component';
+import { GoTimeComponent } from './go-time.component';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { GoHintModule } from '../go-hint/go-hint.module';
+import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module';
+import { GoRequiredTextModule } from '../go-required-text/go-required-text.module';
+import { GoButtonModule } from '../go-button/go-button.module';
+import { GoTimeFormat } from './go-time-format.model';
+
+describe('GoTimepickerComponent', () => {
+  let component: GoTimepickerComponent;
+  let fixture: ComponentFixture<GoTimepickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        GoTimeComponent,
+        GoTimepickerComponent
+      ],
+      imports: [
+        GoIconButtonModule,
+        GoButtonModule,
+        GoHintModule,
+        FormsModule,
+        GoRequiredTextModule,
+        ReactiveFormsModule,
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GoTimepickerComponent);
+    component = fixture.componentInstance;
+    component.control = new FormControl('');
+  });
+
+  it('should create', () => {
+    component.ngOnInit();
+    expect(component).toBeTruthy();
+  });
+
+  describe('ngOnInit', () => {
+    afterEach(() => {
+      component.selectedTime = null;
+    });
+
+    it('check with date object', () => {
+      const time: string = '05:15 AM';
+      component.control.setValue(new Date('2017-04-30 05:15:00'));
+      component.ngOnInit();
+
+      expect(component.changeTimeFormat(component.selectedTime)).toBe(time);
+    });
+
+    it('change the time format 24hr to 12hr', () => {
+      component.control.setValue('18:15:00');
+      const time: string = '06:15 PM';
+      component.ngOnInit();
+
+      expect(component.selectedTime).toEqual(time);
+    });
+  });
+
+  describe('timePicked', () => {
+    afterEach(() => {
+      component.selectedTime = null;
+    });
+
+    it('set the time with AM', () => {
+      const time: string = '10:20 AM';
+      const goTimeFormat: GoTimeFormat = {
+        hours: '10',
+        minutes: '20',
+        ampm: 'AM',
+      };
+      component.timePicked(goTimeFormat);
+
+      expect(component.selectedTime).toEqual(time);
+    });
+
+    it('set the time with PM', () => {
+      const time: string = '10:20 PM';
+      const goTimeFormat: GoTimeFormat = {
+        hours: '10',
+        minutes: '20',
+        ampm: 'PM',
+      };
+      component.timePicked(goTimeFormat);
+
+      expect(component.selectedTime).toEqual(time);
+    });
+
+    it('clear selected time', () => {
+      const time: string = '';
+      component.timePicked(null);
+
+      expect(component.selectedTime).toEqual(time);
+    });
+  });
+
+  describe('toggleTimepicker', () => {
+    afterEach(() => {
+      component.selectedTime = null;
+    });
+
+    it('should not open timepicker if control is disabled', () => {
+      component.control.disable();
+
+      component.toggleTimepicker(new Event('click'));
+
+      expect(component.timeOpen).toBe(false);
+    });
+
+    it('change selected time format to 24H', () => {
+      component.selectedTime = '05:42 PM';
+      const convertTime: string = '17:42';
+
+      component.toggleTimepicker(new Event('click'));
+      expect(component.openTimeValue).toBe(convertTime);
+    });
+  });
+});
diff --git a/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.module.ts b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.module.ts
new file mode 100644
index 000000000..fb3b97888
--- /dev/null
+++ b/projects/go-lib/src/lib/components/go-timepicker/go-timepicker.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { GoTimepickerComponent } from './go-timepicker.component';
+import { GoTimeComponent } from './go-time.component';
+import { GoRequiredTextModule } from '../go-required-text/go-required-text.module';
+import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module';
+import { GoInputModule } from '../go-input/go-input.module';
+import { GoButtonModule } from '../go-button/go-button.module';
+import { GoIconModule } from '../go-icon/go-icon.module';
+import { GoHintModule } from '../go-hint/go-hint.module';
+
+@NgModule({
+  declarations: [
+    GoTimepickerComponent,
+    GoTimeComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    GoIconButtonModule,
+    GoInputModule,
+    GoButtonModule,
+    GoIconModule,
+    GoRequiredTextModule,
+    GoHintModule
+  ],
+  exports: [GoTimepickerComponent],
+})
+export class GoTimepickerModule {}
diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts
index 1e997021b..6ff1cd0a6 100644
--- a/projects/go-lib/src/lib/go-shared.module.ts
+++ b/projects/go-lib/src/lib/go-shared.module.ts
@@ -25,6 +25,7 @@ import { GoSideNavModule } from './components/go-side-nav/go-side-nav.module';
 import { GoSwitchToggleModule } from './components/go-switch-toggle/go-switch-toggle.module';
 import { GoTableModule } from './components/go-table/go-table.module';
 import { GoTextAreaModule } from './components/go-text-area/go-text-area.module';
+import { GoTimepickerModule } from './components/go-timepicker/go-timepicker.module';
 import { GoToastModule } from './components/go-toast/go-toast.module';
 import { GoToasterModule } from './components/go-toaster/go-toaster.module';
 import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-card-link.module';
@@ -59,7 +60,8 @@ import { GoCopyCardLinkModule } from './directives/go-copy-card-link/go-copy-car
     GoTableModule,
     GoTextAreaModule,
     GoToastModule,
-    GoToasterModule
+    GoToasterModule,
+    GoTimepickerModule
   ],
   exports: [
     GoAccordionModule,
diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts
index 0e09d6335..69b661ed3 100644
--- a/projects/go-lib/src/public_api.ts
+++ b/projects/go-lib/src/public_api.ts
@@ -166,6 +166,9 @@ export * from './lib/components/go-tree/go-tree.component';
 export * from './lib/components/go-tree/go-tree.module';
 export * from './lib/components/go-tree/go-tree-node-config.model';
 
+// Timepicker
+export * from './lib/components/go-timepicker/go-time.component';
+export * from './lib/components/go-timepicker/go-timepicker.module';
 /***** Utils *****/
 export * from './lib/utilities/form.utils';
 export * from './lib/utilities/colors.util';
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
index 08b93f658..456b0cb14 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
@@ -871,4 +871,63 @@ <h4 class="go-heading-4 go-heading--underlined">Code</h4>
 
     </div>
   </go-card>
+
+  <go-card id="form-select-template" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Component Virtual scroll</h2>
+      <go-copy cardId="form-select-virtual-scroll" goCopyCardLink></go-copy>
+    </ng-container>
+    <div class="go-container" go-card-content>
+      <div class="go-column go-column--100">
+        <p class="go-body-copy">
+          Sometimes the data that needs to be rendered for the options of the select would cause performance and user 
+          experience issues. In this case, virtual scroll should be implemented.
+        </p>
+        
+        <p class="go-body-copy">
+          To do so, implement the <code class="code-block--inline">scrollToEnd</code> method on the select. When 
+          the user scrolls to the end of the current available options, the event will fire which will allow the implementor to 
+          fetch more options and add them to the array of items. This event will only fire after setting <code class="code-block--inline">virtualScroll</code> to true on the select component.
+        </p>
+        
+        <p class="go-body-copy go-body-copy--no-margin">
+          For more information on this, check the
+          <a
+            href="https://ng-select.github.io/ng-select#/virtual-scroll"
+            class="go-link">
+              ng-select documentation
+          </a>
+          for implementing virtual scroll.
+        </p>
+      </div>
+      <div class="go-column go-column--100 go-column--no-padding">
+        <div class="go-container">
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">View</h4>
+            <go-select 
+              [items]="selectData" 
+              [control]="select21" 
+              bindValue="value" 
+              bindLabel="name" 
+              [hints]="[
+              'Scroll to end for loading more data.'
+              ]" 
+              label="Select an Option" 
+              (scrollToEnd)="scrollToEnd()" 
+              (scroll)="scroll($event)"
+              [virtualScroll]="true">
+            </go-select>
+          </div>
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+            <code [highlight]="select21Code" class="code-block--no-bottom-margin">
+            </code>
+            <code [highlight]="select21ComponentCode" class="code-block--no-bottom-margin">
+            </code>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </go-card>
 </section>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
index 591936fbe..c316693a2 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
@@ -46,6 +46,96 @@ export class SelectDocsComponent implements OnInit {
     }
   ];
 
+  selectData: any = [
+    {
+      value: 1,
+      name: 'Harry',
+    },
+    {
+      value: 2,
+      name: 'Hermione',
+    },
+    {
+      value: 3,
+      name: 'Ron',
+    },
+    {
+      value: 4,
+      name: 'Voldermort',
+    },
+    {
+      value: 5,
+      name: 'Snake',
+    },
+    {
+      value: 6,
+      name: 'Hermione1',
+    },
+    {
+      value: 7,
+      name: 'Hermione2',
+    },
+    {
+      value: 8,
+      name: 'Hermione3',
+    },
+    {
+      value: 9,
+      name: 'Hermione4',
+    },
+    {
+      value: 10,
+      name: 'Hermione5',
+    },
+    {
+      value: 11,
+      name: 'Hermione6',
+    },
+    {
+      value: 12,
+      name: 'Hermione7',
+    },
+    {
+      value: 13,
+      name: 'Hermione7',
+    },
+    {
+      value: 14,
+      name: 'Hermione7',
+    },
+  ];
+
+  newSelectData: any = [
+    {
+      value: 15,
+      name: 'Alberta',
+    },
+    {
+      value: 15,
+      name: 'British Columbia',
+    },
+    {
+      value: 16,
+      name: 'Manitoba',
+    },
+    {
+      value: 17,
+      name: 'Northwest Territories',
+    },
+    {
+      value: 18,
+      name: 'Nunavut',
+    },
+    {
+      value: 19,
+      name: 'Ontario',
+    },
+    {
+      value: 20,
+      name: 'Prince Edward Island',
+    },
+  ];
+
   select1: FormControl = new FormControl();
   select2: FormControl = new FormControl();
   select3: FormControl = new FormControl();
@@ -66,6 +156,7 @@ export class SelectDocsComponent implements OnInit {
   select18: FormControl = new FormControl();
   select19: FormControl = new FormControl({ value: '', disabled: true });
   select20: FormControl = new FormControl();
+  select21: FormControl = new FormControl();
 
   hints: Array<string> = ['please select you favorite candy'];
 
@@ -348,7 +439,7 @@ export class SelectDocsComponent implements OnInit {
     </ng-template>
   </go-select>
   `;
-  
+
   select20Code: string = `
   <go-select
     [control]="select"
@@ -377,6 +468,30 @@ export class SelectDocsComponent implements OnInit {
   ]
   `;
 
+  select21Code: string = `
+ <go-select
+   [items]="selectData"
+   [control]="select"
+   bindValue="value"
+   bindLabel="name"
+   [hints]="['Scroll to end for loading more data']"
+   label="Select an Option"
+   (scrollToEnd)="scrollToEnd()"
+   (scroll)="scroll($event)"
+   [virtualScroll]="true">
+  </go-select>
+  `;
+
+  select21ComponentCode: string = `
+  scrollToEnd(): void {
+    // Code here
+  }
+
+  scroll($event: { start: number; end: number }): void {
+  // Code here
+  }
+  `;
+
   basicDisabledExample: string = `
   <go-select
     [control]="select"
@@ -444,4 +559,11 @@ export class SelectDocsComponent implements OnInit {
       }
     );
   }
+  scrollToEnd(): void {
+    this.selectData = [...this.selectData, ...this.newSelectData];
+  }
+
+  scroll($event: { start: number; end: number }): void {
+    console.log($event);
+  }
 }
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/timepicker-docs/timepicker-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/timepicker-docs/timepicker-docs.component.html
new file mode 100644
index 000000000..61a7bb661
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/timepicker-docs/timepicker-docs.component.html
@@ -0,0 +1,309 @@
+<section class="go-container">
+    <app-form-control-docs class="go-column go-column--100"></app-form-control-docs>
+  
+    <go-card id="form-input-control" class="go-column go-column--100">
+      <ng-container go-card-header>
+        <h2 class="go-heading-2 go-heading--no-wrap">Component Control</h2>
+        <go-copy cardId="form-input-control" goCopyCardLink></go-copy>
+      </ng-container>
+      <div class="go-container" go-card-content>
+  
+        <div class="go-column go-column--100">
+          <p class="go-body-copy go-body-copy--no-margin">
+            As with most of the form components, the only <code class="code-block--inline">@Input</code>
+            required of the timepicker component is a <code class="code-block--inline">FormControl</code>.
+            The FormControl can be passed in via the <code class="code-block--inline">[control]</code>
+            attribute on the &lt;go-timepicker&gt; component. A time can be initialized into the timepicker
+            by setting a time on the control. It can be initialized by either a string or a date object.
+            If using a string it can be entered as format (hh:mm:ss)
+          </p>
+        </div>
+  
+        <div class="go-column go-column--100 go-column--no-padding">
+          <div class="go-container">
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">View</h4>
+              <go-timepicker [control]="time"></go-timepicker>
+            </div>
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+              <code
+                [highlight]="basicInputExampleComponent"
+                class="code-block--no-bottom-margin">
+              </code>
+              <code
+                [highlight]="basicInputExample"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </go-card>
+
+    <go-card id="form-input-label" class="go-column go-column--100">
+      <ng-container go-card-header>
+        <h2 class="go-heading-2 go-heading--no-wrap">Component Label</h2>
+        <go-copy cardId="form-input-label" goCopyCardLink></go-copy>
+      </ng-container>
+      <div class="go-container" go-card-content>
+  
+        <div class="go-column go-column--100">
+          <p class="go-body-copy go-body-copy--no-margin">
+            All form components include an <code class="code-block--inline">@Input() label: string;</code>
+            that can be used to add a label to the input components.
+            In addition to displaying an HTML label, the text passed
+            in via the <code class="code-block--inline">[label]</code>
+            attribute is used to generate a unique ID to associate the
+            label with the timepicker. If no label is passed in, a generic,
+            but still unique ID will be generated.
+          </p>
+        </div>
+  
+        <div class="go-column go-column--100 go-column--no-padding">
+          <div class="go-container">
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">View</h4>
+              <go-timepicker
+                [control]="time2"
+                label="Select Time">
+              </go-timepicker>
+            </div>
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+              <code
+                [highlight]="basicInputLabelExample"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </go-card>
+
+    <go-card id="form-input-key" class="go-column go-column--100">
+      <ng-container go-card-header>
+        <h2 class="go-heading-2 go-heading--no-wrap">Component Key</h2>
+        <go-copy cardId="form-input-key" goCopyCardLink></go-copy>
+      </ng-container>
+      <div class="go-container" go-card-content>
+  
+        <div class="go-column go-column--100">
+          <p class="go-body-copy go-body-copy--no-margin">
+            As stated above the label attribute is used to generate a
+            unique ID to associate the label with the timepicker. As this might
+            not be desired, the <code class="code-block--inline">@Input() key: string;</code>
+            can be used to configure the ID attribute of the timepicker directly.
+            Anything passed into the component via the <code class="code-block--inline">[key]</code>
+            attribute will be used to both assign the ID to the timepicker and
+            associate the label with the timepicker.
+          </p>
+        </div>
+  
+        <div class="go-column go-column--100 go-column--no-padding">
+          <div class="go-container">
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">View</h4>
+              <go-timepicker
+                [control]="time2"
+                label="Select Time"
+                key="your-name-input">
+              </go-timepicker>
+            </div>
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+              <code
+                [highlight]="basicInputKeyExample"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+            <div class="go-column go-column--100">
+              <h4 class="go-heading-4 go-heading--underlined">Example Output</h4>
+              <p class="go-body-copy">
+                Notice in the below example output that the <code class="code-block--inline">key</code> has been assigned
+                to both the <code class="code-block--inline">id</code> attribute on
+                the input and the <code class="code-block--inline">for</code> attribute
+                on the label.
+              </p>
+              <code
+                [highlight]="basicInputKeyExampleOutput"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </go-card>
+
+    <go-card id="form-input-hints" class="go-column go-column--100">
+      <ng-container go-card-header>
+        <h2 class="go-heading-2 go-heading--no-wrap">Component Hints</h2>
+        <go-copy cardId="form-input-hints" goCopyCardLink></go-copy>
+      </ng-container>
+      <div class="go-container" go-card-content>
+  
+        <div class="go-column go-column--100">
+          <p class="go-body-copy go-body-copy--no-margin">
+            Form hints exist to help give more information about the
+            inputs they are attached to. The <code class="code-block--inline">@Input() key: Array&lt;string&gt;</code>
+            can be used to pass in an array of hints to the timepicker component.
+          </p>
+        </div>
+        
+        <div class="go-column go-column--100 go-column--no-padding">
+          <div class="go-container">
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">View</h4>
+              <go-timepicker
+                [control]="time3"
+                label="Select Time"
+                [hints]="hints">
+              </go-timepicker>
+            </div>
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+              <code
+                [highlight]="basicHintsTemplate"
+                class="code-block--no-bottom-margin">
+              </code>
+              <code
+                [highlight]="basicInputHintsExample"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </go-card>
+
+    <go-card id="form-input-errors" class="go-column go-column--100">
+      <ng-container go-card-header>
+        <h2 class="go-heading-2 go-heading--no-wrap">Component Errors</h2>
+        <go-copy cardId="form-input-errors" goCopyCardLink></go-copy>
+      </ng-container>
+      <div class="go-container" go-card-content>
+  
+        <div class="go-column go-column--100">
+          <p class="go-body-copy">
+            FormControls all have a <a class="go-link" href="https://angular.io/api/forms/AbstractControl#setErrors">consistent way of setting errors</a>
+            via the <code class="code-block--inline">setErrors()</code> function.
+            All goponents use this API to display errors on our components, but the
+            data needs to be displayed in a specific structure.
+          </p>
+          <p class="go-body-copy go-body-copy--no-margin">
+            By default the input type is set to "Error", however this can be
+            overrides as shown below.
+          </p>
+        </div>
+  
+        <div class="go-column go-column--100 go-column--no-padding">
+          <div class="go-container">
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">View</h4>
+              <go-timepicker
+                [control]="time4"
+                label="Select Time">
+              </go-timepicker>
+            </div>
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+              <code
+                [highlight]="basicInputLabelExample"
+                class="code-block--no-bottom-margin">
+              </code>
+              <code
+                [highlight]="basicErrorsTemplate"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </go-card>
+
+    <go-card id="form-input-disabled" class="go-column go-column--100">
+      <ng-container go-card-header>
+        <h2 class="go-heading-2 go-heading--no-wrap">Disable Component</h2>
+        <go-copy cardId="form-input-disabled" goCopyCardLink></go-copy>
+      </ng-container>
+      <div class="go-container" go-card-content>
+  
+        <div class="go-column go-column--100">
+          <p class="go-body-copy go-body-copy--no-margin">
+            FormControls can be either created as disable or later disabled
+            and re-enabled directly after they are created.
+          </p>
+        </div>
+   
+        <div class="go-column go-column--100 go-column--no-padding">
+          <div class="go-container">
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">View</h4>
+              <div class="go-container">
+                <div class="go-column go-column--100">
+                  <go-timepicker
+                    [control]="time5"
+                    label="Start Time">
+                  </go-timepicker>
+                </div>
+                <div class="go-column go-column--100">
+                  <go-timepicker
+                    [control]="time6"
+                    label="End Time">
+                  </go-timepicker>
+                </div>
+              </div>
+            </div>
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+              <code
+                [highlight]="basicDisabledExample"
+                class="code-block--no-bottom-margin">
+              </code>
+              <code
+                [highlight]="basicDisabledExample2"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </go-card>
+
+    <go-card id="form-input-placeholder" class="go-column go-column--100">
+      <ng-container go-card-header>
+        <h2 class="go-heading-2 go-heading--no-wrap">Component Placeholder</h2>
+        <go-copy cardId="form-input-placeholder" goCopyCardLink></go-copy>
+      </ng-container>
+      <div class="go-container" go-card-content>
+  
+        <div class="go-column go-column--100">
+          <p class="go-body-copy">
+            The timepicker components placeholder attribute can be set via
+            <code class="code-block--inline">@Input() placeholder: string;</code>
+            and the <code class="code-block--inline">[placeholder]</code> attribute.
+          </p>
+        </div>
+  
+        <div class="go-column go-column--100 go-column--no-padding">
+          <div class="go-container">
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">View</h4>
+              <go-timepicker
+                [control]="time7"
+                label="Select Time"
+                placeholder="10:00 AM">
+              </go-timepicker>
+            </div>
+            <div class="go-column go-column--50">
+              <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+              <code
+                [highlight]="basicPlaceholderExample"
+                class="code-block--no-bottom-margin">
+              </code>
+            </div>
+          </div>
+        </div>
+  
+      </div>
+    </go-card>
\ No newline at end of file
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/timepicker-docs/timepicker-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/timepicker-docs/timepicker-docs.component.ts
new file mode 100644
index 000000000..593e67630
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/timepicker-docs/timepicker-docs.component.ts
@@ -0,0 +1,114 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service';
+
+@Component({
+  templateUrl: './timepicker-docs.component.html'
+})
+export class TimepickerDocsComponent implements OnInit {
+
+    time: FormControl = new FormControl('18:15:00');
+    time2: FormControl = new FormControl();
+    time3: FormControl = new FormControl();
+    time4: FormControl = new FormControl();
+    time5: FormControl = new FormControl();
+    time6: FormControl = new FormControl();
+    time7: FormControl = new FormControl();
+
+    hints: Array<string> = [
+      'Please enter your time',
+      'This is a second hint for no reason'
+    ];
+
+    basicInputExample: string = `
+    <go-timepicker [control]="time"></go-timepicker>
+    `;
+
+    basicInputExampleComponent: string = `
+    time: FormControl = new FormControl('18:15:00');
+    `;
+
+    basicInputLabelExample: string = `
+    <go-timepicker [control]="time"></go-timepicker>
+    `;
+
+    basicInputKeyExample: string = `
+    <go-timepicker [control]="time" label="Select Time" key="your-name-input"></go-timepicker>
+    `;
+
+    basicInputKeyExampleOutput: string = `
+    <label for="your-name-input">Your Name</label>
+    <input type="text" id="your-name-input" [formControl]="time">
+    `;
+
+    basicHintsTemplate: string = `
+    hints: Array<string> = [
+      'Please enter your time',
+      'This is a second hint for no reason'
+    ];
+    `;
+
+    basicInputHintsExample: string = `
+    <go-timepicker
+      label="Select Time"
+      [control]="time"
+      [hints]="hints">
+    </go-datepicker>
+    `;
+
+    basicErrorsTemplate: string = `
+    this.time.setErrors([
+      {
+        message: 'This time is invalid'
+      },
+      {
+        type: 'Required',
+        message: 'This is a required input.'
+      }
+    ]);
+    `;
+
+    basicDisabledExample: string = `
+    startTime: new FormControl({
+      value: '',
+      disabled: true
+    });
+    `;
+
+    basicDisabledExample2: string = `
+    endTime: new FormControl('');
+
+    ngOnInit(): void {
+      this.endTime.disable();
+      // Use this.endTime.enable(); to re-enable the input.
+    }
+    `;
+
+    basicPlaceholderExample: string = `
+    <go-timepicker
+      [control]="time"
+      label="Select Time"
+      placeholder="10:00 AM">
+    </go-timepicker>
+    `;
+
+    constructor(private subNavService: SubNavService) {
+        this.subNavService.pageTitle = 'Timepicker';
+        this.subNavService.linkToSource = '';
+    }
+    ngOnInit(): void {
+      setTimeout((): void => {
+        this.time4.setErrors([
+          {
+            message: 'This time is invalid'
+          },
+          {
+            type: 'Required',
+            message: 'This is a required input.'
+          }
+        ]);
+        this.time5.disable();
+        this.time6.disable();
+      }, 500);
+    }
+}
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts
index 65771efc9..c1483e768 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts
@@ -18,7 +18,8 @@ export class FormDocsComponent {
         { route: './radio', routeTitle: 'Radio' },
         { route: './select', routeTitle: 'Select' },
         { route: './switch-toggle', routeTitle: 'Switch Toggle' },
-        { route: './textarea', routeTitle: 'Text Area' }
+        { route: './textarea', routeTitle: 'Text Area' },
+        { route: './timepicker', routeTitle: 'Timepicker' },
       ]
     }
   ];
diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
index cee932d20..91be5bcfc 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
@@ -59,6 +59,7 @@ import { TreeDocsComponent } from '../components/tree-docs/tree-docs.component';
 import { TableTitleTemplateComponent } from '../components/table-docs/components/table-title-template/table-title-template.component';
 import { VirtualScrollComponent } from '../components/virtual-scroll/virtual-scroll.component';
 import { TableChildRowsComponent } from '../components/table-docs/components/table-child-rows/table-child-rows.component';
+import { TimepickerDocsComponent } from '../components/form-docs/components/timepicker-docs/timepicker-docs.component';
 
 const routes: Routes = [
   { path: 'ui-kit', component: UiKitComponent },
@@ -86,7 +87,8 @@ const routes: Routes = [
     { path: 'radio', component: RadioButtonDocsComponent },
     { path: 'select', component: SelectDocsComponent },
     { path: 'switch-toggle', component: SwitchToggleDocsComponent },
-    { path: 'textarea', component: TextAreaDocsComponent }
+    { path: 'textarea', component: TextAreaDocsComponent },
+    { path: 'timepicker', component: TimepickerDocsComponent }
   ]},
   { path: 'ui-kit/icon-button', component: IconButtonDocsComponent },
   { path: 'ui-kit/layout', component: LayoutDocsComponent, children: [
diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
index ebc09c551..c3f9fd096 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
@@ -33,6 +33,7 @@ import {
   GoTableModule,
   GoTabModule,
   GoTextAreaModule,
+  GoTimepickerModule,
   GoToasterService,
   GoToastModule,
   GoTreeModule
@@ -107,6 +108,7 @@ import { VirtualScrollComponent } from './components/virtual-scroll/virtual-scro
 import { BasicTestLargeComponent } from './components/basic-test-large/basic-test-large.component';
 import { BasicTestSubmitButtonComponent } from './components/basic-test-submit-button/basic-test-submit-button.component';
 import { TableChildRowsComponent } from './components/table-docs/components/table-child-rows/table-child-rows.component';
+import { TimepickerDocsComponent } from './components/form-docs/components/timepicker-docs/timepicker-docs.component';
 
 @NgModule({
   imports: [
@@ -139,7 +141,8 @@ import { TableChildRowsComponent } from './components/table-docs/components/tabl
     UiKitRoutesModule,
     GoSharedModule,
     FormsModule,
-    GoTreeModule
+    GoTreeModule,
+    GoTimepickerModule
   ],
   declarations: [
     AccordionDocsComponent,
@@ -204,7 +207,8 @@ import { TableChildRowsComponent } from './components/table-docs/components/tabl
     TableFiltersComponent,
     TableTitleTemplateComponent,
     VirtualScrollComponent,
-    TableChildRowsComponent
+    TableChildRowsComponent,
+    TimepickerDocsComponent
   ],
   entryComponents: [
     BasicTestComponent,
diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts
index c1813fe2a..a52a7d753 100644
--- a/projects/go-tester/src/app/app.module.ts
+++ b/projects/go-tester/src/app/app.module.ts
@@ -34,6 +34,7 @@ import {
   GoSwitchToggleModule,
   GoTableModule,
   GoTextAreaModule,
+  GoTimepickerModule,
   GoToasterModule,
   GoToastModule
 } from '../../../go-lib/src/public_api';
@@ -99,7 +100,8 @@ import { AppGuard } from './app.guard';
     HttpClientModule,
     ReactiveFormsModule,
     ReactiveFormsModule,
-    GoPortalModule
+    GoPortalModule,
+    GoTimepickerModule
   ],
   providers: [
     AppService,