diff --git a/components/select/README.md b/components/select/README.md
index 3b873109..2cb9e5e9 100644
--- a/components/select/README.md
+++ b/components/select/README.md
@@ -1,86 +1,72 @@
-## Usage
-
-```html
-<mdc-select v-model="selected" label=">Please select one">
-  <mdc-option>A</mdc-option>
-  <mdc-option>B</mdc-option>
-  <mdc-option>C</mdc-option>
-</mdc-select>
-<span>Selected: {{ selected }}</span>
-```
-
-```javascript
-var vm = new Vue({
-  data () {
-    return {
-      selected: '',
-    }
-  }
-})
-```
-
-> For better cross-device experiennce, `<mdc-select>` will switch from menu to
-> native rendering based on the media query
-> `(max-width: 600px) and (pointer: coarse)`.
-
-### mdc-select
-
-| props      | Type            | Default | Description                                  |
-| ---------- | --------------- | ------- | -------------------------------------------- |
-| `disabled` | Boolean         | false   | whether this select is disabled              |
-| `label`    | String          |         | the selection label                          |
-| `value`    | [String, Array] |         | bind with v-model (update on `change` event) |
-| `multiple` | Boolean         |         | whether the select accept multiple values    |
-| `max-size` | Boolean         | 4       | multi select max size                        |
-| `native`   | String          |         | force native select rendering                |
-| `name`     | String          |         | native select name                           |
-
-| event    | Description             |
-| -------- | ----------------------- |
-| `@focus` | emitted on focus gained |
-| `@blur`  | emitted on focus lost   |
-
-### mdc-option
-
-| props      | Type    | Default | Description                     |
-| ---------- | ------- | ------- | ------------------------------- |
-| `disabled` | Boolean | false   | whether this option is disabled |
-| `value`    | String  |         | option value                    |
-
-> If no option value is specified, the select component will take the option's textContent.
-
-```html
-<mdc-select v-model="selected" label=">Please select one">
-  <mdc-option value="a">A</mdc-option>
-  <mdc-option value="b">B</mdc-option>
-  <mdc-option value="c">C</mdc-option>
-</mdc-select>
-```
-
-### Multiple select
-
-```html
-<mdc-select multiple v-model="selected" label="Please select one or more">
-  <mdc-option>A</mdc-option>
-  <mdc-option>B</mdc-option>
-  <mdc-option>C</mdc-option>
-</mdc-select>
-<span>Selected: {{ selected }}</span>
-```
-
-```javascript
-var vm = new Vue({
-  data () {
-    return {
-      selected: [],
-    }
-  }
-})
-```
-
-> multi-select are always rendered natively. the size is reactive and is caped
-> by the max-size property
-
-### Reference
-
-- <https://material.io/components/web/catalog/input-controls/select-menus>
+## Usage
+
+```html
+<mdc-select v-model="selected" label=">Please select one">
+  <mdc-option>A</mdc-option>
+  <mdc-option>B</mdc-option>
+  <mdc-option>C</mdc-option>
+</mdc-select>
+<span>Selected: {{ selected }}</span>
+```
+
+```javascript
+var vm = new Vue({
+  data() {
+    return {
+      selected: '',
+    };
+  },
+});
+```
+
+> For better cross-device experiennce, `<mdc-select>` will switch from menu to
+> native rendering based on the media query
+> `(max-width: 600px) and (pointer: coarse)`.
+
+### mdc-select
+
+| props      | Type            | Default | Description                                  |
+| ---------- | --------------- | ------- | -------------------------------------------- |
+| `disabled` | Boolean         | false   | whether this select is disabled              |
+| `label`    | String          |         | the selection label                          |
+| `value`    | [String, Array] |         | bind with v-model (update on `change` event) |
+| `max-size` | Boolean         | 4       | multi select max size                        |
+| `name`     | String          |         | native select name                           |
+
+| event    | Description             |
+| -------- | ----------------------- |
+| `@focus` | emitted on focus gained |
+| `@blur`  | emitted on focus lost   |
+
+### mdc-option
+
+| props      | Type    | Default | Description                     |
+| ---------- | ------- | ------- | ------------------------------- |
+| `disabled` | Boolean | false   | whether this option is disabled |
+| `value`    | String  |         | option value                    |
+
+> If no option value is specified, the select component will take the option's textContent.
+
+### mdc-optgroup
+
+| props      | Type    | Default | Description                     |
+| ---------- | ------- | ------- | ------------------------------- |
+| `disabled` | Boolean | false   | whether this option is disabled |
+| `label`    | String  |         | optgroup label                  |
+
+```html
+<mdc-select v-model="selected" label=">Please select one">
+  <mdc-optgroup label="Meats">
+    <mdc-option value="steak">Steak</mdc-option>
+    <mdc-option value="hamburger">Hamburger</mdc-option>
+  </mdc-optgroup>
+    <mdc-optgroup label="Vegetables">
+    <mdc-option value="beet">Beet</mdc-option>
+    <mdc-option value="carrot">Carrot</mdc-option>
+  </mdc-optgroup>
+</mdc-select>
+```
+
+### Reference
+
+* <https://material.io/components/web/catalog/input-controls/select-menus>
diff --git a/components/select/demo.vue b/components/select/demo.vue
index 1bf4b1bc..d0f81eb7 100644
--- a/components/select/demo.vue
+++ b/components/select/demo.vue
@@ -1,56 +1,42 @@
-<template>
-  <div class="mdc-demo mdc-demo--container">
-    <div>
-      <mdc-select v-model="selectedType" label="Pick up a food type">
-        <mdc-option v-for="type in types" :key="type"
-        >{{type}}</mdc-option>
-      </mdc-select>
-      <br><br><br>
-      <mdc-select box v-model="selectedValue" label="Pick up a food"
-        v-if="selectedType">
-        <mdc-option v-for="option of options" :key="option"
-        :value="option.toLowerCase()"
-        >{{option}}</mdc-option>
-      </mdc-select>
+<template>
+<div class="mdc-demo mdc-demo--container">
+  <div>
+    <mdc-select v-model="selectedType" label="Pick up a food type">
+      <mdc-option v-for="type in types" :key="type">{{type}}</mdc-option>
+    </mdc-select>
+    <br><br><br>
+    <mdc-select box v-model="selectedValue" label="Pick up a food" v-if="selectedType">
+      <mdc-option v-for="option of options" :key="option" :value="option.toLowerCase()">{{option}}</mdc-option>
+    </mdc-select>
 
