diff --git a/docs/config.toml b/docs/config.toml
index cd87b67..4b4c850 100644
--- a/docs/config.toml
+++ b/docs/config.toml
@@ -41,6 +41,9 @@ linkPrefix = "/react-mdc-web"
 [[components]]
   name = "Menu"
   path = "/components/menu/"
+[[components]]
+  name = "Select Field"
+  path = "/components/select_field/"
 [[components]]
   name = "Radio"
   path = "/components/radio/"
diff --git a/docs/pages/components/select_field/_template.jsx b/docs/pages/components/select_field/_template.jsx
new file mode 100644
index 0000000..0b29fb2
--- /dev/null
+++ b/docs/pages/components/select_field/_template.jsx
@@ -0,0 +1,47 @@
+import React, {PropTypes} from 'react';
+import ReactDOM from 'react-dom';
+import {Option, SelectField} from '../../../../src/SelectField';
+
+class Template extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: ''
+    };
+  }
+
+  componentDidMount() {
+    const container = document.getElementById('select_field');
+    ReactDOM.render(this.renderSelectField(), container);
+  }
+
+  onChange({ target }) {
+    this.setState({ selected: target.value });
+  }
+
+  renderSelectField() {
+    return (
+        <SelectField
+            onChange={this.onChange.bind(this)}
+            value={this.state.selected}
+        >
+          <Option value="first">First select field </Option>
+          <Option value="second">Second select field</Option>
+          <Option value="third">Third select field </Option>
+        </SelectField>
+    );
+  }
+
+  render() {
+    return (
+        <div>
+          {this.props.children}
+        </div>
+    );
+  }
+}
+export default Template;
diff --git a/docs/pages/components/select_field/index.md b/docs/pages/components/select_field/index.md
new file mode 100644
index 0000000..77b1e3e
--- /dev/null
+++ b/docs/pages/components/select_field/index.md
@@ -0,0 +1,21 @@
+---
+title: "Select Field"
+---
+
+```react-snippet
+select_field
+```
+```jsx
+onChange({ target }) {
+    this.setState({ selected: target.value });
+ }
+
+<SelectField
+    onChange={this.onChange.bind(this)}
+    value={this.state.selected}
+>
+  <Option value="first">First select field </Option>
+  <Option value="second">Second select field</Option>
+  <Option value="third">Third select field </Option>
+</SelectField>
+```
diff --git a/src/SelectField/Option.js b/src/SelectField/Option.js
new file mode 100644
index 0000000..20be85f
--- /dev/null
+++ b/src/SelectField/Option.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Option = props =>
+    <option
+        onClick={props.onClick}
+        value={props.value}
+    >
+      {props.children}
+    </option>;
+
+export default Option;
\ No newline at end of file
diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
new file mode 100644
index 0000000..3e1ce12
--- /dev/null
+++ b/src/SelectField/SelectField.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const SelectField = props => <select
+    onChange={props.onChange}
+    className='mdc-select'
+    style={{ marginTop: '20px' }}
+>
+  {props.children}
+</select>;
+
+export default SelectField;
\ No newline at end of file
diff --git a/src/SelectField/index.js b/src/SelectField/index.js
new file mode 100644
index 0000000..b2f909c
--- /dev/null
+++ b/src/SelectField/index.js
@@ -0,0 +1,2 @@
+export { default as Option } from './Option';
+export { default as SelectField } from './SelectField';