From 53fb3a602e39217025065b0e3d59d928812583d3 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Wed, 24 Apr 2019 11:34:48 +0200
Subject: [PATCH] feat(select): Eva style (#1391)

BREAKING CHANGE:

Arrow selector and element changed to svg icon.

NbSelectComponent 'isOpened' getter renamed to 'isOpen'.

NbOptionComponent and NbOptionGroupComponent 'disabledClass' getter
renamed to 'disabledAttribute'.

Following theme properties were renamed:
select-border-width -> select-[appearance]-border-width
select-max-height -> select-options-list-max-height
select-bg -> select-[appearance]-background-color
select-option-disabled-bg -> select-option-[appearance]-disabled-background-color
select-option-padding -> select-option-[appearance]-[size]-padding

Following theme properties removed:
select-checkmark-color
select-checkbox-color
select-option-disabled-opacity
---
 src/app/playground-components.ts              |  14 +-
 .../components/select/_select-filled.scss     |  66 +++
 .../theme/components/select/_select-hero.scss |  77 +++
 .../components/select/_select-outline.scss    |  55 +++
 .../select/_select.component.theme.scss       | 150 +++---
 .../select/option-group.component.scss        |  15 +-
 .../select/option-group.component.ts          |  20 +-
 .../components/select/option.component.scss   |  11 +-
 .../components/select/option.component.ts     |  21 +-
 .../components/select/select.component.html   |  38 +-
 .../components/select/select.component.scss   |  76 ++-
 .../components/select/select.component.ts     | 461 ++++++++++++++++--
 .../theme/components/select/select.module.ts  |  12 +-
 .../theme/components/select/select.spec.ts    |  23 +-
 .../theme/styles/themes/_default.scss         | 286 ++++++++++-
 .../select/select-clean.component.html        |  24 +-
 .../select/select-clean.component.ts          |  13 +-
 .../select/select-disabled.component.html     |  59 +--
 .../select/select-disabled.component.ts       |  13 +-
 .../with-layout/select/select-example.scss    |   9 +
 .../select/select-filled.component.html       |  38 ++
 .../select/select-filled.component.ts         |  15 +
 .../select/select-form.component.html         |  28 +-
 .../select/select-form.component.ts           |  13 +-
 .../select/select-groups.component.html       |  44 +-
 .../select/select-groups.component.ts         |  13 +-
 .../select/select-hero.component.html         |  64 +--
 .../select/select-hero.component.ts           |  13 +-
 .../select/select-interactive.component.html  |  88 ++++
 .../select/select-interactive.component.scss  |  52 ++
 .../select/select-interactive.component.ts    |  39 ++
 .../select/select-label.component.html        |  22 +-
 .../select/select-label.component.ts          |  13 +-
 .../select/select-multiple.component.html     |  16 +-
 .../select/select-multiple.component.ts       |   8 -
 .../select/select-outline.component.html      |  34 --
 .../select/select-outline.component.ts        |  26 -
 .../select/select-placeholder.component.html  |  16 +-
 .../select/select-placeholder.component.ts    |  13 +-
 .../select/select-routing.module.ts           |  11 +-
 .../select/select-shapes.component.html       |  40 +-
 .../select/select-shapes.component.ts         |  13 +-
 .../select/select-showcase.component.html     |  20 +-
 .../select/select-showcase.component.ts       |   9 +-
 .../select/select-sizes.component.html        |  37 +-
 .../select/select-sizes.component.ts          |  15 +-
 .../select/select-status.component.html       |  64 +--
 .../select/select-status.component.ts         |  13 +-
 .../with-layout/select/select.module.ts       |  13 +-
 49 files changed, 1600 insertions(+), 633 deletions(-)
 create mode 100644 src/framework/theme/components/select/_select-filled.scss
 create mode 100644 src/framework/theme/components/select/_select-hero.scss
 create mode 100644 src/framework/theme/components/select/_select-outline.scss
 create mode 100644 src/playground/with-layout/select/select-example.scss
 create mode 100644 src/playground/with-layout/select/select-filled.component.html
 create mode 100644 src/playground/with-layout/select/select-filled.component.ts
 create mode 100644 src/playground/with-layout/select/select-interactive.component.html
 create mode 100644 src/playground/with-layout/select/select-interactive.component.scss
 create mode 100644 src/playground/with-layout/select/select-interactive.component.ts
 delete mode 100644 src/playground/with-layout/select/select-outline.component.html
 delete mode 100644 src/playground/with-layout/select/select-outline.component.ts

diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
index 27ea83e6ab..a3593dd3dc 100644
--- a/src/app/playground-components.ts
+++ b/src/app/playground-components.ts
@@ -895,10 +895,10 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         name: 'Select Multiple',
       },
       {
-        path: 'select-outline.component',
-        link: '/select/select-outline.component',
-        component: 'SelectOutlineComponent',
-        name: 'Select Outline',
+        path: 'select-filled.component',
+        link: '/select/select-filled.component',
+        component: 'SelectFilledComponent',
+        name: 'Select Filled',
       },
       {
         path: 'select-placeholder.component',
@@ -930,6 +930,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'SelectStatusComponent',
         name: 'Select Status',
       },