-      <mdc-caption tag="p" v-if="selectedType"
-      >Selected Value: {{ selectedValue }}</mdc-caption>
-      <br>
+    <mdc-caption tag="p" v-if="selectedType">Selected Value: {{ selectedValue }}</mdc-caption>
+    <br>
 
-      <mdc-select multiple v-model="selectedValues" label="Pick one or more"
-      v-if="selectedType">
-      <mdc-option v-for="option of options" :key="option"
-      :value="option.toLowerCase()">
-      {{option}}
-      </mdc-option>
-      </mdc-select>
-      <mdc-caption tag="p" v-if="selectedType"
-      >Multi Select: {{ selectedValues }}</mdc-caption>
-    </div>
   </div>
+</div>
 </template>
 
-<script>
-  export default {
-    data () {
-      return {
-        selectedType: undefined,
-        selectedValue: undefined,
-        selectedValues: [],
-        food: {
-          'Vegetables' : ['Spinach', 'Carrots', 'Onions', 'Broccoli'], 
-          'Meat' : [ 'Eggs', 'Chicken', 'Fish', 'Turkey', 'Pork' , 'Beef'], 
-          'Fruits' : ['Apples', 'Oranges', 'Bananas', 'Berries', 'Lemons'], 
-        }
-      }
-    },
-    computed: {
-      types () {
-        return Object.keys(this.food)
-      }, 
-      options () {
-        return this.selectedType ? this.food[this.selectedType] : []
-      } 
-    }
-  }
-</script>
+<script>
+export default {
+  data() {
+    return {
+      selectedType: undefined,
+      selectedValue: undefined,
+      selectedValues: [],
+      food: {
+        Vegetables: ['Spinach', 'Carrots', 'Onions', 'Broccoli'],
+        Meat: ['Eggs', 'Chicken', 'Fish', 'Turkey', 'Pork', 'Beef'],
+        Fruits: ['Apples', 'Oranges', 'Bananas', 'Berries', 'Lemons'],
+      },
+    };
+  },
+  computed: {
+    types() {
+      return Object.keys(this.food);
+    },
+    options() {
+      return this.selectedType ? this.food[this.selectedType] : [];
+    },
+  },
+};
+</script>
diff --git a/components/select/index.js b/components/select/index.js
index 700f934b..14b0d6f6 100644
--- a/components/select/index.js
+++ b/components/select/index.js
@@ -1,14 +1,12 @@
-import {BasePlugin} from '../base'
-import mdcSelect from './mdc-select.vue'
-import mdcOption from './mdc-option.vue'
+import { BasePlugin } from '../base';
+import mdcSelect from './mdc-select.vue';
+import mdcOption from './mdc-option.vue';
+import mdcOptgroup from './mdc-optgroup.vue';
 
-
-export {
-  mdcSelect,
-  mdcOption,
-}
+export { mdcSelect, mdcOption, mdcOptgroup };
 
 export default BasePlugin({
   mdcSelect,
   mdcOption,
-})
+  mdcOptgroup,
+});
diff --git a/components/select/mdc-menu-option.vue b/components/select/mdc-menu-option.vue
deleted file mode 100644
index 454f26d2..00000000
--- a/components/select/mdc-menu-option.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-   <li class="mdc-option mdc-menu-option mdc-list-item" 
-    role="option" 
-    :tabindex="disabled?-1:0"
-    :aria-disabled="disabled"
-    :data-value="value">
-     <slot></slot>
-   </li>
-</template>
-
-<script>
-export default {
-  name: 'mdc-menu-option',
-  props: {
-    value: String,
-    disabled: Boolean
-  }
-}
-</script>
diff --git a/components/select/mdc-menu-select.vue b/components/select/mdc-menu-select.vue
deleted file mode 100644
index 3f2c3e16..00000000
--- a/components/select/mdc-menu-select.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<template>
-  <div class="mdc-select mdc-menu-select" 
-    role="listbox" 
-    :class="classes">
-    <div ref="surface" class="mdc-select__surface"
-      :style="surfaceStyles" :tabindex="tabIndex">
-        <div ref="label" class="mdc-select__label"
-          :class="labelClasses"
-        >{{label}}</div>
-        <div ref="selectedContent" class="mdc-select__selected-text" 
-        >{{selectedTextContent}}</div>
-        <div ref="bottomLine" class="mdc-select__bottom-line"
-          :class="bottomLineClasses"></div>
-    </div>
-    <mdc-menu ref="menu" 
-      class="mdc-select__menu"
-      @update="refreshIndex">
-      <slot></slot>
-    </mdc-menu>
-  </div>
-</template>
-
-<script>
-import { mdcMenu } from '../menu';
-import MDCSelectFoundation from '@material/select/foundation';
-import MDCSelectBottomLineFoundation from '@material/select/bottom-line/foundation';
-import MDCSelectLabelFoundation from '@material/select/label/foundation';
-
-export default {
-  name: 'mdc-menu-select',
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  props: {
-    multiple: Boolean,
-    value: [String, Array],
-    disabled: Boolean,
-    label: String,
-    box: Boolean,
-  },
-  data() {
-    return {
-      classes: {
-        'mdc-select--box': this.box,
-      },
-      labelClasses: {},
-      bottomLineClasses: {},
-      surfaceStyles: {},
-      tabIndex: 0,
-      selectedTextContent: '',
-    };
-  },
-  components: {
-    'mdc-menu': mdcMenu,
-  },
-  watch: {
-    disabled(value) {
-      this.foundation && this.foundation.setDisabled(value);
-    },
-    value() {
-      this.refreshIndex();
-    },
-    box() {
-      this.$set(this.classes, 'mdc-select--box', this.box);
-    },
-  },
-  methods: {
-    refreshIndex() {
-      if (this.foundation) {
-        let options = this.$refs.menu.items;
-        for (let i = 0; i < options.length; i++) {
-          let optionValue =
-            options[i].getAttribute('data-value') ||
-            options[i].textContent.trim();
-          if (this.value == optionValue) {
-            this.foundation.setSelectedIndex(i);
-            //TODO: MDCFIX force float above if value is valid
-            this.$set(
-              this.labelClasses,
-              'mdc-select__label--float-above',
-              true,
-            );
-            return;
-          }
-        }
-        //TODO: MDCFIX force float above if value is valid
-        this.foundation.setSelectedIndex(-1);
-        this.$set(this.labelClasses, 'mdc-select__label--float-above', false);
-        this.$emit('change', this.foundation.getValue()); // TODO: MDCFIX
-      }
-    },
-  },
-  mounted() {
-    this.labelFoundation = new MDCSelectLabelFoundation({
-      addClass: className => this.$set(this.labelClasses, className, true),
-      removeClass: className => this.$delete(this.labelClasses, className),
-    });
-
-    this.bottomLineFoundation = new MDCSelectBottomLineFoundation({
-      addClass: className => {
-        this.$set(this.bottomLineClasses, className, true);
-      },
-      removeClass: className => {
-        this.$delete(this.bottomLineClasses, className);
-      },
-    });
-    this.bottomLineFoundation.init();
-
-    this.foundation = new MDCSelectFoundation({
-      addClass: className => this.$set(this.classes, className, true),
-      removeClass: className => this.$delete(this.classes, className),
-      floatLabel: value => {
-        this.labelFoundation.styleFloat(value);
-      },
-      activateBottomLine: () => {
-        this.bottomLineFoundation.activate();
-      },
-      deactivateBottomLine: () => {
-        this.bottomLineFoundation.deactivate();
-      },
-      setAttr: (attr, value) => this.$el.setAttribute(attr, value),
-      rmAttr: (attr, value) => this.$el.removeAttribute(attr, value),
-      computeBoundingRect: () => this.$refs.surface.getBoundingClientRect(),
-      registerInteractionHandler: (type, handler) =>
-        this.$refs.surface.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) =>
-        this.$refs.surface.removeEventListener(type, handler),
-      focus: () => this.$refs.surface.focus(),
-      makeTabbable: () => {
-        this.tabIndex = 0;
-      },
-      makeUntabbable: () => {
-        this.tabIndex = -1;
-      },
-      getComputedStyleValue: prop =>
-        window.getComputedStyle(this.$refs.surface).getPropertyValue(prop),
-      setStyle: (propertyName, value) =>
-        this.$set(this.surfaceStyles, propertyName, value),
-      create2dRenderingContext: () =>
-        document.createElement('canvas').getContext('2d'),
-      setMenuElStyle: (propertyName, value) =>
-        (this.$refs.menu.$el.style[propertyName] = value),
-      setMenuElAttr: (attr, value) =>
-        this.$refs.menu.$el.setAttribute(attr, value),
-      rmMenuElAttr: attr => this.$refs.menu.$el.removeAttribute(attr),
-      getMenuElOffsetHeight: () => this.$refs.menu.$el.offsetHeight,
-      openMenu: focusIndex => this.$refs.menu.show({ focusIndex }),
-      isMenuOpen: () => this.$refs.menu.isOpen(),
-      setSelectedTextContent: selectedTextContent => {
-        this.selectedTextContent = selectedTextContent;
-      },
-      getNumberOfOptions: () => this.$refs.menu.items.length,
-      getTextForOptionAtIndex: index =>
-        this.$refs.menu.items[index].textContent.trim(),
-      getValueForOptionAtIndex: index => {
-        return (
-          this.$refs.menu.items[index].getAttribute('data-value') ||
-          this.$refs.menu.items[index].textContent.trim()
-        );
-      },
-      setAttrForOptionAtIndex: (index, attr, value) =>
-        this.$refs.menu.items[index].setAttribute(attr, value),
-      rmAttrForOptionAtIndex: (index, attr) =>
-        this.$refs.menu.items[index].removeAttribute(attr),
-      getOffsetTopForOptionAtIndex: index =>
-        this.$refs.menu.items[index].offsetTop,
-      registerMenuInteractionHandler: (type, handler) =>
-        this.$refs.menu.$el.addEventListener(type, handler),
-      deregisterMenuInteractionHandler: (type, handler) =>
-        this.$refs.menu.$el.removeEventListener(type, handler),
-      notifyChange: () => {
-        this.$emit('change', this.foundation.getValue());
-      },
-      getWindowInnerHeight: () => window.innerHeight,
-      addBodyClass: className => document.body.classList.add(className),
-      removeBodyClass: className => document.body.classList.remove(className),
-    });
-
-    //TODO: MDCFIX
-    let foundation = this.foundation;
-    if (foundation) {
-      foundation.resize = () => {
-        if (!foundation.ctx_) {
-          return;
-        }
-        const font = foundation.adapter_.getComputedStyleValue('font');
-        const letterSpacing = parseFloat(
-          foundation.adapter_.getComputedStyleValue('letter-spacing'),
-        );
-        if (font) {
-          foundation.ctx_.font = font;
-        } else {
-          const primaryFontFamily = foundation.adapter_
-            .getComputedStyleValue('font-family')
-            .split(',')[0];
-          const fontSize = foundation.adapter_.getComputedStyleValue(
-            'font-size',
-          );
-          foundation.ctx_.font = `${fontSize} ${primaryFontFamily}`;
-        }
-
-        let maxTextLength = 0;
-
-        const surfacePaddingRight = parseInt(
-          foundation.adapter_.getComputedStyleValue('padding-right'),
-          10,
-        );
-        const surfacePaddingLeft = parseInt(
-          foundation.adapter_.getComputedStyleValue('padding-left'),
-          10,
-        );
-        const selectBoxAddedPadding = surfacePaddingRight + surfacePaddingLeft;
-
-        for (
-          let i = 0, l = foundation.adapter_.getNumberOfOptions();
-          i < l;
-          i++
-        ) {
-          const txt = foundation.adapter_.getTextForOptionAtIndex(i).trim();
-          const { width } = foundation.ctx_.measureText(txt);
-          const addedSpace = letterSpacing * txt.length;
-
-          maxTextLength = Math.max(
-            maxTextLength,
-            Math.ceil(width + addedSpace + selectBoxAddedPadding),
-          );
-        }
-
-        const labelTxt = this.label;
-        const { width } = foundation.ctx_.measureText(labelTxt);
-        const addedSpace = letterSpacing * labelTxt.length;
-
-        maxTextLength = Math.max(
-          maxTextLength,
-          Math.ceil(width + addedSpace + selectBoxAddedPadding),
-        );
-
-        foundation.adapter_.setStyle('width', `${maxTextLength}px`);
-      };
-    }
-    ///
-    this.labelFoundation.init();
-    this.foundation.init();
-    this.foundation.setDisabled(this.disabled);
-    this.refreshIndex();
-    if (this.value !== this.foundation.getValue()) {
-      this.$emit('change', this.foundation.getValue());
-    }
-  },
-  beforeDestroy() {
-    let foundation = this.foundation;
-    this.foundation = null;
-    foundation.destroy();
-
-    let labelFoundation = this.labelFoundation;
-    this.labelFoundation = null;
-    labelFoundation.destroy();
-
-    let bottomLineFoundation = this.bottomLineFoundation;
-    this.bottomLineFoundation = null;
-    bottomLineFoundation.destroy();
-  },
-};
-</script>
diff --git a/components/select/mdc-multi-option.vue b/components/select/mdc-multi-option.vue
deleted file mode 100644
index 6bdadfc0..00000000
--- a/components/select/mdc-multi-option.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-   <option class="mdc-option mdc-multi-option mdc-list-item" 
-    :disabled="disabled" :value="value" v-if="hasValue">
-     <slot></slot>
-   </option>
-   <option class="mdc-option mdc-multi-option mdc-list-item" 
-    :disabled="disabled" v-else>
-     <slot></slot>
-   </option>
-</template>
-
-<script>
-export default {
-  name: 'mdc-multi-option',
-  props: {
-    value: String,
-    disabled: Boolean
-  },
-  computed: {
-    hasValue () {
-      return !(typeof this.value === 'undefined')
-    }
-  }
-}
-</script>
diff --git a/components/select/mdc-multi-select.vue b/components/select/mdc-multi-select.vue
deleted file mode 100644
index 86ac000e..00000000
--- a/components/select/mdc-multi-select.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <select :multiple="multiple"  ref="root" v-model="selected" 
-    :disabled="disabled"  :style="styles"  
-    class="mdc-select mdc-multi-select mdc-list"
-    @change="onChange"
-  >
-    <optgroup ref="optgroup" class="mdc-list-group" :label="label" v-if="label">
-        <slot></slot>
-    </optgroup>
-    <slot v-else></slot>
-  </select>
-</template>
-
-<script>
-export default {
-  name: 'mdc-multi-select',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    multiple: Boolean,
-    value: [String, Array],
-    disabled: Boolean,
-    label: String,
-    maxSize: {
-      type: [String, Number],
-      default: 4
-    }
-  },
-  data () {
-    return {
-      selected: this.value,
-      size: undefined,
-      count: undefined
-    }
-  },
-  computed: {
-    styles () {
-      let scroll = (this.count > this.size)
-      let size = 48* this.size + (scroll? 0 : 16)
-
-      let styles =  {
-        'height': size + 'px',
-        'overflow-y':  scroll ? 'scroll' : 'hidden'
-      }
-      if (!scroll) {
-        styles['background-image'] = 'unset'
-      }
-      return styles
-    }
-  },
-  methods: {
-    onChange () {
-      this.$emit('change', this.selected)
-    }
-  },
-  mounted () {
-    const refreshSize = () => {
-      let count = this.$refs.root.querySelectorAll('option, optgroup').length
-      this.count = count
-      let max = Number(this.maxSize)
-      if (this.label) {
-        max += 1
-      }
-      this.size = Math.min(count, max)
-    }
-
-    this.slotObserver = new MutationObserver(() => refreshSize())
-    this.slotObserver.observe(this.$el, { childList: true, subtree: true })
-
-    refreshSize()
-  },
-  beforeDestroy () {
-    this.slotObserver.disconnect()
-  }
-}
-</script>
diff --git a/components/select/mdc-native-option.vue b/components/select/mdc-native-option.vue
deleted file mode 100644
index e6b2b73f..00000000
--- a/components/select/mdc-native-option.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-   <option :disabled="disabled" :value="value" v-if="hasValue"
-    class="mdc-option mdc-native-option">
-     <slot></slot>
-   </option>
-   <option :disabled="disabled" v-else
-    class="mdc-option mdc-native-option">
-     <slot></slot>
-   </option>
-</template>
-
-<script>
-export default {
-  name: 'mdc-native-option',
-  props: {
-    value: String,
-    disabled: Boolean
-  },
-  computed: {
-    hasValue () {
-      return !(typeof this.value === 'undefined')
-    }
-  }
-}
-</script>
diff --git a/components/select/mdc-native-select.vue b/components/select/mdc-native-select.vue
deleted file mode 100644
index 6b11762d..00000000
--- a/components/select/mdc-native-select.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <select ref="root" class="mdc-select mdc-native-select" 
-    v-model="selected" :disabled="disabled"
-    @change="onChange"
-  >
-    <option disabled value="" v-if="label">{{ label }}</option>
-    <slot></slot>
-  </select>
-</template>
-
-<script>
-export default {
-  name: 'mdc-native-select',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    value: [String, Array],
-    disabled: Boolean,
-    label: String
-  },
-  data () {
-    return {
-      selected: this.value
-    }
-  },
-  methods: {
-    onChange () {
-      this.$emit('change', this.selected)
-    }
-  }
-}
-</script>
diff --git a/components/select/mdc-optgroup.vue b/components/select/mdc-optgroup.vue
new file mode 100644
index 00000000..39dcb6a4
--- /dev/null
+++ b/components/select/mdc-optgroup.vue
@@ -0,0 +1,16 @@
+<template>
+   <optgroup :disabled="disabled" :label="label"
+    class="mdc-optgroup">
+     <slot></slot>
+   </optgroup>
+</template>
+
+<script>
+export default {
+  name: 'mdc-optgroup',
+  props: {
+    label: String,
+    disabled: Boolean,
+  },
+};
+</script>
diff --git a/components/select/mdc-option.vue b/components/select/mdc-option.vue
index f9e23e06..e703d999 100644
--- a/components/select/mdc-option.vue
+++ b/components/select/mdc-option.vue
@@ -1,42 +1,24 @@
 <template>