+      {
+        path: 'select-interactive.component',
+        link: '/select/select-interactive.component',
+        component: 'SelectInteractiveComponent',
+        name: 'Select Interactive',
+      },
     ],
   },
   {
diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss
new file mode 100644
index 0000000000..bc98da8b4b
--- /dev/null
+++ b/src/framework/theme/components/select/_select-filled.scss
@@ -0,0 +1,66 @@
+@mixin select-filled {
+  nb-select.appearance-filled .select-button {
+    background-color: nb-theme(select-filled-background-color);
+    border-color: nb-theme(select-filled-border-color);
+    border-style: nb-theme(select-filled-border-style);
+    border-width: nb-theme(select-filled-border-width);
+    color: nb-theme(select-filled-text-color);
+
+    &.placeholder {
+      color: nb-theme(select-filled-placeholder-text-color);
+    }
+
+    &:focus {
+      border-color: nb-theme(select-filled-focus-border-color);
+    }
+    &:hover {
+      background-color: nb-theme(select-filled-hover-background-color);
+      border-color: nb-theme(select-filled-hover-border-color);
+    }
+    &[disabled] {
+      color: nb-theme(select-filled-disabled-text-color);
+      background-color: nb-theme(select-filled-disabled-background-color);
+      border-color: nb-theme(select-filled-disabled-border-color);
+    }
+  }
+
+  @each $size in nb-get-sizes() {
+    nb-select.appearance-filled.size-#{$size} .select-button {
+      padding: nb-theme(select-filled-#{$size}-padding);
+    }
+    .appearance-filled.size-#{$size} {
+      nb-option-group .option-group-title,
+      nb-option {
+        padding: nb-theme(select-option-filled-#{$size}-padding);
+      }
+      nb-option-group nb-option {
+        padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding);
+      }
+    }
+  }
+
+  @each $status in nb-get-statuses() {
+    nb-select.appearance-filled.status-#{$status} .select-button {
+      background-color: nb-theme(select-filled-#{$status}-background-color);
+      border-color: nb-theme(select-filled-#{$status}-border-color);
+      color: nb-theme(select-filled-#{$status}-text-color);
+
+      &.placeholder {
+        color: nb-theme(select-filled-#{$status}-placeholder-text-color);
+      }
+
+      &:focus {
+        background-color: nb-theme(select-filled-#{$status}-focus-background-color);
+        border-color: nb-theme(select-filled-#{$status}-focus-border-color);
+      }
+      &:hover {
+        background-color: nb-theme(select-filled-#{$status}-hover-background-color);
+        border-color: nb-theme(select-filled-#{$status}-hover-border-color);
+      }
+      &[disabled] {
+        background-color: nb-theme(select-filled-#{$status}-disabled-background-color);
+        border-color: nb-theme(select-filled-#{$status}-disabled-border-color);
+      }
+    }
+  }
+}
diff --git a/src/framework/theme/components/select/_select-hero.scss b/src/framework/theme/components/select/_select-hero.scss
new file mode 100644
index 0000000000..290ac19a0e
--- /dev/null
+++ b/src/framework/theme/components/select/_select-hero.scss
@@ -0,0 +1,77 @@
+@mixin select-hero {
+  nb-select.appearance-hero .select-button {
+    $left-color: nb-theme(select-hero-left-background-color);
+    $right-color: nb-theme(select-hero-right-background-color);
+    background-image: linear-gradient(to right, $left-color, $right-color);
+    border-color: nb-theme(select-hero-border-color);
+    border-style: nb-theme(select-hero-border-style);
+    border-width: nb-theme(select-hero-border-width);
+    color: nb-theme(select-hero-text-color);
+
+    &.placeholder {
+      color: nb-theme(select-hero-placeholder-text-color);
+    }
+
+    &:focus {
+      $left-color: nb-theme(select-hero-focus-left-background-color);
+      $right-color: nb-theme(select-hero-focus-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+    }
+    &:hover {
+      $left-color: nb-theme(select-hero-hover-left-background-color);
+      $right-color: nb-theme(select-hero-hover-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+    }
+    &[disabled] {
+      color: nb-theme(select-hero-disabled-text-color);
+      $left-color: nb-theme(select-hero-disabled-left-background-color);
+      $right-color: nb-theme(select-hero-disabled-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+    }
+  }
+
+  @each $size in nb-get-sizes() {
+    nb-select.appearance-hero.size-#{$size} .select-button {
+      padding: nb-theme(select-hero-#{$size}-padding);
+    }
+    .appearance-hero.size-#{$size} {
+      nb-option-group .option-group-title,
+      nb-option {
+        padding: nb-theme(select-option-hero-#{$size}-padding);
+      }
+      nb-option-group nb-option {
+        padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding);
+      }
+    }
+  }
+
+  @each $status in nb-get-statuses() {
+    nb-select.appearance-hero.status-#{$status} .select-button {
+      $left-color: nb-theme(select-hero-#{$status}-left-background-color);
+      $right-color: nb-theme(select-hero-#{$status}-right-background-color);
+      background-image: linear-gradient(to right, $left-color, $right-color);
+      color: nb-theme(select-hero-#{$status}-text-color);
+
+      &.placeholder {
+        color: nb-theme(select-hero-#{$status}-placeholder-text-color);
+      }
+
+      &:focus {
+        $left-color: nb-theme(select-hero-#{$status}-focus-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-focus-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
+      &:hover {
+        $left-color: nb-theme(select-hero-#{$status}-hover-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-hover-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
+      &[disabled] {
+        color: nb-theme(select-hero-#{$status}-disabled-text-color);
+        $left-color: nb-theme(select-hero-#{$status}-disabled-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-disabled-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
+    }
+  }
+}
diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss
new file mode 100644
index 0000000000..38bed4065c
--- /dev/null
+++ b/src/framework/theme/components/select/_select-outline.scss
@@ -0,0 +1,55 @@
+@mixin select-outline {
+  nb-select.appearance-outline .select-button {
+    background-color: nb-theme(select-outline-background-color);
+    border-color: nb-theme(select-outline-border-color);
+    border-style: nb-theme(select-outline-border-style);
+    border-width: nb-theme(select-outline-border-width);
+    color: nb-theme(select-outline-text-color);
+
+    &.placeholder {
+      color: nb-theme(select-outline-placeholder-text-color);
+    }
+
+    &:focus {
+      border-color: nb-theme(select-outline-focus-border-color);
+    }
+    &:hover {
+      border-color: nb-theme(select-outline-hover-border-color);
+    }
+    &[disabled] {
+      color: nb-theme(select-outline-disabled-text-color);
+      background-color: nb-theme(select-outline-disabled-background-color);
+      border-color: nb-theme(select-outline-disabled-border-color);
+    }
+  }
+
+  @each $status in nb-get-statuses() {
+    nb-select.appearance-outline.status-#{$status} .select-button {
+      border-color: nb-theme(select-outline-#{$status}-border-color);
+      &.selected {
+        background-color: nb-theme(select-option-outline-#{$status}-selected-background-color);
+      }
+      &:focus {
+        border-color: nb-theme(select-outline-#{$status}-focus-border-color);
+      }
+      &:hover {
+        border-color: nb-theme(select-outline-#{$status}-hover-border-color);
+      }
+    }
+  }
+
+  @each $size in nb-get-sizes() {
+    nb-select.appearance-outline.size-#{$size} .select-button {
+      padding: nb-theme(select-outline-#{$size}-padding);
+    }
+    .appearance-outline.size-#{$size} {
+      nb-option-group .option-group-title,
+      nb-option {
+        padding: nb-theme(select-option-outline-#{$size}-padding);
+      }
+      nb-option-group nb-option {
+        padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding);
+      }
+    }
+  }
+}
diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss
index 45c842f027..c0e84adf25 100644
--- a/src/framework/theme/components/select/_select.component.theme.scss
+++ b/src/framework/theme/components/select/_select.component.theme.scss
@@ -4,103 +4,111 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin nb-select-status($status) {
-  border: nb-theme(select-border-width) solid nb-theme(color-#{$status});
-
-  nb-option {
-    &:hover, &.selected {
-      background-color: nb-theme(color-#{$status});
-      color: nb-theme(color-white);
-    }
-  }
-}
+@import './select-outline';
+@import './select-filled';
+@import './select-hero';
 
 @mixin nb-select-theme() {
-  nb-select > button[nbButton] {
-    transition: all 0.1s;
+  nb-select {
+    .select-button {
+      min-width: nb-theme(select-min-width);
+      cursor: nb-theme(select-cursor);
 
-    &::after {
-      @include nb-rtl(left, 0.75rem);
-      @include nb-rtl(right, auto);
-    }
-
-    &.opened {
-      &.top {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+      &.placeholder {
+        font-weight: nb-theme(select-placeholder-text-font-weight);
       }
-
-      &.bottom {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+      &:focus {
+        box-shadow: 0 0 0 nb-theme(select-outline-width) nb-theme(select-outline-color);
+        outline: none;
+      }
+      &[disabled] {
+        cursor: nb-theme(select-disabled-cursor);
       }
     }
   }
 
-  nb-card.select {
-    background-color: nb-theme(select-bg);
-    max-height: nb-theme(select-max-height);
-    margin-bottom: 0;
-    box-shadow: none;
+  .options-list-container {
+    overflow: hidden;
 
-    nb-card-body {
+    & > .options-list {
+      margin: 0;
       padding: 0;
     }
+  }
 
-    nb-option {
-      padding: nb-theme(select-option-padding);
-      user-select: none;
-    }
-
-    &.primary {
-      @include nb-select-status(primary);
-    }
-
-    &.danger {
-      @include nb-select-status(danger);
-    }
+  .options-list {
+    max-height: nb-theme(select-options-list-max-height);
+    height: 100%;
+    overflow: auto;
+  }
 
-    &.warning {
-      @include nb-select-status(warning);
-    }
+  nb-option {
+    user-select: none;
 
-    &.info {
-      @include nb-select-status(info);
+    &:focus {
+      outline: none;
     }
+  }
 
-    &.success {
-      @include nb-select-status(success);
-    }
+  nb-select .select-button,
+  nb-option,
+  nb-option-group {
+    font-family: nb-theme(select-text-font-family);
+    font-weight: nb-theme(select-text-font-weight);
+  }
 
-    &.bottom {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+  @each $size in nb-get-sizes() {
+    nb-select.size-#{$size} .select-button,
+    .size-#{$size} nb-option {
+      font-size: nb-theme(select-#{$size}-text-font-size);
+      line-height: nb-theme(select-#{$size}-text-line-height);
     }
+  }
 
-    &.top {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+  @each $shape in nb-get-shapes() {
+    nb-select.shape-#{$shape} .select-button {
+      border-radius: nb-theme(select-#{$shape}-border-radius);
     }
 
-    nb-checkbox {
-      .text {
-        color: inherit;
+    .options-list-container.shape-#{$shape} {
+      &.bottom {
+        border-bottom-left-radius: nb-theme(select-#{$shape}-border-radius);
+        border-bottom-right-radius: nb-theme(select-#{$shape}-border-radius);
+      }
+      &.top {
+        border-top-left-radius: nb-theme(select-#{$shape}-border-radius);
+        border-top-right-radius: nb-theme(select-#{$shape}-border-radius);
       }
+    }
+  }
 
-      .native-input:checked + .custom-checkbox {
-        border-color: nb-theme(select-checkbox-color);
+  nb-option-group,
+  nb-option {
+    background-color: nb-theme(select-option-background-color);
+    color: nb-theme(select-option-text-color);
 
-        nb-icon {
-          color: nb-theme(select-checkmark-color);
-        }
-      }
+    &[disabled] {
+      background-color: nb-theme(select-option-disabled-background-color);
+      color: nb-theme(select-option-disabled-text-color);
     }
+  }
 
-    nb-option, nb-option-group {
-      &.disabled {
-        background-color: nb-theme(select-option-disabled-bg);
-        opacity: nb-theme(select-option-disabled-opacity);
-      }
+  nb-option {
+    &.selected {
+      background-color: nb-theme(select-option-selected-background-color);
+      color: nb-theme(select-option-selected-text-color);
+    }
+    &:focus {
+      background-color: nb-theme(select-option-focus-background-color);
+      color: nb-theme(select-option-focus-text-color);
+    }
+    &:hover {
+      background-color: nb-theme(select-option-hover-background-color);
+      color: nb-theme(select-option-hover-text-color);
     }
   }
+
+  @include select-outline();
+  @include select-filled();
+  @include select-hero();
 }
diff --git a/src/framework/theme/components/select/option-group.component.scss b/src/framework/theme/components/select/option-group.component.scss
index 44e4e363a8..6eaa545a3f 100644
--- a/src/framework/theme/components/select/option-group.component.scss
+++ b/src/framework/theme/components/select/option-group.component.scss
@@ -6,17 +6,8 @@
 
 :host {
   display: block;
+}
 
-  span {
-    padding: 1.125rem 0.5rem;
-    display: block;
-  }
-
-  &.disabled {
-    pointer-events: none;
-  }
-
-  /deep/ nb-option {
-    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
-  }
+.option-group-title {
+  display: block;
 }
diff --git a/src/framework/theme/components/select/option-group.component.ts b/src/framework/theme/components/select/option-group.component.ts
index 10d9fe9ec6..6dea67e246 100644
--- a/src/framework/theme/components/select/option-group.component.ts
+++ b/src/framework/theme/components/select/option-group.component.ts
@@ -13,23 +13,25 @@ import { convertToBoolProperty } from '../helpers';
   styleUrls: ['./option-group.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <span>{{ title }}</span>
+    <span class="option-group-title">{{ title }}</span>
     <ng-content select="nb-option, ng-container"></ng-content>
   `,
 })
 export class NbOptionGroupComponent {
   @Input() title: string;
 
-  @Input('disabled')
-  set setDisabled(disabled: boolean) {
-    this.disabled = convertToBoolProperty(disabled);
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
   }
+  set disabled(value: boolean) {
+    this._disabled = convertToBoolProperty(value);
+  }
+  protected _disabled: boolean = false;
 
-  disabled: boolean = false;
-
-  @HostBinding('class.disabled')
-  get disabledClass(): boolean {
-    return this.disabled;
+  @HostBinding('attr.disabled')
+  get disabledAttribute(): '' | null {
+    return this.disabled ? '' : null;
   }
 }
 
diff --git a/src/framework/theme/components/select/option.component.scss b/src/framework/theme/components/select/option.component.scss
index 3b45dc5d62..ceb15b9fe8 100644
--- a/src/framework/theme/components/select/option.component.scss
+++ b/src/framework/theme/components/select/option.component.scss
@@ -4,12 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@import '../../styles/core/mixins';
+
 :host {
   display: block;
-
-  &.disabled {
-    pointer-events: none;
-  }
+  @include nb-component-animation(background-color, color);
 
   &:hover {
     cursor: pointer;
@@ -20,3 +19,7 @@
   }
 }
 
+:host([disabled]) {
+  pointer-events: none;
+}
+
diff --git a/src/framework/theme/components/select/option.component.ts b/src/framework/theme/components/select/option.component.ts
index 72871748f4..39d96d8026 100644
--- a/src/framework/theme/components/select/option.component.ts
+++ b/src/framework/theme/components/select/option.component.ts
@@ -47,10 +47,14 @@ export class NbOptionComponent<T> implements OnDestroy {
    * */
   @Input() value: T;
 
-  @Input('disabled')
-  set setDisabled(disabled: boolean) {
-    this.disabled = convertToBoolProperty(disabled);
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
   }
+  set disabled(value: boolean) {
+    this._disabled = convertToBoolProperty(value);
+  }
+  protected _disabled: boolean = false;
 
   /**
    * Fires value when option selection change.
@@ -66,8 +70,7 @@ export class NbOptionComponent<T> implements OnDestroy {
   }
 
   selected: boolean = false;
-  disabled: boolean = false;
-  private alive: boolean = true;
+  protected alive: boolean = true;
 
   constructor(@Inject(forwardRef(() => NbSelectComponent)) protected parent,
               protected elementRef: ElementRef,
@@ -98,9 +101,9 @@ export class NbOptionComponent<T> implements OnDestroy {
     return this.selected;
   }
 
-  @HostBinding('class.disabled')
-  get disabledClass(): boolean {
-    return this.disabled;
+  @HostBinding('attr.disabled')
+  get disabledAttribute(): '' | null {
+    return this.disabled ? '' : null;
   }
 
   @HostListener('click')
@@ -116,7 +119,7 @@ export class NbOptionComponent<T> implements OnDestroy {
     this.setSelection(false);
   }
 
-  private setSelection(selected: boolean): void {
+  protected setSelection(selected: boolean): void {
     /**
      * In case of changing options in runtime the reference to the selected option will be kept in select component.
      * This may lead to exceptions with detecting changes in destroyed component.
diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html
index f26fa4be67..3c2472d60b 100644
--- a/src/framework/theme/components/select/select.component.html
+++ b/src/framework/theme/components/select/select.component.html
@@ -1,33 +1,25 @@
-<button
-  nbButton
-  [size]="size"
-  [status]="status"
-  [shape]="shape"
-  [hero]="hero"
-  [disabled]="disabled"
-  [fullWidth]="fullWidth"
-  [outline]="outline"
-  [class.opened]="isOpened"
-  [ngClass]="overlayPosition"
-  (blur)="trySetTouched()"
-  type="button">
+<button [disabled]="disabled"
+        [ngClass]="selectButtonClasses"
+        (blur)="trySetTouched()"
+        class="select-button"
+        type="button"
+        #selectButton>
 
-    <ng-container *ngIf="selectionModel?.length">
-
-      <ng-container *ngIf="customLabel">
+    <ng-container *ngIf="selectionModel.length; else placeholderTemplate">
+      <ng-container *ngIf="customLabel; else defaultSelectionTemplate">
         <ng-content select="nb-select-label"></ng-content>
       </ng-container>
 
-      <ng-container *ngIf="!customLabel">{{ selectionView }}</ng-container>
-
+      <ng-template #defaultSelectionTemplate>{{ selectionView }}</ng-template>
     </ng-container>
 
-    <ng-container *ngIf="!selectionModel?.length">{{ placeholder }}</ng-container>
+    <ng-template #placeholderTemplate>{{ placeholder }}</ng-template>
 
+    <nb-icon aria-hidden="true" icon="chevron-down-outline" pack="nebular-essentials"></nb-icon>
 </button>
 
-<nb-card *nbPortal class="select" [ngClass]="[status, overlayPosition]" [style.width.px]="hostWidth">
-  <nb-card-body>
+<div *nbPortal [ngClass]="optionsListClasses" [style.width.px]="hostWidth" class="options-list-container">
+  <ul class="options-list">
     <ng-content select="nb-option, nb-option-group"></ng-content>
-  </nb-card-body>
-</nb-card>
+  </ul>
+</div>
diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss
index 2e41ab0d11..794a05c237 100644
--- a/src/framework/theme/components/select/select.component.scss
+++ b/src/framework/theme/components/select/select.component.scss
@@ -4,32 +4,60 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@import '../../styles/core/mixins';
+
 :host {
-  display: block;
-
-  button {
-    position: relative;
-    width: 100%;
-    text-align: start;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    border: none;
+  display: inline-block;
+  max-width: 100%;
+
+  .select-button {
+    @include nb-ltr(text-align, left) {
+      nb-icon {
+        right: 0.2em;
+      }
+    }
+    @include nb-rtl(text-align, right) {
+      nb-icon {
+        left: 0.2em;
+      }
+    }
   }
 
-  button::after {
-    top: 50%;
-    right: 0.75rem;
-    position: absolute;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: 0.255em;
-    vertical-align: 0.255em;
-    content: '';
-    border-top: 0.3em solid;
-    border-right: 0.3em solid transparent;
-    border-bottom: 0;
-    border-left: 0.3em solid transparent;
+  .select-button.bottom {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .select-button.top {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 }
+
+:host(.full-width) {
+  width: 100%;
+}
+
+.select-button {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+
+  @include nb-component-animation(background-color, border-color, border-radius, box-shadow, color);
+}
+
+nb-icon {
+  font-size: 1.5em;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  @include nb-ltr(right, 0.5rem);
+  @include nb-rtl(left, 0.5rem);
+  @include nb-component-animation(transform);
+}
+
+.select-button.open nb-icon {
+  transform: translateY(-50%) rotate(180deg);
+}
diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
index 037aed36e1..56712334e9 100644
--- a/src/framework/theme/components/select/select.component.ts
+++ b/src/framework/theme/components/select/select.component.ts
@@ -16,6 +16,7 @@ import {
   ElementRef,
   EventEmitter,
   forwardRef,
+  HostBinding,
   Inject,
   Input,
   OnDestroy,
@@ -41,11 +42,14 @@ import {
   NbTriggerStrategy,
   NbTriggerStrategyBuilderService,
 } from '../cdk';
+import { NbComponentSize } from '../component-size';
+import { NbComponentShape } from '../component-shape';
+import { NbComponentStatus } from '../component-status';
 import { NbOptionComponent } from './option.component';
-import { NbButtonComponent } from '../button/button.component';
 import { NB_DOCUMENT } from '../../theme.options';
 import { convertToBoolProperty } from '../helpers';
 
+export type NbSelectAppearance = 'outline' | 'filled' | 'hero';
 
 @Component({
   selector: 'nb-select-label',
@@ -65,7 +69,7 @@ export class NbSelectLabelComponent {
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbSelectModule,
  *   ],
  * })
@@ -114,13 +118,13 @@ export class NbSelectLabelComponent {
  *
  * @stacked-example(Select statuses, select/select-status.component)
  *
- * There are four select sizes:
+ * There are five select sizes:
  *
  * @stacked-example(Select sizes, select/select-sizes.component)
  *
- * And two additional style types - `outline`:
+ * And two additional style types - `filled`:
  *
- * @stacked-example(Outline select, select/select-outline.component)
+ * @stacked-example(Filled select, select/select-filled.component)
  *
  * and `hero`:
  *
@@ -130,17 +134,244 @@ export class NbSelectLabelComponent {
  *
  * @stacked-example(Select shapes, select/select-shapes.component)
  *
+ * @additional-example(Interactive, select/select-interactive.component)
  *
  * @styles
  *
- * select-border-width:
- * select-max-height:
- * select-bg:
- * select-checkbox-color:
- * select-checkmark-color:
- * select-option-disabled-bg:
- * select-option-disabled-opacity:
- * select-option-padding:
+ * select-cursor:
+ * select-disabled-cursor:
+ * select-min-width:
+ * select-options-list-max-height:
+ * select-outline-width:
+ * select-outline-color:
+ * select-text-font-family:
+ * select-text-font-weight:
+ * select-placeholder-text-font-weight:
+ * select-option-background-color:
+ * select-option-text-color:
+ * select-option-selected-background-color:
+ * select-option-selected-text-color:
+ * select-option-focus-background-color:
+ * select-option-focus-text-color:
+ * select-option-hover-background-color:
+ * select-option-hover-text-color:
+ * select-option-disabled-background-color:
+ * select-option-disabled-text-color:
+ * select-tiny-text-font-size:
+ * select-tiny-text-line-height:
+ * select-small-text-font-size:
+ * select-small-text-line-height:
+ * select-medium-text-font-size:
+ * select-medium-text-line-height:
+ * select-large-text-font-size:
+ * select-large-text-line-height:
+ * select-giant-text-font-size:
+ * select-giant-text-line-height:
+ * select-rectangle-border-radius:
+ * select-semi-round-border-radius:
+ * select-round-border-radius:
+ * select-outline-background-color:
+ * select-outline-border-color:
+ * select-outline-border-style:
+ * select-outline-border-width:
+ * select-outline-text-color:
+ * select-outline-placeholder-text-color:
+ * select-outline-focus-border-color:
+ * select-outline-hover-border-color:
+ * select-outline-disabled-border-color:
+ * select-outline-disabled-background-color:
+ * select-outline-disabled-text-color:
+ * select-outline-tiny-padding:
+ * select-outline-small-padding:
+ * select-outline-medium-padding:
+ * select-outline-large-padding:
+ * select-outline-giant-padding:
+ * select-outline-primary-border-color:
+ * select-outline-primary-focus-border-color:
+ * select-outline-primary-hover-border-color:
+ * select-outline-success-border-color:
+ * select-outline-success-focus-border-color:
+ * select-outline-success-hover-border-color:
+ * select-outline-info-border-color:
+ * select-outline-info-focus-border-color:
+ * select-outline-info-hover-border-color:
+ * select-outline-warning-border-color:
+ * select-outline-warning-focus-border-color:
+ * select-outline-warning-hover-border-color:
+ * select-outline-danger-border-color:
+ * select-outline-danger-focus-border-color:
+ * select-outline-danger-hover-border-color:
+ * select-option-outline-tiny-padding:
+ * select-option-outline-small-padding:
+ * select-option-outline-medium-padding:
+ * select-option-outline-large-padding:
+ * select-option-outline-giant-padding:
+ * select-group-option-outline-tiny-start-padding:
+ * select-group-option-outline-small-start-padding:
+ * select-group-option-outline-medium-start-padding:
+ * select-group-option-outline-large-start-padding:
+ * select-group-option-outline-giant-start-padding:
+ * select-filled-background-color:
+ * select-filled-border-color:
+ * select-filled-border-style:
+ * select-filled-border-width:
+ * select-filled-text-color:
+ * select-filled-placeholder-text-color:
+ * select-filled-focus-border-color:
+ * select-filled-hover-background-color:
+ * select-filled-hover-border-color:
+ * select-filled-disabled-background-color:
+ * select-filled-disabled-border-color:
+ * select-filled-disabled-text-color:
+ * select-filled-tiny-padding:
+ * select-filled-small-padding:
+ * select-filled-medium-padding:
+ * select-filled-large-padding:
+ * select-filled-giant-padding:
+ * select-filled-primary-background-color:
+ * select-filled-primary-border-color:
+ * select-filled-primary-text-color:
+ * select-filled-primary-placeholder-text-color:
+ * select-filled-primary-focus-background-color:
+ * select-filled-primary-focus-border-color:
+ * select-filled-primary-hover-background-color:
+ * select-filled-primary-hover-border-color:
+ * select-filled-primary-disabled-background-color:
+ * select-filled-primary-disabled-border-color:
+ * select-filled-success-background-color:
+ * select-filled-success-border-color:
+ * select-filled-success-text-color:
+ * select-filled-success-placeholder-text-color:
+ * select-filled-success-focus-background-color:
+ * select-filled-success-focus-border-color:
+ * select-filled-success-hover-background-color:
+ * select-filled-success-hover-border-color:
+ * select-filled-success-disabled-background-color:
+ * select-filled-success-disabled-border-color:
+ * select-filled-info-background-color:
+ * select-filled-info-border-color:
+ * select-filled-info-text-color:
+ * select-filled-info-placeholder-text-color:
+ * select-filled-info-focus-background-color:
+ * select-filled-info-focus-border-color:
+ * select-filled-info-hover-background-color:
+ * select-filled-info-hover-border-color:
+ * select-filled-info-disabled-background-color:
+ * select-filled-info-disabled-border-color:
+ * select-filled-warning-background-color:
+ * select-filled-warning-border-color:
+ * select-filled-warning-text-color:
+ * select-filled-warning-placeholder-text-color:
+ * select-filled-warning-focus-background-color:
+ * select-filled-warning-focus-border-color:
+ * select-filled-warning-hover-background-color:
+ * select-filled-warning-hover-border-color:
+ * select-filled-warning-disabled-background-color:
+ * select-filled-warning-disabled-border-color:
+ * select-filled-danger-background-color:
+ * select-filled-danger-border-color:
+ * select-filled-danger-text-color:
+ * select-filled-danger-placeholder-text-color:
+ * select-filled-danger-focus-background-color:
+ * select-filled-danger-focus-border-color:
+ * select-filled-danger-hover-background-color:
+ * select-filled-danger-hover-border-color:
+ * select-filled-danger-disabled-background-color:
+ * select-filled-danger-disabled-border-color:
+ * select-option-filled-tiny-padding:
+ * select-group-option-filled-tiny-padding-start:
+ * select-option-filled-small-padding:
+ * select-group-option-filled-small-padding-start:
+ * select-option-filled-medium-padding:
+ * select-group-option-filled-medium-padding-start:
+ * select-option-filled-large-padding:
+ * select-group-option-filled-large-padding-start:
+ * select-option-filled-giant-padding:
+ * select-group-option-filled-giant-padding-start:
+ * select-hero-left-background-color:
+ * select-hero-right-background-color:
+ * select-hero-border-color:
+ * select-hero-border-style:
+ * select-hero-border-width:
+ * select-hero-text-color:
+ * select-hero-placeholder-text-color:
+ * select-hero-focus-left-background-color:
+ * select-hero-focus-right-background-color:
+ * select-hero-hover-left-background-color:
+ * select-hero-hover-right-background-color:
+ * select-hero-disabled-left-background-color:
+ * select-hero-disabled-right-background-color:
+ * select-hero-disabled-text-color:
+ * select-hero-tiny-padding:
+ * select-hero-small-padding:
+ * select-hero-medium-padding:
+ * select-hero-large-padding:
+ * select-hero-giant-padding:
+ * select-hero-primary-left-background-color:
+ * select-hero-primary-right-background-color:
+ * select-hero-primary-text-color:
+ * select-hero-primary-placeholder-text-color:
+ * select-hero-primary-focus-left-background-color:
+ * select-hero-primary-focus-right-background-color:
+ * select-hero-primary-hover-left-background-color:
+ * select-hero-primary-hover-right-background-color:
+ * select-hero-primary-disabled-left-background-color:
+ * select-hero-primary-disabled-right-background-color:
+ * select-hero-primary-disabled-text-color:
+ * select-hero-success-left-background-color:
+ * select-hero-success-right-background-color:
+ * select-hero-success-text-color:
+ * select-hero-success-placeholder-text-color:
+ * select-hero-success-focus-left-background-color:
+ * select-hero-success-focus-right-background-color:
+ * select-hero-success-hover-left-background-color:
+ * select-hero-success-hover-right-background-color:
+ * select-hero-success-disabled-left-background-color:
+ * select-hero-success-disabled-right-background-color:
+ * select-hero-success-disabled-text-color:
+ * select-hero-info-left-background-color:
+ * select-hero-info-right-background-color:
+ * select-hero-info-text-color:
+ * select-hero-info-placeholder-text-color:
+ * select-hero-info-focus-left-background-color:
+ * select-hero-info-focus-right-background-color:
+ * select-hero-info-hover-left-background-color:
+ * select-hero-info-hover-right-background-color:
+ * select-hero-info-disabled-left-background-color:
+ * select-hero-info-disabled-right-background-color:
+ * select-hero-info-disabled-text-color:
+ * select-hero-warning-left-background-color:
+ * select-hero-warning-right-background-color:
+ * select-hero-warning-text-color:
+ * select-hero-warning-placeholder-text-color:
+ * select-hero-warning-focus-left-background-color:
+ * select-hero-warning-focus-right-background-color:
+ * select-hero-warning-hover-left-background-color:
+ * select-hero-warning-hover-right-background-color:
+ * select-hero-warning-disabled-left-background-color:
+ * select-hero-warning-disabled-right-background-color:
+ * select-hero-warning-disabled-text-color:
+ * select-hero-danger-left-background-color:
+ * select-hero-danger-right-background-color:
+ * select-hero-danger-text-color:
+ * select-hero-danger-placeholder-text-color:
+ * select-hero-danger-focus-left-background-color:
+ * select-hero-danger-focus-right-background-color:
+ * select-hero-danger-hover-left-background-color:
+ * select-hero-danger-hover-right-background-color:
+ * select-hero-danger-disabled-left-background-color:
+ * select-hero-danger-disabled-right-background-color:
+ * select-hero-danger-disabled-text-color:
+ * select-option-hero-tiny-padding:
+ * select-group-option-hero-tiny-padding-start:
+ * select-option-hero-small-padding:
+ * select-group-option-hero-small-padding-start:
+ * select-option-hero-medium-padding:
+ * select-group-option-hero-medium-padding-start:
+ * select-option-hero-large-padding:
+ * select-group-option-hero-large-padding-start:
+ * select-option-hero-giant-padding:
+ * select-group-option-hero-giant-padding-start:
  * */
 @Component({
   selector: 'nb-select',
@@ -158,66 +389,127 @@ export class NbSelectLabelComponent {
 export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContentInit, OnDestroy, ControlValueAccessor {
   /**
    * Select size, available sizes:
-   * `xxsmall`, `xsmall`, `small`, `medium`, `large`
+   * `tiny`, `small`, `medium` (default), `large`, `giant`
    */
-  @Input() size: string;
+  @Input() size: NbComponentSize = 'medium';
 
   /**
    * Select status (adds specific styles):
    * `primary`, `info`, `success`, `warning`, `danger`
    */
-  @Input() status: string = 'primary';
+  @Input() status: '' | NbComponentStatus = '';
 
   /**
-   * Select shapes: `rectangle`, `round`, `semi-round`
+   * Select shapes: `rectangle` (default), `round`, `semi-round`
    */
-  @Input() shape: string;
+  @Input() shape: NbComponentShape = 'rectangle';
 
   /**
-   * Adds `hero` styles
+   * Select appearances: `outline` (default), `filled`, `hero`
    */
-  @Input() hero: boolean;
+  @Input() appearance: NbSelectAppearance = 'outline';
 
   /**
-   * Disables the select
+   * Adds `outline` styles
    */
-  @Input() disabled: boolean;
+  @Input()
+  @HostBinding('class.appearance-outline')
+  get outline(): boolean {
+    return this.appearance === 'outline';
+  }
+  set outline(value: boolean) {
+    if (convertToBoolProperty(value)) {
+      this.appearance = 'outline';
+    }
+  }
 
   /**
-   * If set element will fill its container
+   * Adds `filled` styles
    */
-  @Input() fullWidth: boolean;
+  @Input()
+  @HostBinding('class.appearance-filled')
+  get filled(): boolean {
+    return this.appearance === 'filled';
+  }
+  set filled(value: boolean) {
+    if (convertToBoolProperty(value)) {
+      this.appearance = 'filled';
+    }
+  }
 
   /**
-   * Adds `outline` styles
+   * Adds `hero` styles
    */
-  @Input() outline: boolean;
+  @Input()
+  @HostBinding('class.appearance-hero')
+  get hero(): boolean {
+    return this.appearance === 'hero';
+  }
+  set hero(value: boolean) {
+    if (convertToBoolProperty(value)) {
+      this.appearance = 'hero';
+    }
+  }
 
   /**
-   * Renders select placeholder if nothing selected.
-   * */
-  @Input() placeholder: string = '';
+   * Disables the select
+   */
+  @Input()
+  get disabled(): boolean {
+    return !!this._disabled;
+  }
+  set disabled(value: boolean) {
+    this._disabled = convertToBoolProperty(value);
+  }
+  protected _disabled: boolean;
 
   /**
-   * Will be emitted when selected value changes.
+   * If set element will fill its container
+   */
+  @Input()
+  @HostBinding('class.full-width')
+  get fullWidth(): boolean {
+    return this._fullWidth;
+  }
+  set fullWidth(value: boolean) {
+    this._fullWidth = convertToBoolProperty(value);
+  }
+  protected _fullWidth: boolean = false;
+
+  /**
+   * Renders select placeholder if nothing selected.
    * */
-  @Output() selectedChange: EventEmitter<T | T[]> = new EventEmitter();
+  @Input() placeholder: string = '';
 
   /**
    * Accepts selected item or array of selected items.
    * */
-  @Input('selected')
-  set setSelected(value: T | T[]) {
+  @Input()
+  set selected(value: T | T[]) {
     this.writeValue(value);
   }
+  get selected(): T | T[] {
+    return this.multiple
+      ? this.selectionModel.map(o => o.value)
+      : this.selectionModel[0].value;
+  }
 
   /**
    * Gives capability just write `multiple` over the element.
    * */
-  @Input('multiple')
-  set setMultiple(multiple: boolean) {
-    this.multiple = convertToBoolProperty(multiple);
+  @Input()
+  get multiple(): boolean {
+    return this._multiple;
+  }
+  set multiple(value: boolean) {
+    this._multiple = convertToBoolProperty(value);
   }
+  protected _multiple: boolean = false;
+
+  /**
+   * Will be emitted when selected value changes.
+   * */
+  @Output() selectedChange: EventEmitter<T | T[]> = new EventEmitter();
 
   /**
    * List of `NbOptionComponent`'s components passed as content.
@@ -235,9 +527,15 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
    * */
   @ViewChild(NbPortalDirective) portal: NbPortalDirective;
 
-  @ViewChild(NbButtonComponent, { read: ElementRef }) button: ElementRef<HTMLButtonElement>;
+  @ViewChild('selectButton', { read: ElementRef }) button: ElementRef<HTMLButtonElement>;
 
-  multiple: boolean = false;
+  /**
+   * Determines is select opened.
+   * */
+  @HostBinding('class.open')
+  get isOpen(): boolean {
+    return this.ref && this.ref.hasAttached();
+  }
 
   /**
    * List of selected options.
@@ -288,18 +586,11 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
               protected cd: ChangeDetectorRef) {
   }
 
-  /**
-   * Determines is select opened.
-   * */
-  get isOpened(): boolean {
-    return this.ref && this.ref.hasAttached();
-  }
-
   /**
    * Determines is select hidden.
    * */
   get isHidden(): boolean {
-    return !this.isOpened;
+    return !this.isOpen;
   }
 
   /**
@@ -309,6 +600,29 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
     return this.hostRef.nativeElement.getBoundingClientRect().width;
   }
 
+  get selectButtonClasses(): string[] {
+    const classes = [];
+
+    if (!this.selectionModel.length) {
+      classes.push('placeholder')
+    }
+    if (this.isOpen) {
+      classes.push(this.overlayPosition);
+    }
+
+    return classes;
+  }
+
+  get optionsListClasses(): string[] {
+    return [
+      `appearance-${this.appearance}`,
+      `size-${this.size}`,
+      `shape-${this.shape}`,
+      `status-${this.status}`,
+      this.overlayPosition,
+    ];
+  }
+
   /**
    * Content rendered in the label.
    * */
@@ -364,7 +678,7 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
   }
 
   hide() {
-    if (this.isOpened) {
+    if (this.isOpen) {
       this.ref.detach();
       this.cd.markForCheck();
     }
@@ -600,4 +914,57 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
   protected isClickedWithinComponent($event: Event) {
     return this.hostRef.nativeElement === $event.target || this.hostRef.nativeElement.contains($event.target as Node);
   }
+
+  @HostBinding('class.size-tiny')
+  get tiny(): boolean {
+    return this.size === 'tiny';
+  }
+  @HostBinding('class.size-small')
+  get small(): boolean {
+    return this.size === 'small';
+  }
+  @HostBinding('class.size-medium')
+  get medium(): boolean {
+    return this.size === 'medium';
+  }
+  @HostBinding('class.size-large')
+  get large(): boolean {
+    return this.size === 'large';
+  }
+  @HostBinding('class.size-giant')
+  get giant(): boolean {
+    return this.size === 'giant';
+  }
+  @HostBinding('class.status-primary')
+  get primary(): boolean {
+    return this.status === 'primary';
+  }
+  @HostBinding('class.status-info')
+  get info(): boolean {
+    return this.status === 'info';
+  }
+  @HostBinding('class.status-success')
+  get success(): boolean {
+    return this.status === 'success';
+  }
+  @HostBinding('class.status-warning')
+  get warning(): boolean {
+    return this.status === 'warning';
+  }
+  @HostBinding('class.status-danger')
+  get danger(): boolean {
+    return this.status === 'danger';
+  }
+  @HostBinding('class.shape-rectangle')
+  get rectangle(): boolean {
+    return this.shape === 'rectangle';
+  }
+  @HostBinding('class.shape-round')
+  get round(): boolean {
+    return this.shape === 'round';
+  }
+  @HostBinding('class.shape-semi-round')
+  get semiRound(): boolean {
+    return this.shape === 'semi-round';
+  }
 }
diff --git a/src/framework/theme/components/select/select.module.ts b/src/framework/theme/components/select/select.module.ts
index 21cacbe794..0a36f94442 100644
--- a/src/framework/theme/components/select/select.module.ts
+++ b/src/framework/theme/components/select/select.module.ts
@@ -9,7 +9,7 @@ import { NbButtonModule } from '../button/button.module';
 import { NbSelectComponent, NbSelectLabelComponent } from './select.component';
 import { NbOptionComponent } from './option.component';
 import { NbOptionGroupComponent } from './option-group.component';
-
+import { NbIconModule } from '../icon/icon.module';
 
 const NB_SELECT_COMPONENTS = [
   NbSelectComponent,
@@ -19,7 +19,15 @@ const NB_SELECT_COMPONENTS = [
 ];
 
 @NgModule({
-  imports: [NbSharedModule, NbOverlayModule, NbButtonModule, NbInputModule, NbCardModule, NbCheckboxModule],
+  imports: [
+    NbSharedModule,
+    NbOverlayModule,
+    NbButtonModule,
+    NbInputModule,
+    NbCardModule,
+    NbCheckboxModule,
+    NbIconModule,
+  ],
   exports: [...NB_SELECT_COMPONENTS],
   declarations: [...NB_SELECT_COMPONENTS],
 })
diff --git a/src/framework/theme/components/select/select.spec.ts b/src/framework/theme/components/select/select.spec.ts
index 3c09ce6ac0..f912f238b2 100644
--- a/src/framework/theme/components/select/select.spec.ts
+++ b/src/framework/theme/components/select/select.spec.ts
@@ -7,6 +7,7 @@
 import { Component, ElementRef, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { from, zip } from 'rxjs';
 import createSpy = jasmine.createSpy;
@@ -553,7 +554,7 @@ describe('NbSelectComponent - falsy values', () => {
   }));
 
   it('should clean selection when selected option does not have a value', fakeAsync(() => {
-    select.setSelected = testComponent.truthyOption.value;
+    select.selected = testComponent.truthyOption.value;
     fixture.detectChanges();
 
     testComponent.noValueOption.onClick();
@@ -563,7 +564,7 @@ describe('NbSelectComponent - falsy values', () => {
   }));
 
   it('should clean selection when selected option has null value', fakeAsync(() => {
-    select.setSelected = testComponent.truthyOption.value;
+    select.selected = testComponent.truthyOption.value;
     fixture.detectChanges();
 
     testComponent.nullOption.onClick();
@@ -573,7 +574,7 @@ describe('NbSelectComponent - falsy values', () => {
   }));
 
   it('should clean selection when selected option has undefined value', fakeAsync(() => {
-    select.setSelected = testComponent.truthyOption.value;
+    select.selected = testComponent.truthyOption.value;
     fixture.detectChanges();
 
     testComponent.undefinedOption.onClick();
@@ -583,7 +584,7 @@ describe('NbSelectComponent - falsy values', () => {
   }));
 
   it('should not reset selection when selected option has false value', fakeAsync(() => {
-    select.setSelected = testComponent.truthyOption.value;
+    select.selected = testComponent.truthyOption.value;
     fixture.detectChanges();
 
     testComponent.falseOption.onClick();
@@ -593,7 +594,7 @@ describe('NbSelectComponent - falsy values', () => {
   }));
 
   it('should not reset selection when selected option has zero value', fakeAsync(() => {
-    select.setSelected = testComponent.truthyOption.value;
+    select.selected = testComponent.truthyOption.value;
     fixture.detectChanges();
 
     testComponent.zeroOption.onClick();
@@ -603,7 +604,7 @@ describe('NbSelectComponent - falsy values', () => {
   }));
 
   it('should not reset selection when selected option has empty string value', fakeAsync(() => {
-    select.setSelected = testComponent.truthyOption.value;
+    select.selected = testComponent.truthyOption.value;
     fixture.detectChanges();
 
     testComponent.emptyStringOption.onClick();
@@ -613,7 +614,7 @@ describe('NbSelectComponent - falsy values', () => {
   }));
 
   it('should not reset selection when selected option has NaN value', fakeAsync(() => {
-    select.setSelected = testComponent.truthyOption.value;
+    select.selected = testComponent.truthyOption.value;
     fixture.detectChanges();
 
     testComponent.nanOption.onClick();
@@ -622,6 +623,14 @@ describe('NbSelectComponent - falsy values', () => {
     expect(select.selectionModel.length).toEqual(1);
   }));
 
+  it('should set class if fullWidth input set to true', () => {
+    select.fullWidth = true;
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.directive(NbSelectComponent));
+    expect(button.classes['full-width']).toEqual(true);
+  });
+
   describe('multiple', () => {
     beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(NbMultipleSelectWithFalsyOptionValuesComponent);
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index 2cb17b38bf..4ff90f74ba 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -1430,16 +1430,282 @@ $theme: (
   tooltip-danger-text-color: text-light-color,
   tooltip-shadow: none,
 
-  select-border-width: 2px,
-  select-max-height: 20rem,
-  select-bg: color-bg,
-
-  select-checkbox-color: input-border-color,
-  select-checkmark-color: input-border-color,
-
-  select-option-disabled-bg: #f2f4f7,
-  select-option-disabled-opacity: 0.3,
-  select-option-padding: 0.75rem 1.5rem,
+  select-cursor: pointer,
+  select-disabled-cursor: default,
+  select-min-width: 13rem,
+  select-options-list-max-height: 20rem,
+  select-outline-width: outline-width,
+  select-outline-color: outline-color,
+
+  select-text-font-family: text-subtitle-font-family,
+  select-text-font-weight: text-subtitle-font-weight,
+  select-placeholder-text-font-weight: text-paragraph-font-weight,
+
+  select-option-background-color: color-white,
+  select-option-text-color: text-dark-color,
+  select-option-selected-background-color: color-white,
+  select-option-selected-text-color: text-primary-color,
+  select-option-focus-background-color: color-white,
+  select-option-focus-text-color: text-primary-focus-color,
+  select-option-hover-background-color: color-white,
+  select-option-hover-text-color: text-primary-hover-color,
+  select-option-disabled-background-color: color-white,
+  select-option-disabled-text-color: text-disabled-color,
+
+  select-tiny-text-font-size: text-button-tiny-font-size,
+  select-tiny-text-line-height: text-button-tiny-line-height,
+  select-small-text-font-size: text-button-small-font-size,
+  select-small-text-line-height: text-button-small-line-height,
+  select-medium-text-font-size: text-subtitle-2-font-size,
+  select-medium-text-line-height: text-subtitle-2-line-height,
+  select-large-text-font-size: text-button-large-font-size,
+  select-large-text-line-height: text-button-large-line-height,
+  select-giant-text-font-size: text-button-giant-font-size,
+  select-giant-text-line-height: text-button-giant-line-height,
+
+  select-rectangle-border-radius: 0.25rem,
+  select-semi-round-border-radius: 0.75rem,
+  select-round-border-radius: 1.5rem,
+
+  select-outline-background-color: color-basic-100,
+  select-outline-border-color: color-basic-100,
+  select-outline-border-style: solid,
+  select-outline-border-width: 0.125rem,
+  select-outline-text-color: text-dark-color,
+  select-outline-placeholder-text-color: color-basic-600,
+
+  select-outline-focus-border-color: color-primary-focus,
+  select-outline-hover-border-color: color-primary-hover,
+  select-outline-disabled-border-color: color-basic-disabled,
+  select-outline-disabled-background-color: color-basic-disabled,
+  select-outline-disabled-text-color: text-disabled-color,
+
+  select-outline-tiny-padding: 0.25rem 0.625rem,
+  select-outline-small-padding: 0.375rem 0.875rem,
+  select-outline-medium-padding: 0.625rem 1.125rem,
+  select-outline-large-padding: 0.75rem 1.125rem,
+  select-outline-giant-padding: 0.875rem 1.375rem,
+
+  select-outline-primary-border-color: color-primary,
+  select-outline-primary-focus-border-color: color-primary-focus,
+  select-outline-primary-hover-border-color: color-primary-hover,
+
+  select-outline-success-border-color: color-success,
+  select-outline-success-focus-border-color: color-success-focus,
+  select-outline-success-hover-border-color: color-success-hover,
+
+  select-outline-info-border-color: color-info,
+  select-outline-info-focus-border-color: color-info-focus,
+  select-outline-info-hover-border-color: color-info-hover,
+
+  select-outline-warning-border-color: color-warning,
+  select-outline-warning-focus-border-color: color-warning-focus,
+  select-outline-warning-hover-border-color: color-warning-hover,
+
+  select-outline-danger-border-color: color-danger,
+  select-outline-danger-focus-border-color: color-danger-focus,
+  select-outline-danger-hover-border-color: color-danger-hover,
+
+  select-option-outline-tiny-padding: select-outline-tiny-padding,
+  select-option-outline-small-padding: select-outline-small-padding,
+  select-option-outline-medium-padding: select-outline-medium-padding,
+  select-option-outline-large-padding: select-outline-large-padding,
+  select-option-outline-giant-padding: select-outline-giant-padding,
+
+  select-group-option-outline-tiny-start-padding: 1.25rem,
+  select-group-option-outline-small-start-padding: 1.75rem,
+  select-group-option-outline-medium-start-padding: 2.25rem,
+  select-group-option-outline-large-start-padding: 2.25rem,
+  select-group-option-outline-giant-start-padding: 2.75rem,
+
+  select-filled-background-color: color-basic-100,
+  select-filled-border-color: color-basic-100,
+  select-filled-border-style: solid,
+  select-filled-border-width: 0.125rem,
+  select-filled-text-color: text-dark-color,
+  select-filled-placeholder-text-color: text-dark-color,
+
+  select-filled-focus-border-color: color-basic-focus,
+  select-filled-hover-background-color: color-basic-hover,
+  select-filled-hover-border-color: color-basic-hover,
+  select-filled-disabled-background-color: color-basic-disabled,
+  select-filled-disabled-border-color: color-basic-disabled,
+  select-filled-disabled-text-color: text-disabled-color,
+
+  select-filled-tiny-padding: 0.25rem 0.625rem,
+  select-filled-small-padding: 0.375rem 0.875rem,
+  select-filled-medium-padding: 0.625rem 1.125rem,
+  select-filled-large-padding: 0.75rem 1.125rem,
+  select-filled-giant-padding: 0.875rem 1.375rem,
+
+  select-filled-primary-background-color: color-primary,
+  select-filled-primary-border-color: color-primary,
+  select-filled-primary-text-color: text-light-color,
+  select-filled-primary-placeholder-text-color: text-light-color,
+
+  select-filled-primary-focus-background-color: color-primary-focus,
+  select-filled-primary-focus-border-color: color-primary-focus,
+  select-filled-primary-hover-background-color: color-primary-hover,
+  select-filled-primary-hover-border-color: color-primary-hover,
+  select-filled-primary-disabled-background-color: color-primary-disabled,
+  select-filled-primary-disabled-border-color: color-primary-disabled,
+
+  select-filled-success-background-color: color-success,
+  select-filled-success-border-color: color-success,
+  select-filled-success-text-color: text-light-color,
+  select-filled-success-placeholder-text-color: text-light-color,
+
+  select-filled-success-focus-background-color: color-success-focus,
+  select-filled-success-focus-border-color: color-success-focus,
+  select-filled-success-hover-background-color: color-success-hover,
+  select-filled-success-hover-border-color: color-success-hover,
+  select-filled-success-disabled-background-color: color-success-disabled,
+  select-filled-success-disabled-border-color: color-success-disabled,
+
+  select-filled-info-background-color: color-info,
+  select-filled-info-border-color: color-info,
+  select-filled-info-text-color: text-light-color,
+  select-filled-info-placeholder-text-color: text-light-color,
+
+  select-filled-info-focus-background-color: color-info-focus,
+  select-filled-info-focus-border-color: color-info-focus,
+  select-filled-info-hover-background-color: color-info-hover,
+  select-filled-info-hover-border-color: color-info-hover,
+  select-filled-info-disabled-background-color: color-info-disabled,
+  select-filled-info-disabled-border-color: color-info-disabled,
+
+  select-filled-warning-background-color: color-warning,
+  select-filled-warning-border-color: color-warning,
+  select-filled-warning-text-color: text-light-color,
+  select-filled-warning-placeholder-text-color: text-light-color,
+
+  select-filled-warning-focus-background-color: color-warning-focus,
+  select-filled-warning-focus-border-color: color-warning-focus,
+  select-filled-warning-hover-background-color: color-warning-hover,
+  select-filled-warning-hover-border-color: color-warning-hover,
+  select-filled-warning-disabled-background-color: color-warning-disabled,
+  select-filled-warning-disabled-border-color: color-warning-disabled,
+
+  select-filled-danger-background-color: color-danger,
+  select-filled-danger-border-color: color-danger,
+  select-filled-danger-text-color: text-light-color,
+  select-filled-danger-placeholder-text-color: text-light-color,
+
+  select-filled-danger-focus-background-color: color-danger-focus,
+  select-filled-danger-focus-border-color: color-danger-focus,
+  select-filled-danger-hover-background-color: color-danger-hover,
+  select-filled-danger-hover-border-color: color-danger-hover,
+  select-filled-danger-disabled-background-color: color-danger-disabled,
+  select-filled-danger-disabled-border-color: color-danger-disabled,
+
+  select-option-filled-tiny-padding: select-filled-tiny-padding,
+  select-group-option-filled-tiny-padding-start: 1.125rem,
+  select-option-filled-small-padding: select-filled-small-padding,
+  select-group-option-filled-small-padding-start: 1.75rem,
+  select-option-filled-medium-padding: select-filled-medium-padding,
+  select-group-option-filled-medium-padding-start: 2.25rem,
+  select-option-filled-large-padding: select-filled-large-padding,
+  select-group-option-filled-large-padding-start: 2.25rem,
+  select-option-filled-giant-padding: select-filled-giant-padding,
+  select-group-option-filled-giant-padding-start: 2.75rem,
+
+  select-hero-left-background-color: color-basic-400,
+  select-hero-right-background-color: color-basic,
+  select-hero-border-color: transparent,
+  select-hero-border-style: solid,
+  select-hero-border-width: 0,
+  select-hero-text-color: text-dark-color,
+  select-hero-placeholder-text-color: text-dark-color,
+
+  select-hero-focus-left-background-color: color-basic-700,
+  select-hero-focus-right-background-color: color-basic-800,
+  select-hero-hover-left-background-color: color-basic-300,
+  select-hero-hover-right-background-color: color-basic-400,
+  select-hero-disabled-left-background-color: color-basic-100,
+  select-hero-disabled-right-background-color: color-basic-200,
+  select-hero-disabled-text-color: text-disabled-color,
+
+  select-hero-tiny-padding: 0.375rem 0.625rem,
+  select-hero-small-padding: 0.5rem 0.875rem,
+  select-hero-medium-padding: 0.75rem 1.125rem,
+  select-hero-large-padding: 0.875rem 1.125rem,
+  select-hero-giant-padding: 1rem 1.375rem,
+
+  select-hero-primary-left-background-color: color-primary-400,
+  select-hero-primary-right-background-color: color-primary,
+  select-hero-primary-text-color: text-light-color,
+  select-hero-primary-placeholder-text-color: text-light-color,
+
+  select-hero-primary-focus-left-background-color: color-primary-700,
+  select-hero-primary-focus-right-background-color: color-primary-800,
+  select-hero-primary-hover-left-background-color: color-primary-300,
+  select-hero-primary-hover-right-background-color: color-primary-400,
+  select-hero-primary-disabled-left-background-color: color-primary-100,
+  select-hero-primary-disabled-right-background-color: color-primary-200,
+  select-hero-primary-disabled-text-color: text-disabled-color,
+
+  select-hero-success-left-background-color: color-success-400,
+  select-hero-success-right-background-color: color-success,
+  select-hero-success-text-color: text-light-color,
+  select-hero-success-placeholder-text-color: text-light-color,
+
+  select-hero-success-focus-left-background-color: color-success-700,
+  select-hero-success-focus-right-background-color: color-success-800,
+  select-hero-success-hover-left-background-color: color-success-300,
+  select-hero-success-hover-right-background-color: color-success-400,
+  select-hero-success-disabled-left-background-color: color-success-100,
+  select-hero-success-disabled-right-background-color: color-success-200,
+  select-hero-success-disabled-text-color: text-disabled-color,
+
+  select-hero-info-left-background-color: color-info-400,
+  select-hero-info-right-background-color: color-info,
+  select-hero-info-text-color: text-light-color,
+  select-hero-info-placeholder-text-color: text-light-color,
+
+  select-hero-info-focus-left-background-color: color-info-700,
+  select-hero-info-focus-right-background-color: color-info-800,
+  select-hero-info-hover-left-background-color: color-info-300,
+  select-hero-info-hover-right-background-color: color-info-400,
+  select-hero-info-disabled-left-background-color: color-info-100,
+  select-hero-info-disabled-right-background-color: color-info-200,
+  select-hero-info-disabled-text-color: text-disabled-color,
+
+  select-hero-warning-left-background-color: color-warning-400,
+  select-hero-warning-right-background-color: color-warning,
+  select-hero-warning-text-color: text-light-color,
+  select-hero-warning-placeholder-text-color: text-light-color,
+
+  select-hero-warning-focus-left-background-color: color-warning-700,
+  select-hero-warning-focus-right-background-color: color-warning-800,
+  select-hero-warning-hover-left-background-color: color-warning-300,
+  select-hero-warning-hover-right-background-color: color-warning-400,
+  select-hero-warning-disabled-left-background-color: color-warning-100,
+  select-hero-warning-disabled-right-background-color: color-warning-200,
+  select-hero-warning-disabled-text-color: text-disabled-color,
+
+  select-hero-danger-left-background-color: color-danger-400,
+  select-hero-danger-right-background-color: color-danger,
+  select-hero-danger-text-color: text-light-color,
+  select-hero-danger-placeholder-text-color: text-light-color,
+
+  select-hero-danger-focus-left-background-color: color-danger-700,
+  select-hero-danger-focus-right-background-color: color-danger-800,
+  select-hero-danger-hover-left-background-color: color-danger-300,
+  select-hero-danger-hover-right-background-color: color-danger-400,
+  select-hero-danger-disabled-left-background-color: color-danger-100,
+  select-hero-danger-disabled-right-background-color: color-danger-200,
+  select-hero-danger-disabled-text-color: text-disabled-color,
+
+  select-option-hero-tiny-padding: select-hero-tiny-padding,
+  select-group-option-hero-tiny-padding-start: 1.125rem,
+  select-option-hero-small-padding: select-hero-small-padding,
+  select-group-option-hero-small-padding-start: 1.75rem,
+  select-option-hero-medium-padding: select-hero-medium-padding,
+  select-group-option-hero-medium-padding-start: 2.25rem,
+  select-option-hero-large-padding: select-hero-large-padding,
+  select-group-option-hero-large-padding-start: 2.25rem,
+  select-option-hero-giant-padding: select-hero-giant-padding,
+  select-group-option-hero-giant-padding-start: 2.75rem,
 
   datepicker-text-color: text-dark-color,
   datepicker-background-color: color-white,
diff --git a/src/playground/with-layout/select/select-clean.component.html b/src/playground/with-layout/select/select-clean.component.html
index ee3656b6dc..a870439c1c 100644
--- a/src/playground/with-layout/select/select-clean.component.html
+++ b/src/playground/with-layout/select/select-clean.component.html
@@ -1,10 +1,14 @@
-<nb-select placeholder="Cleanable">
-  <nb-option>Clean with option without value</nb-option>
-  <nb-option [value]="null">Clean with null value</nb-option>
-  <nb-option [value]="undefined">Clean with null value</nb-option>
-  <nb-option [value]="0">Option 0</nb-option>
-  <nb-option [value]="1">Option 1</nb-option>
-  <nb-option [value]="2">Option 2</nb-option>
-  <nb-option [value]="3">Option 3</nb-option>
-  <nb-option [value]="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="small">
+  <nb-card-body>
+    <nb-select placeholder="Cleanable">
+      <nb-option>Clean with option without value</nb-option>
+      <nb-option [value]="null">Clean with null value</nb-option>
+      <nb-option [value]="undefined">Clean with null value</nb-option>
+      <nb-option [value]="0">Option 0</nb-option>
+      <nb-option [value]="1">Option 1</nb-option>
+      <nb-option [value]="2">Option 2</nb-option>
+      <nb-option [value]="3">Option 3</nb-option>
+      <nb-option [value]="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-clean.component.ts b/src/playground/with-layout/select/select-clean.component.ts
index 97f70f3ff8..f71b2f0d56 100644
--- a/src/playground/with-layout/select/select-clean.component.ts
+++ b/src/playground/with-layout/select/select-clean.component.ts
@@ -9,17 +9,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-clean',
   templateUrl: './select-clean.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 20rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectCleanComponent {}
diff --git a/src/playground/with-layout/select/select-disabled.component.html b/src/playground/with-layout/select/select-disabled.component.html
index a5d0776994..485a7e00fd 100644
--- a/src/playground/with-layout/select/select-disabled.component.html
+++ b/src/playground/with-layout/select/select-disabled.component.html
@@ -1,38 +1,31 @@
-<nb-select disabled placeholder="Disabled">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="medium">
+  <nb-card-body>
+    <nb-select disabled placeholder="Disabled">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Disabled Items">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2" disabled>Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4" disabled>Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Disabled option">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2" disabled>Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4" disabled>Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Disabled Groups">
+    <nb-select placeholder="Disabled Groups">
 
-  <nb-option-group title="Group 1">
-    <nb-option value="1">Option 1</nb-option>
-    <nb-option value="2" disabled>Option 2</nb-option>
-    <nb-option value="3">Option 3</nb-option>
-    <nb-option value="4">Option 4</nb-option>
-  </nb-option-group>
+      <nb-option-group title="Group 1">
+        <nb-option value="1">Option 1</nb-option>
+        <nb-option value="2" disabled>Option 2</nb-option>
+      </nb-option-group>
 
-  <nb-option-group title="Group 2" disabled>
-    <nb-option value="21">Option 21</nb-option>
-    <nb-option value="22">Option 22</nb-option>
-    <nb-option value="23">Option 23</nb-option>
-    <nb-option value="24">Option 24</nb-option>
-  </nb-option-group>
+      <nb-option-group title="Disabled group" disabled>
+        <nb-option value="21">Option 21</nb-option>
+        <nb-option value="22">Option 22</nb-option>
+      </nb-option-group>
 
-  <nb-option-group title="Group 3">
-    <nb-option value="31">Option 31</nb-option>
-    <nb-option value="32">Option 32</nb-option>
-    <nb-option value="33">Option 33</nb-option>
-    <nb-option value="34">Option 34</nb-option>
-  </nb-option-group>
-
-</nb-select>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-disabled.component.ts b/src/playground/with-layout/select/select-disabled.component.ts
index a4d5a8aa32..d52b484e80 100644
--- a/src/playground/with-layout/select/select-disabled.component.ts
+++ b/src/playground/with-layout/select/select-disabled.component.ts
@@ -9,18 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-disabled',
   templateUrl: './select-disabled.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 35rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectDisabledComponent {
 }
diff --git a/src/playground/with-layout/select/select-example.scss b/src/playground/with-layout/select/select-example.scss
new file mode 100644
index 0000000000..71e54ec6e4
--- /dev/null
+++ b/src/playground/with-layout/select/select-example.scss
@@ -0,0 +1,9 @@
+nb-card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+nb-select:not(:only-child):not(:last-child) {
+  margin-bottom: 1rem;
+}
diff --git a/src/playground/with-layout/select/select-filled.component.html b/src/playground/with-layout/select/select-filled.component.html
new file mode 100644
index 0000000000..87d8e5995b
--- /dev/null
+++ b/src/playground/with-layout/select/select-filled.component.html
@@ -0,0 +1,38 @@
+<nb-card size="medium">
+  <nb-card-body>
+    <nb-select placeholder="Primary" filled status="primary">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+
+    <nb-select placeholder="Info" filled status="info">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+
+    <nb-select placeholder="Danger" filled status="danger">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+
+    <nb-select placeholder="Success" filled status="success">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+
+    <nb-select placeholder="Warning" filled status="warning">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-filled.component.ts b/src/playground/with-layout/select/select-filled.component.ts
new file mode 100644
index 0000000000..693f185127
--- /dev/null
+++ b/src/playground/with-layout/select/select-filled.component.ts
@@ -0,0 +1,15 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-select-filled',
+  templateUrl: './select-filled.component.html',
+  styleUrls: ['./select-example.scss'],
+})
+export class SelectFilledComponent {
+}
diff --git a/src/playground/with-layout/select/select-form.component.html b/src/playground/with-layout/select/select-form.component.html
index 7153f22fb0..7af97b0d26 100644
--- a/src/playground/with-layout/select/select-form.component.html
+++ b/src/playground/with-layout/select/select-form.component.html
@@ -1,13 +1,17 @@
-<nb-select placeholder="NgModel" [(ngModel)]="selectedItemNgModel">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="small">
+  <nb-card-body>
+    <nb-select placeholder="NgModel" [(ngModel)]="selectedItemNgModel">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Form control" [formControl]="selectedItemFormControl">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Form control" [formControl]="selectedItemFormControl">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-form.component.ts b/src/playground/with-layout/select/select-form.component.ts
index b25bafbc1c..3f9c022bf9 100644
--- a/src/playground/with-layout/select/select-form.component.ts
+++ b/src/playground/with-layout/select/select-form.component.ts
@@ -10,18 +10,7 @@ import { FormControl } from '@angular/forms';
 @Component({
   selector: 'nb-select-form',
   templateUrl: './select-form.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 20rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectFormComponent {
   selectedItemNgModel;
diff --git a/src/playground/with-layout/select/select-groups.component.html b/src/playground/with-layout/select/select-groups.component.html
index ec29b8250c..7f2f67b86a 100644
--- a/src/playground/with-layout/select/select-groups.component.html
+++ b/src/playground/with-layout/select/select-groups.component.html
@@ -1,24 +1,28 @@
-<nb-select placeholder="Select Groups">
+<nb-card size="medium">
+  <nb-card-body>
+    <nb-select placeholder="Select Groups">
 
-  <nb-option-group title="Group 1">
-    <nb-option value="1">Option 1</nb-option>
-    <nb-option value="2">Option 2</nb-option>
-    <nb-option value="3">Option 3</nb-option>
-    <nb-option value="4">Option 4</nb-option>
-  </nb-option-group>
+      <nb-option-group title="Group 1">
+        <nb-option value="1">Option 1</nb-option>
+        <nb-option value="2">Option 2</nb-option>
+        <nb-option value="3">Option 3</nb-option>
+        <nb-option value="4">Option 4</nb-option>
+      </nb-option-group>
 
-  <nb-option-group title="Group 2">
-    <nb-option value="21">Option 21</nb-option>
-    <nb-option value="22">Option 22</nb-option>
-    <nb-option value="23">Option 23</nb-option>
-    <nb-option value="24">Option 24</nb-option>
-  </nb-option-group>
+      <nb-option-group title="Group 2">
+        <nb-option value="21">Option 21</nb-option>
+        <nb-option value="22">Option 22</nb-option>
+        <nb-option value="23">Option 23</nb-option>
+        <nb-option value="24">Option 24</nb-option>
+      </nb-option-group>
 
-  <nb-option-group title="Group 3">
-    <nb-option value="31">Option 31</nb-option>
-    <nb-option value="32">Option 32</nb-option>
-    <nb-option value="33">Option 33</nb-option>
-    <nb-option value="34">Option 34</nb-option>
-  </nb-option-group>
+      <nb-option-group title="Group 3">
+        <nb-option value="31">Option 31</nb-option>
+        <nb-option value="32">Option 32</nb-option>
+        <nb-option value="33">Option 33</nb-option>
+        <nb-option value="34">Option 34</nb-option>
+      </nb-option-group>
 
-</nb-select>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-groups.component.ts b/src/playground/with-layout/select/select-groups.component.ts
index c1589f6126..4679c3fc5a 100644
--- a/src/playground/with-layout/select/select-groups.component.ts
+++ b/src/playground/with-layout/select/select-groups.component.ts
@@ -9,18 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-groups',
   templateUrl: './select-groups.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 25rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectGroupsComponent {
 }
diff --git a/src/playground/with-layout/select/select-hero.component.html b/src/playground/with-layout/select/select-hero.component.html
index 221c2a585f..834b90fa19 100644
--- a/src/playground/with-layout/select/select-hero.component.html
+++ b/src/playground/with-layout/select/select-hero.component.html
@@ -1,34 +1,38 @@
-<nb-select placeholder="Primary" hero status="primary">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="medium">
+  <nb-card-body>
+    <nb-select placeholder="Primary" hero status="primary">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Info" hero status="info">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Info" hero status="info">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Danger" hero status="danger">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Danger" hero status="danger">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Success" hero status="success">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Success" hero status="success">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Warning" hero status="warning">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Warning" hero status="warning">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-hero.component.ts b/src/playground/with-layout/select/select-hero.component.ts
index 6adb37ba38..71fe58e976 100644
--- a/src/playground/with-layout/select/select-hero.component.ts
+++ b/src/playground/with-layout/select/select-hero.component.ts
@@ -9,18 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-hero',
   templateUrl: './select-hero.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 35rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectHeroComponent {
 }
diff --git a/src/playground/with-layout/select/select-interactive.component.html b/src/playground/with-layout/select/select-interactive.component.html
new file mode 100644
index 0000000000..a71b01028f
--- /dev/null
+++ b/src/playground/with-layout/select/select-interactive.component.html
@@ -0,0 +1,88 @@
+<nb-card class="configuration">
+  <nb-card-body class="controls-container">
+    <fieldset>
+      <legend>Shape:</legend>
+      <nb-radio-group [(value)]="selectedShape" name="shape">
+        <nb-radio *ngFor="let shape of shapes" name="shape" [value]="shape">{{ shape }}</nb-radio>
+      </nb-radio-group>
+    </fieldset>
+
+    <fieldset>
+      <legend>Size:</legend>
+      <nb-radio-group [(value)]="selectedSize" name="size">
+        <nb-radio *ngFor="let size of sizes" name="size" [value]="size">{{ size }}</nb-radio>
+      </nb-radio-group>
+    </fieldset>
+
+    <button nbButton (click)="toggleFullWidth()">Set {{ this.fullWidth ? 'auto' : 'full' }} width</button>
+    <button nbButton (click)="selectDisabledOption()">Select disabled option</button>
+  </nb-card-body>
+</nb-card>
+
+<nb-card *ngFor="let appearance of appearances">
+  <nb-card-header class="appearance-name">{{ appearance }}</nb-card-header>
+  <nb-card-body class="select-column">
+    <nb-select placeholder="Select a value"
+               *ngFor="let status of statuses"
+               [(selected)]="singleSelectValue"
+               [appearance]="appearance"
+               [status]="status"
+               [size]="selectedSize"
+               [shape]="selectedShape"
+               [fullWidth]="fullWidth">
+      <nb-option>Reset value</nb-option>
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3" disabled>Option 3 (disabled)</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+      <nb-option-group title="Group">
+        <nb-option value="5">Option 5</nb-option>
+        <nb-option value="6">Option 6</nb-option>
+      </nb-option-group>
+      <nb-option-group disabled title="Disabled group">
+        <nb-option value="7">Option 7</nb-option>
+        <nb-option value="8">Option 8</nb-option>
+      </nb-option-group>
+    </nb-select>
+
+    <nb-select multiple
+               [(selected)]="multipleSelectValue"
+               [appearance]="appearance"
+               placeholder="Multiple
+               select"
+               [size]="selectedSize"
+               [shape]="selectedShape"
+               [fullWidth]="fullWidth">
+      <nb-option>Reset</nb-option>
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3" disabled>Option 3 (disabled)</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+      <nb-option-group title="Group">
+        <nb-option value="5">Option 5</nb-option>
+        <nb-option value="6">Option 6</nb-option>
+      </nb-option-group>
+      <nb-option-group disabled title="Disabled group">
+        <nb-option value="7">Option 7</nb-option>
+        <nb-option value="8">Option 8</nb-option>
+      </nb-option-group>
+    </nb-select>
+
+    <nb-select disabled
+               placeholder="Disabled select"
+               [appearance]="appearance"
+               [size]="selectedSize"
+               [shape]="selectedShape"
+               [fullWidth]="fullWidth">
+    </nb-select>
+
+    <nb-select selected="1"
+               disabled
+               [appearance]="appearance"
+               [size]="selectedSize"
+               [shape]="selectedShape"
+               [fullWidth]="fullWidth">
+      <nb-option value="1">Option 1</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-interactive.component.scss b/src/playground/with-layout/select/select-interactive.component.scss
new file mode 100644
index 0000000000..40bf4332c1
--- /dev/null
+++ b/src/playground/with-layout/select/select-interactive.component.scss
@@ -0,0 +1,52 @@
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -0.5rem;
+}
+
+nb-card {
+  flex: 1 0 auto;
+  margin: 0.5rem;
+
+  &.configuration {
+    flex: 1 0 100%;
+  }
+}
+
+.configuration .controls-container {
+  margin: 0 -0.5rem;
+
+  > * {
+    margin: 0 0.5rem;
+  }
+}
+
+fieldset {
+  border: 0;
+}
+
+nb-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.appearance-name {
+  text-transform: capitalize;
+}
+
+.select-column {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+nb-select {
+  margin: 0.5rem 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/playground/with-layout/select/select-interactive.component.ts b/src/playground/with-layout/select/select-interactive.component.ts
new file mode 100644
index 0000000000..d88fb23b53
--- /dev/null
+++ b/src/playground/with-layout/select/select-interactive.component.ts
@@ -0,0 +1,39 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
+import { NbSelectAppearance } from '@nebular/theme/components/select/select.component';
+
+@Component({
+  selector: 'nb-select-interactive',
+  templateUrl: './select-interactive.component.html',
+  styleUrls: ['./select-interactive.component.scss'],
+})
+export class SelectInteractiveComponent {
+  singleSelectValue = '1';
+  multipleSelectValue = [ '1' ];
+  disabledOptionValue = '3';
+
+  selectedSize: NbComponentSize = 'medium';
+  selectedShape: NbComponentShape = 'rectangle';
+
+  fullWidth: boolean = true;
+
+  appearances: NbSelectAppearance[] = [ 'outline', 'filled', 'hero' ];
+  sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
+  shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
+  statuses: ('' | NbComponentStatus)[] = [ '', 'primary', 'success', 'info', 'warning', 'danger' ];
+
+  selectDisabledOption(): void {
+    this.singleSelectValue = this.disabledOptionValue;
+    this.multipleSelectValue = [this.disabledOptionValue];
+  }
+
+  toggleFullWidth(): void {
+    this.fullWidth = !this.fullWidth;
+  }
+}
diff --git a/src/playground/with-layout/select/select-label.component.html b/src/playground/with-layout/select/select-label.component.html
index 64fe975f7c..409d757a98 100644
--- a/src/playground/with-layout/select/select-label.component.html
+++ b/src/playground/with-layout/select/select-label.component.html
@@ -1,10 +1,14 @@
-<nb-select placeholder="Custom label" [(selected)]="selectedItem">
-  <nb-select-label>
-    Selected: {{ selectedItem }}
-  </nb-select-label>
+<nb-card size="small">
+  <nb-card-body>
+    <nb-select placeholder="Custom label" [(selected)]="selectedItem">
+      <nb-select-label>
+        Selected: {{ selectedItem }}
+      </nb-select-label>
 
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-label.component.ts b/src/playground/with-layout/select/select-label.component.ts
index 311ff09029..20d326386a 100644
--- a/src/playground/with-layout/select/select-label.component.ts
+++ b/src/playground/with-layout/select/select-label.component.ts
@@ -9,18 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-label-showcase',
   templateUrl: './select-label.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 15rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectLabelShowcaseComponent {
   selectedItem;
diff --git a/src/playground/with-layout/select/select-multiple.component.html b/src/playground/with-layout/select/select-multiple.component.html
index 7f2966ab94..d203b12140 100644
--- a/src/playground/with-layout/select/select-multiple.component.html
+++ b/src/playground/with-layout/select/select-multiple.component.html
@@ -1,6 +1,10 @@
-<nb-select multiple placeholder="Multiple Select">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="small">
+  <nb-card-body>
+    <nb-select multiple placeholder="Multiple Select">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-multiple.component.ts b/src/playground/with-layout/select/select-multiple.component.ts
index e8af719fb5..427f44bee2 100644
--- a/src/playground/with-layout/select/select-multiple.component.ts
+++ b/src/playground/with-layout/select/select-multiple.component.ts
@@ -9,14 +9,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-multiple',
   templateUrl: './select-multiple.component.html',
-  styles: [`
-    :host {
-      display: block;
-      width: 15rem;
-      height: 20rem;
-    }
-  `],
 })
-
 export class SelectMultipleComponent {
 }
diff --git a/src/playground/with-layout/select/select-outline.component.html b/src/playground/with-layout/select/select-outline.component.html
deleted file mode 100644
index 4e1c67d755..0000000000
--- a/src/playground/with-layout/select/select-outline.component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<nb-select placeholder="Primary" outline status="primary">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
-
-<nb-select placeholder="Info" outline status="info">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
-
-<nb-select placeholder="Danger" outline status="danger">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
-
-<nb-select placeholder="Success" outline status="success">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
-
-<nb-select placeholder="Warning" outline status="warning">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
diff --git a/src/playground/with-layout/select/select-outline.component.ts b/src/playground/with-layout/select/select-outline.component.ts
deleted file mode 100644
index a116704de7..0000000000
--- a/src/playground/with-layout/select/select-outline.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'nb-select-outline',
-  templateUrl: './select-outline.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 30rem;
-    }
-  `],
-})
-export class SelectOutlineComponent {
-}
diff --git a/src/playground/with-layout/select/select-placeholder.component.html b/src/playground/with-layout/select/select-placeholder.component.html
index 79772f72bb..a366c35e11 100644
--- a/src/playground/with-layout/select/select-placeholder.component.html
+++ b/src/playground/with-layout/select/select-placeholder.component.html
@@ -1,6 +1,10 @@
-<nb-select placeholder="Placeholder" status="primary">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="small">
+  <nb-card-body>
+    <nb-select placeholder="Placeholder">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-placeholder.component.ts b/src/playground/with-layout/select/select-placeholder.component.ts
index c4fe062e0f..0440983b74 100644
--- a/src/playground/with-layout/select/select-placeholder.component.ts
+++ b/src/playground/with-layout/select/select-placeholder.component.ts
@@ -9,18 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-placeholder',
   templateUrl: './select-placeholder.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 15rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectPlaceholderComponent {
 }
diff --git a/src/playground/with-layout/select/select-routing.module.ts b/src/playground/with-layout/select/select-routing.module.ts
index cd5b5b3ef8..7f058ac049 100644
--- a/src/playground/with-layout/select/select-routing.module.ts
+++ b/src/playground/with-layout/select/select-routing.module.ts
@@ -13,12 +13,13 @@ import { SelectGroupsComponent } from './select-groups.component';
 import { SelectHeroComponent } from './select-hero.component';
 import { SelectLabelShowcaseComponent } from './select-label.component';
 import { SelectMultipleComponent } from './select-multiple.component';
-import { SelectOutlineComponent } from './select-outline.component';
+import { SelectFilledComponent } from './select-filled.component';
 import { SelectPlaceholderComponent } from './select-placeholder.component';
 import { SelectShapeComponent } from './select-shapes.component';
 import { SelectShowcaseComponent } from './select-showcase.component';
 import { SelectSizesComponent } from './select-sizes.component';
 import { SelectStatusComponent } from './select-status.component';
+import { SelectInteractiveComponent } from './select-interactive.component';
 
 const routes: Route[] = [
   {
@@ -50,8 +51,8 @@ const routes: Route[] = [
     component: SelectMultipleComponent,
   },
   {
-    path: 'select-outline.component',
-    component: SelectOutlineComponent,
+    path: 'select-filled.component',
+    component: SelectFilledComponent,
   },
   {
     path: 'select-placeholder.component',
@@ -73,6 +74,10 @@ const routes: Route[] = [
     path: 'select-status.component',
     component: SelectStatusComponent,
   },
+  {
+    path: 'select-interactive.component',
+    component: SelectInteractiveComponent,
+  },
 ];
 
 @NgModule({
diff --git a/src/playground/with-layout/select/select-shapes.component.html b/src/playground/with-layout/select/select-shapes.component.html
index e439c8090c..1c5a0d8479 100644
--- a/src/playground/with-layout/select/select-shapes.component.html
+++ b/src/playground/with-layout/select/select-shapes.component.html
@@ -1,20 +1,24 @@
-<nb-select placeholder="Round" shape="round">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="medium">
+  <nb-card-body>
+    <nb-select placeholder="Round" shape="round">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Rectangle" shape="rectangle">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Rectangle" shape="rectangle">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Semi-round" shape="semi-round">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Semi-round" shape="semi-round">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-shapes.component.ts b/src/playground/with-layout/select/select-shapes.component.ts
index afa4581f75..cda59d7ed6 100644
--- a/src/playground/with-layout/select/select-shapes.component.ts
+++ b/src/playground/with-layout/select/select-shapes.component.ts
@@ -9,18 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-shapes',
   templateUrl: './select-shapes.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 35rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectShapeComponent {
 }
diff --git a/src/playground/with-layout/select/select-showcase.component.html b/src/playground/with-layout/select/select-showcase.component.html
index f60a93c9bc..dcdc9a543b 100644
--- a/src/playground/with-layout/select/select-showcase.component.html
+++ b/src/playground/with-layout/select/select-showcase.component.html
@@ -1,8 +1,12 @@
-<nb-select placeholder="Select Showcase" [(selected)]="selectedItem">
-  <nb-option value="">Option empty</nb-option>
-  <nb-option value="0">Option 0</nb-option>
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="small">
+  <nb-card-body>
+    <nb-select placeholder="Select Showcase" [(selected)]="selectedItem">
+      <nb-option value="">Option empty</nb-option>
+      <nb-option value="0">Option 0</nb-option>
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-showcase.component.ts b/src/playground/with-layout/select/select-showcase.component.ts
index 868c151b02..25a05c08d3 100644
--- a/src/playground/with-layout/select/select-showcase.component.ts
+++ b/src/playground/with-layout/select/select-showcase.component.ts
@@ -9,15 +9,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-showcase',
   templateUrl: './select-showcase.component.html',
-  styles: [`
-    :host {
-      display: block;
-      width: 15rem;
-      height: 15rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
-
 export class SelectShowcaseComponent {
   selectedItem = '2';
 }
diff --git a/src/playground/with-layout/select/select-sizes.component.html b/src/playground/with-layout/select/select-sizes.component.html
index 7cad630963..95a44d2309 100644
--- a/src/playground/with-layout/select/select-sizes.component.html
+++ b/src/playground/with-layout/select/select-sizes.component.html
@@ -1,27 +1,10 @@
-<nb-select placeholder="XSmall" size="xsmall">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
-
-<nb-select placeholder="Small" size="small">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
-
-<nb-select placeholder="Medium" size="medium">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
-
-<nb-select placeholder="Large" size="large">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="medium">
+  <nb-card-body>
+    <nb-select [placeholder]="size" [size]="size" *ngFor="let size of sizes">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-sizes.component.ts b/src/playground/with-layout/select/select-sizes.component.ts
index 9f05da1aa3..925bf6bba0 100644
--- a/src/playground/with-layout/select/select-sizes.component.ts
+++ b/src/playground/with-layout/select/select-sizes.component.ts
@@ -5,22 +5,13 @@
  */
 
 import { Component } from '@angular/core';
+import { NbComponentSize } from '@nebular/theme';
 
 @Component({
   selector: 'nb-select-sizes',
   templateUrl: './select-sizes.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 30rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectSizesComponent {
+  sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
 }
diff --git a/src/playground/with-layout/select/select-status.component.html b/src/playground/with-layout/select/select-status.component.html
index c790c5c805..bb71d95ff5 100644
--- a/src/playground/with-layout/select/select-status.component.html
+++ b/src/playground/with-layout/select/select-status.component.html
@@ -1,34 +1,38 @@
-<nb-select placeholder="Primary" status="primary">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+<nb-card size="medium">
+  <nb-card-body>
+    <nb-select placeholder="Primary" status="primary">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Info" status="info">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Info" status="info">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Danger" status="danger">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Danger" status="danger">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Success" status="success">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Success" status="success">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
 
-<nb-select placeholder="Warning" status="warning">
-  <nb-option value="1">Option 1</nb-option>
-  <nb-option value="2">Option 2</nb-option>
-  <nb-option value="3">Option 3</nb-option>
-  <nb-option value="4">Option 4</nb-option>
-</nb-select>
+    <nb-select placeholder="Warning" status="warning">
+      <nb-option value="1">Option 1</nb-option>
+      <nb-option value="2">Option 2</nb-option>
+      <nb-option value="3">Option 3</nb-option>
+      <nb-option value="4">Option 4</nb-option>
+    </nb-select>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/select/select-status.component.ts b/src/playground/with-layout/select/select-status.component.ts
index 1ea9112407..fdcf4c1bcb 100644
--- a/src/playground/with-layout/select/select-status.component.ts
+++ b/src/playground/with-layout/select/select-status.component.ts
@@ -9,18 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-select-status',
   templateUrl: './select-status.component.html',
-  styles: [`
-    nb-select {
-      margin-right: 0.75rem;
-      margin-bottom: 1rem;
-    }
-
-    :host {
-      display: block;
-      width: 15rem;
-      height: 30rem;
-    }
-  `],
+  styleUrls: ['./select-example.scss'],
 })
 export class SelectStatusComponent {
 }
diff --git a/src/playground/with-layout/select/select.module.ts b/src/playground/with-layout/select/select.module.ts
index 58ecebada1..408189660e 100644
--- a/src/playground/with-layout/select/select.module.ts
+++ b/src/playground/with-layout/select/select.module.ts
@@ -4,9 +4,10 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NbSelectModule } from '@nebular/theme';
+import { NbButtonModule, NbCardModule, NbRadioModule, NbSelectModule } from '@nebular/theme';
 import { SelectRoutingModule } from './select-routing.module';
 import { SelectCleanComponent } from './select-clean.component';
 import { SelectDisabledComponent } from './select-disabled.component';
@@ -15,12 +16,13 @@ import { SelectGroupsComponent } from './select-groups.component';
 import { SelectHeroComponent } from './select-hero.component';
 import { SelectLabelShowcaseComponent } from './select-label.component';
 import { SelectMultipleComponent } from './select-multiple.component';
-import { SelectOutlineComponent } from './select-outline.component';
+import { SelectFilledComponent } from './select-filled.component';
 import { SelectPlaceholderComponent } from './select-placeholder.component';
 import { SelectShapeComponent } from './select-shapes.component';
 import { SelectShowcaseComponent } from './select-showcase.component';
 import { SelectSizesComponent } from './select-sizes.component';
 import { SelectStatusComponent } from './select-status.component';
+import { SelectInteractiveComponent } from './select-interactive.component';
 
 @NgModule({
   declarations: [
@@ -31,18 +33,23 @@ import { SelectStatusComponent } from './select-status.component';
     SelectHeroComponent,
     SelectLabelShowcaseComponent,
     SelectMultipleComponent,
-    SelectOutlineComponent,
+    SelectFilledComponent,
     SelectPlaceholderComponent,
     SelectShapeComponent,
     SelectShowcaseComponent,
     SelectSizesComponent,
     SelectStatusComponent,
+    SelectInteractiveComponent,
   ],
   imports: [
     FormsModule,
     ReactiveFormsModule,
     NbSelectModule,
     SelectRoutingModule,
+    NbCardModule,
+    CommonModule,
+    NbRadioModule,
+    NbButtonModule,
   ],
 })
 export class SelectModule {}