-  <component :is="type" :disabled="disabled" :value=value>
-    <slot></slot>
-  </component>
+   <option :disabled="disabled" :value="value" v-if="hasValue"
+    class="mdc-option">
+     <slot></slot>
+   </option>
+   <option :disabled="disabled" v-else
+    class="mdc-option">
+     <slot></slot>
+   </option>
 </template>
 
 <script>
-import MDCNativeOption from './mdc-native-option.vue';
-import MDCMenuOption from './mdc-menu-option.vue';
-import MDCMultiOption from './mdc-multi-option.vue';
-
 export default {
   name: 'mdc-option',
   props: {
     value: String,
     disabled: Boolean,
   },
-  inject: ['mdcSelect'],
-  components: {
-    'mdc-native-option': MDCNativeOption,
-    'mdc-multi-option': MDCMultiOption,
-    'mdc-menu-option': MDCMenuOption,
-  },
   computed: {
-    isNative() {
-      return this.mdcSelect.isNative;
-    },
-    multiple() {
-      return this.mdcSelect.multiple;
-    },
-    menu() {
-      return this.mdcSelect.menu;
-    },
-    type() {
-      return this.multiple
-        ? 'mdc-multi-option'
-        : this.menu
-          ? 'mdc-menu-option'
-          : this.isNative ? 'mdc-native-option' : 'mdc-menu-option';
+    hasValue() {
+      return !(typeof this.value === 'undefined');
     },
   },
 };
diff --git a/components/select/mdc-select.vue b/components/select/mdc-select.vue
index 53ace815..e3ae0616 100644
--- a/components/select/mdc-select.vue
+++ b/components/select/mdc-select.vue
@@ -1,83 +1,127 @@
-<template>
-  <component :is="type" :multiple="multiple"
-    :label="label" 
-    :value="value" @change="onChange"
-    v-bind="$attrs"
-  >
+<template>
+<div class="mdc-select" :class="classes">
+  <select ref="native_control" class="mdc-select__native-control" v-on="listeners" v-bind="$attrs">
     <slot></slot>
-  </component>
+  </select>
+  <div ref="label" class="mdc-select__label" :class="labelClasses">{{label}}</div>
+  <div ref="bottomLine" class="mdc-select__bottom-line" :class="bottomLineClasses"></div>
+</div>
 </template>
 
-<script>
-import MDCNativeSelect from './mdc-native-select.vue';
-import MDCMenuSelect from './mdc-menu-select.vue';
-import MDCMultiSelect from './mdc-multi-select.vue';
-import { DispatchFocusMixin } from '../base';
-
-const media = new class {
-  get mobile() {
-    return (
-      this._mobile ||
-      (this._mobile = window.matchMedia(
-        '(max-width: 600px) and (pointer: coarse)',
-      ))
-    );
-  }
-}();
-
-export default {
-  name: 'mdc-select',
-  mixins: [DispatchFocusMixin],
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  props: {
-    multiple: Boolean,
-    value: [String, Array],
-    label: String,
-    native: Boolean,
-    menu: Boolean,
-  },
-  provide() {
-    return { mdcSelect: this };
-  },
-  components: {
-    'mdc-native-select': MDCNativeSelect,
-    'mdc-menu-select': MDCMenuSelect,
-    'mdc-multi-select': MDCMultiSelect,
-  },
-  data() {
-    return {
-      mobile: window ? media.mobile.matches : true,
-    };
-  },
-  computed: {
-    type() {
-      return this.multiple
-        ? 'mdc-multi-select'
-        : this.menu
-          ? 'mdc-menu-select'
-          : this.isNative ? 'mdc-native-select' : 'mdc-menu-select';
-    },
-    isNative() {
-      return this.native || this.multiple || this.mobile;
-    },
-  },
-  methods: {
-    onChange(value) {
-      this.$emit('change', value);
-    },
-    refreshMedia() {
-      this.mobile = media.mobile.matches;
-    },
-  },
-  beforeMount() {
-    media.mobile.addListener(this.refreshMedia);
-    this.refreshMedia();
-  },
-  beforeDestroy() {
-    media.mobile.removeListener(this.refreshMedia);
-  },
-};
-</script>
+<script>
+import { mdcOption } from './mdc-option.vue';
+import { mdcOptgroup } from './mdc-optgroup.vue';
+import MDCSelectFoundation from '@material/select/foundation';
+import MDCSelectBottomLineFoundation from '@material/select/bottom-line/foundation';
+import MDCSelectLabelFoundation from '@material/select/label/foundation';
+import { RippleBase } from '../ripple';
+
+export default {
+  name: 'mdc-select',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: [String, Array],
+    disabled: Boolean,
+    label: String,
+    box: Boolean,
+  },
+  inheritAttrs: false,
+  data() {
+    return {
+      classes: {
+        'mdc-select--box': this.box,
+      },
+      labelClasses: {},
+      bottomLineClasses: {},
+    };
+  },
+  components: {
+    'mdc-option': mdcOption,
+    'mdc-optgroup': mdcOptgroup,
+  },
+  watch: {
+    disabled(value) {
+      this.foundation && this.foundation.setDisabled(value);
+    },
+    box() {
+      this.$set(this.classes, 'mdc-select--box', this.box);
+    },
+  },
+  methods: {},
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        change: event => this.$emit('change', event.target.value),
+      };
+    },
+  },
+  mounted() {
+    this.labelFoundation = new MDCSelectLabelFoundation({
+      addClass: className => this.$set(this.labelClasses, className, true),
+      removeClass: className => this.$delete(this.labelClasses, className),
+    });
+
+    this.bottomLineFoundation = new MDCSelectBottomLineFoundation({
+      addClass: className => {
+        this.$set(this.bottomLineClasses, className, true);
+      },
+      removeClass: className => {
+        this.$delete(this.bottomLineClasses, className);
+      },
+    });
+    this.bottomLineFoundation.init();
+
+    this.foundation = new MDCSelectFoundation({
+      addClass: className => this.$set(this.classes, className, true),
+      removeClass: className => this.$delete(this.classes, className),
+      floatLabel: value => {
+        this.labelFoundation.styleFloat(value);
+      },
+      activateBottomLine: () => {
+        this.bottomLineFoundation.activate();
+      },
+      deactivateBottomLine: () => {
+        this.bottomLineFoundation.deactivate();
+      },
+      registerInteractionHandler: (type, handler) =>
+        this.$refs.native_control.addEventListener(type, handler),
+      deregisterInteractionHandler: (type, handler) =>
+        this.$refs.native_control.removeEventListener(type, handler),
+      getSelectedIndex: () => this.$refs.native_control.selectedIndex,
+      setSelectedIndex: index =>
+        (this.$refs.native_control.selectedIndex = index),
+      setDisabled: disabled => (this.$refs.native_control.disabled = disabled),
+      getValue: () => this.$refs.native_control.value,
+      setValue: value => (this.$refs.native_control.value = value),
+    });
+
+    this.labelFoundation.init();
+    this.foundation.init();
+    this.foundation.setDisabled(this.disabled);
+
+    if (this.box) {
+      this.ripple = new RippleBase(this);
+      this.ripple.init();
+    }
+  },
+  beforeDestroy() {
+    let foundation = this.foundation;
+    this.foundation = null;
+    foundation.destroy();
+
+    let labelFoundation = this.labelFoundation;
+    this.labelFoundation = null;
+    labelFoundation.destroy();
+
+    let bottomLineFoundation = this.bottomLineFoundation;
+    this.bottomLineFoundation = null;
+    bottomLineFoundation.destroy();
+
+    this.ripple && this.ripple.destroy();
+  },
+};
+</script>
diff --git a/components/select/styles.scss b/components/select/styles.scss
index bdc8e128..2d46ab44 100644
--- a/components/select/styles.scss
+++ b/components/select/styles.scss
@@ -1,75 +1 @@
-@import "@material/select/mdc-select";
-
-// TODO: MDCFIX 
-// should have top bottom margins?
-// should align same way if label float-above
-
-
-// TODO: MDCFIX 
-// implement new select
-.mdc-multi-select {
-  @include mdc-theme-prop(border-color, text-hint-on-light);
-
-  width: 250px;
-  padding: 0;
-  border-width: 1px;
-  border-style: solid;
-  outline: none;
-  appearance: none;
-
-  .mdc-list-divider {
-    margin-bottom: 8px;
-    padding-top: 8px;
-    font-size: 0;
-  }
-
-  .mdc-list-group {
-    @include mdc-theme-prop(color, text-hint-on-light);
-
-    margin: 16px 0 0;
-    padding: 0 0 0 16px;
-    font-weight: normal;
-
-    &:last-child {
-      margin-bottom: 16px;
-    }
-
-    .mdc-list-divider {
-      margin-left: -16px;
-    }
-  }
-
-  .mdc-list-item {
-    @include mdc-theme-prop(color, text-primary-on-light);
-
-    margin: 0 0 0 -16px;
-    padding: 0 16px;
-
-    &:first-child {
-      margin-top: 12px;
-    }
-
-    &:last-child {
-      margin-bottom: 8px;
-    }
-
-    // Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the
-    // OS-determined selection color, which states styles are not going to play well with.
-    // Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements
-    // that we use for ripple/states to position and size themselves relative to the entire body instead.
-    // Disabling states-specific styles on multi-select options altogether is the most straightforward recourse.
-    &::before,
-    &::after {
-      content: none;
-    }
-  }
-
-  .mdc-list-item:checked {
-    @include mdc-theme-prop(background-color, background);
-  }
-
-}
-
-.mdc-multi-select:focus .mdc-list-item:checked {
-  @include mdc-theme-prop(background-color, primary);
-}
+@import '@material/select/mdc-select';
diff --git a/components/select/test.spec.js b/components/select/test.spec.js
index 6f3c374b..f5d640c8 100644
--- a/components/select/test.spec.js
+++ b/components/select/test.spec.js
@@ -1,45 +1,30 @@
-import { mount, createLocalVue, checkValidMdcAdapter } from '../unit-test'
-
-import mdcMenuSelect from './mdc-menu-select.vue'
-import mdcMenuOption from './mdc-menu-option.vue'
-import mdcNativeSelect from './mdc-native-select.vue'
-import mdcNativeOption from './mdc-native-option.vue'
-import mdcMultiSelect from './mdc-multi-select.vue'
-import mdcMultiOption from './mdc-multi-option.vue'
-
+import {
+  mount,
+  createLocalVue,
+  checkValidMdcAdapter
+} from '../unit-test'
+import {
+  mdcSelect,
+  mdcOption,
+  mdcOptgroup
+} from './index.js'
 import Spec from './test.spec.vue';
 
 describe(__dirname, () => {
-
   const localVue = createLocalVue()
-
   describe('mdcSelect', () => {
     const spec = mount(Spec, localVue)
     test('is a Vue instance', () => {
       expect(spec.isVueInstance()).toBeTruthy()
     })
-
-    describe('mdcMenuSelect', () => {
-      checkValidMdcAdapter(spec.find(mdcMenuSelect).vm)
-    })
-    describe('mdcMenuOption', () => {
-      checkValidMdcAdapter(spec.find(mdcMenuOption).vm)
+    describe('mdcSelect', () => {
+      checkValidMdcAdapter(spec.find(mdcSelect).vm)
     })
-
-    describe('mdcNativeSelect', () => {
-      checkValidMdcAdapter(spec.find(mdcNativeSelect).vm)
-    })
-    describe('mdcNativeOption', () => {
-      checkValidMdcAdapter(spec.find(mdcNativeOption).vm)
-    })
-
-    describe('mdcMultiSelect', () => {
-      checkValidMdcAdapter(spec.find(mdcMultiSelect).vm)
+    describe('mdcOption', () => {
+      checkValidMdcAdapter(spec.find(mdcOption).vm)
     })
-    describe('mdcMultiOption', () => {
-      checkValidMdcAdapter(spec.find(mdcMultiOption).vm)
+    describe('mdcOptgroup', () => {
+      checkValidMdcAdapter(spec.find(mdcOptgroup).vm)
     })
-
   })
-
-})
\ No newline at end of file
+})
diff --git a/components/select/test.spec.vue b/components/select/test.spec.vue
index 087d8695..96fa6e32 100644
--- a/components/select/test.spec.vue
+++ b/components/select/test.spec.vue
@@ -1,38 +1,19 @@
 <template>
   <div>
-    <mdc-menu-select v-model="selectValue" label="select label">
-      <mdc-menu-option>option1</mdc-menu-option>
-      <mdc-menu-option value="option2">Option2</mdc-menu-option>
-    </mdc-menu-select>
-
-    <mdc-native-select v-model="selectValue" label="select label">
-      <mdc-native-option>option1</mdc-native-option>
-      <mdc-native-option value="option2">Option2</mdc-native-option>
-    </mdc-native-select>
-
-    <mdc-multi-select v-model="selectValues" label="multi select label">
-      <mdc-multi-option>option3</mdc-multi-option>
-      <mdc-multi-option>option3</mdc-multi-option>
-    </mdc-multi-select>
-
+    <mdc-select v-model="selectValue" label="select label">
+      <mdc-option>option1</mdc-option>
+      <mdc-option value="option2">Option2</mdc-option>
+    </mdc-select>
   </div>
 </template>
 
 <script>
-import mdcMenuSelect from './mdc-menu-select.vue'
-import mdcMenuOption from './mdc-menu-option.vue'
-import mdcNativeSelect from './mdc-native-select.vue'
-import mdcNativeOption from './mdc-native-option.vue'
-import mdcMultiSelect from './mdc-multi-select.vue'
-import mdcMultiOption from './mdc-multi-option.vue'
+import mdcSelect from './mdc-select.vue'
+import mdcOption from './mdc-option.vue'
 
 const components = {
-  'mdc-menu-select': mdcMenuSelect,
-  'mdc-menu-option': mdcMenuOption,
-  'mdc-native-select': mdcNativeSelect,
-  'mdc-native-option': mdcNativeOption,
-  'mdc-multi-select': mdcMultiSelect,
-  'mdc-multi-option': mdcMultiOption,
+  'mdc-select': mdcSelect,
+  'mdc-option': mdcOption,
 }
 
 export default {
@@ -43,6 +24,6 @@ export default {
       selectValues: [],
     }
   },
-  components 
+  components
 }
 </script>