diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.d.ts b/packages/patternfly-4/react-core/src/components/Select/Select.d.ts
new file mode 100644
index 00000000000..e84de1aaa63
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/Select.d.ts
@@ -0,0 +1,18 @@
+import { HTMLProps, FormEvent } from 'react';
+
+export const SelectVariant = {
+  single: 'single'
+};
+
+export interface SelectProps extends HTMLProps<HTMLOptionElement> {
+  isExpanded?: boolean;
+  onToggle(value: boolean): void;
+  placeholderText?: string;
+  selections?: string;
+  variant?: string;
+  width?: string | number;
+}
+
+declare const Select: React.FunctionComponent<SelectProps>;
+
+export default Select;
diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.docs.js b/packages/patternfly-4/react-core/src/components/Select/Select.docs.js
new file mode 100644
index 00000000000..49f15765ac9
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/Select.docs.js
@@ -0,0 +1,11 @@
+import { Select, SelectOption } from '@patternfly/react-core';
+import SingleSelectInput from './examples/SingleSelectInput';
+
+export default {
+  title: 'Select',
+  components: {
+    Select,
+    SelectOption
+  },
+  examples: [{ component: SingleSelectInput, title: 'Single Select Input' }]
+};
diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.js b/packages/patternfly-4/react-core/src/components/Select/Select.js
new file mode 100644
index 00000000000..c71cdbf2e59
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/Select.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import styles from '@patternfly/patternfly/components/Select/select.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import SingleSelect from './SingleSelect';
+import SelectToggle from './SelectToggle';
+import { SelectContext, SelectVariant } from './selectConstants';
+
+// seed for the aria-labelledby ID
+let currentId = 0;
+
+const propTypes = {
+  /** Content rendered inside the Select */
+  children: PropTypes.node,
+  /** Classes applied to the root of the Select */
+  className: PropTypes.string,
+  /** Flag to indicate if select is expanded */
+  isExpanded: PropTypes.bool,
+  /** Placeholder text of Select */
+  placeholderText: PropTypes.string,
+  /** Selected item */
+  selections: PropTypes.string,
+  /** Id of label for the Select aria-labelledby */
+  ariaLabelledBy: PropTypes.string,
+  /** Callback for selection behavior */
+  onSelect: PropTypes.func.isRequired,
+  /** Callback for toggle button behavior */
+  onToggle: PropTypes.func.isRequired,
+  /** Variant of rendered Select */
+  variant: PropTypes.oneOf(['single']),
+  /** Width of the select container as a number of px or string percentage */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Additional props are spread to the container <ul> */
+  '': PropTypes.any
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  isExpanded: false,
+  ariaLabelledBy: '',
+  selections: null,
+  placeholderText: null,
+  variant: SelectVariant.single,
+  width: '100%'
+};
+
+class Select extends React.Component {
+  parentRef = React.createRef();
+  state = { openedOnEnter: false };
+
+  onEnter = () => {
+    this.setState({ openedOnEnter: true });
+  };
+
+  onClose = () => {
+    this.setState({ openedOnEnter: false });
+  };
+
+  render() {
+    const {
+      children,
+      className,
+      variant,
+      onToggle,
+      onSelect,
+      isExpanded,
+      selections,
+      ariaLabelledBy,
+      placeholderText,
+      width,
+      ...props
+    } = this.props;
+    const { openedOnEnter } = this.state;
+    const selectToggleId = `pf-toggle-id-${currentId++}`;
+    let childPlaceholderText = null;
+    if (!selections && !placeholderText) {
+      const childPlaceholder = children.filter(child => child.props.isPlaceholder === true);
+      childPlaceholderText =
+        (childPlaceholder[0] && childPlaceholder[0].props.value) || (children[0] && children[0].props.value);
+    }
+
+    return (
+      <div
+        className={css(styles.select, isExpanded && styles.modifiers.expanded, className)}
+        ref={this.parentRef}
+        style={{ width }}
+      >
+        <SelectContext.Provider value={{ onSelect, onClose: this.onClose }}>
+          {variant === 'single' && (
+            <React.Fragment>
+              <SelectToggle
+                id={selectToggleId}
+                parentRef={this.parentRef.current}
+                isExpanded={isExpanded}
+                onToggle={onToggle}
+                onEnter={this.onEnter}
+                onClose={this.onClose}
+                aria-labelledby={`${ariaLabelledBy} ${selectToggleId}`}
+                style={{ width }}
+              >
+                {selections || placeholderText || childPlaceholderText}
+              </SelectToggle>
+              {isExpanded && (
+                <SingleSelect
+                  {...props}
+                  selected={selections}
+                  openedOnEnter={openedOnEnter}
+                  aria-labelledby={ariaLabelledBy}
+                >
+                  {children}
+                </SingleSelect>
+              )}
+            </React.Fragment>
+          )}
+        </SelectContext.Provider>
+      </div>
+    );
+  }
+}
+
+Select.propTypes = propTypes;
+Select.defaultProps = defaultProps;
+
+export default Select;
diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.test.js b/packages/patternfly-4/react-core/src/components/Select/Select.test.js
new file mode 100644
index 00000000000..59a48926886
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/Select.test.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Select from './Select';
+import SelectOption from './SelectOption';
+
+const selectOptions = [
+  <SelectOption value="Mr" key="0" />,
+  <SelectOption value="Mrs" key="1" />,
+  <SelectOption value="Ms" key="2" />,
+  <SelectOption value="Other" key="3" />
+];
+
+describe('select', () => {
+  describe('single select', () => {
+    test('renders closed successfully', () => {
+      const view = mount(
+        <Select variant="single" onSelect={jest.fn()} onToggle={jest.fn()}>
+          {selectOptions}
+        </Select>
+      );
+      expect(view).toMatchSnapshot();
+    });
+
+    test('renders expanded successfully', () => {
+      const view = mount(
+        <Select variant="single" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
+          {selectOptions}
+        </Select>
+      );
+      expect(view).toMatchSnapshot();
+    });
+  });
+});
+
+describe('API', () => {
+  test('click on item', () => {
+    const mockToggle = jest.fn();
+    const mockSelect = jest.fn();
+    const view = mount(
+      <Select variant="single" onToggle={mockToggle} onSelect={mockSelect} isExpanded>
+        {selectOptions}
+      </Select>
+    );
+    view
+      .find('button')
+      .at(1)
+      .simulate('click');
+    expect(mockToggle.mock.calls).toHaveLength(0);
+    expect(mockSelect.mock.calls).toHaveLength(1);
+  });
+
+  test('children only, no console error', () => {
+    const myMock = jest.fn();
+    global.console = { error: myMock };
+    mount(
+      <Select variant="single" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
+        {selectOptions}
+      </Select>
+    );
+    expect(myMock).not.toBeCalled();
+  });
+});
diff --git a/packages/patternfly-4/react-core/src/components/Select/SelectOption.d.ts b/packages/patternfly-4/react-core/src/components/Select/SelectOption.d.ts
new file mode 100644
index 00000000000..68b9e9e4bb2
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/SelectOption.d.ts
@@ -0,0 +1,18 @@
+import { HTMLProps, FormEvent } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface SelectOptionProps extends Omit<HTMLProps<HTMLOptionElement>, 'disabled'> {
+  value?: string;
+  index?: number;
+  isValid?: boolean;
+  isDisabled?: boolean;
+  isPlaceholder?: boolean;
+  isSelected?: boolean;
+  onClick?: Function;
+  sendRef?: Function;
+  keyHandler?: Function;
+}
+
+declare const SelectOption: React.FunctionComponent<SelectOptionProps>;
+
+export default SelectOption;
diff --git a/packages/patternfly-4/react-core/src/components/Select/SelectOption.js b/packages/patternfly-4/react-core/src/components/Select/SelectOption.js
new file mode 100644
index 00000000000..fbf7ac3d90c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/SelectOption.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import styles from '@patternfly/patternfly/components/Select/select.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import { SelectContext, KeyTypes } from './selectConstants';
+
+const propTypes = {
+  /** additional classes added to the Select Option */
+  className: PropTypes.string,
+  /** the value for the option */
+  value: PropTypes.string,
+  /** internal index of the option */
+  index: PropTypes.number,
+  /** flag indicating if the option is disabled */
+  isDisabled: PropTypes.bool,
+  /** flag indicating if the option acts as a placeholder */
+  isPlaceholder: PropTypes.bool,
+  /** Internal flag indicating if the option is selected */
+  isSelected: PropTypes.bool,
+  /** Optional on click callback */
+  onClick: PropTypes.func,
+  /** Internal callback for ref tracking */
+  sendRef: PropTypes.func,
+  /** Internal callback for keyboard navigation */
+  keyHandler: PropTypes.func,
+  /** Additional props are spread to the container <button> */
+  '': PropTypes.any
+};
+
+const defaultProps = {
+  className: '',
+  value: null,
+  index: 0,
+  isDisabled: false,
+  isPlaceholder: false,
+  isSelected: false,
+  onClick: Function.prototype,
+  sendRef: Function.prototype,
+  keyHandler: Function.prototype
+};
+
+class SelectOption extends React.Component {
+  ref = React.createRef();
+
+  componentDidMount() {
+    this.props.sendRef(this.ref.current, this.props.index);
+  }
+
+  onKeyDown = event => {
+    if (event.key === KeyTypes.Tab) return;
+    event.preventDefault();
+    if (event.key === KeyTypes.ArrowUp) {
+      this.props.keyHandler(this.props.index, 'up');
+    } else if (event.key === KeyTypes.ArrowDown) {
+      this.props.keyHandler(this.props.index, 'down');
+    } else if (event.key === KeyTypes.Enter) {
+      this.ref.current.click && this.ref.current.click();
+    }
+  };
+
+  render() {
+    const {
+      className,
+      value,
+      onClick,
+      isDisabled,
+      isPlaceholder,
+      isSelected,
+      sendRef,
+      keyHandler,
+      index,
+      ...props
+    } = this.props;
+    return (
+      <SelectContext.Consumer>
+        {({ onSelect, onClose }) => (
+          <li role="presentation">
+            <button
+              {...props}
+              className={css(
+                styles.selectMenuItem,
+                isSelected && styles.selectMenuItemMatch,
+                isDisabled && styles.modifiers.disabled,
+                className
+              )}
+              onClick={event => {
+                if (!isDisabled) {
+                  onClick && onClick(event);
+                  onSelect && onSelect(event, value, isPlaceholder);
+                  onClose && onClose();
+                }
+              }}
+              role="option"
+              aria-selected={isSelected || null}
+              ref={this.ref}
+              onKeyDown={this.onKeyDown}
+            >
+              {value}
+            </button>
+          </li>
+        )}
+      </SelectContext.Consumer>
+    );
+  }
+}
+
+SelectOption.propTypes = propTypes;
+SelectOption.defaultProps = defaultProps;
+
+export default SelectOption;
diff --git a/packages/patternfly-4/react-core/src/components/Select/SelectOption.test.js b/packages/patternfly-4/react-core/src/components/Select/SelectOption.test.js
new file mode 100644
index 00000000000..0d0c63544bf
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/SelectOption.test.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import SelectOption from './SelectOption';
+
+describe('select options', () => {
+  test('renders with value parameter successfully', () => {
+    const view = shallow(<SelectOption value="test" sendRef={jest.fn()} />);
+    expect(view).toMatchSnapshot();
+  });
+
+  describe('hover', () => {
+    test('renders with hover successfully', () => {
+      const view = shallow(<SelectOption isHovered value="test" sendRef={jest.fn()} />);
+      expect(view).toMatchSnapshot();
+    });
+  });
+
+  describe('disabled', () => {
+    test('renders disabled successfully', () => {
+      const view = shallow(<SelectOption isDisabled value="test" sendRef={jest.fn()} />);
+      expect(view).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/patternfly-4/react-core/src/components/Select/SelectToggle.js b/packages/patternfly-4/react-core/src/components/Select/SelectToggle.js
new file mode 100644
index 00000000000..8dc78a698a6
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/SelectToggle.js
@@ -0,0 +1,159 @@
+import React, { Component } from 'react';
+import styles from '@patternfly/patternfly/components/Select/select.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { KeyTypes } from './selectConstants';
+
+const propTypes = {
+  /** HTML ID of dropdown toggle */
+  id: PropTypes.string.isRequired,
+  /** Anything which can be rendered as dropdown toggle */
+  children: PropTypes.node,
+  /** Classes applied to root element of dropdown toggle */
+  className: PropTypes.string,
+  /** Flag to indicate if select is expanded */
+  isExpanded: PropTypes.bool,
+  /** Callback called when toggle is clicked */
+  onToggle: PropTypes.func,
+  /** Callback for toggle open on keyboard entry */
+  onEnter: PropTypes.func,
+  /** Callback for toggle close */
+  onClose: PropTypes.func,
+  /** Element which wraps toggle */
+  parentRef: PropTypes.any,
+  /** Forces focus state */
+  isFocused: PropTypes.bool,
+  /** Forces hover state */
+  isHovered: PropTypes.bool,
+  /** Forces active state */
+  isActive: PropTypes.bool,
+  /** Display the toggle with no border or background */
+  isPlain: PropTypes.bool,
+  /** Type of the toggle button, defaults to 'button' */
+  type: PropTypes.string,
+  /** Additional props are spread to the container <button> */
+  '': PropTypes.any
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  isExpanded: false,
+  parentRef: null,
+  isFocused: false,
+  isHovered: false,
+  isActive: false,
+  isPlain: false,
+  type: 'button',
+  onToggle: Function.prototype,
+  onEnter: Function.prototype,
+  onClose: Function.prototype
+};
+
+class SelectToggle extends Component {
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onDocClick);
+    document.addEventListener('touchstart', this.onDocClick);
+    document.addEventListener('keydown', this.onEscPress);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onDocClick);
+    document.removeEventListener('touchstart', this.onDocClick);
+    document.removeEventListener('keydown', this.onEscPress);
+  }
+
+  onDocClick = event => {
+    const { parentRef, isExpanded, onToggle, onClose } = this.props;
+    if (isExpanded && parentRef && !parentRef.contains(event.target)) {
+      onToggle && onToggle(false);
+      onClose && onClose();
+      this.toggle.focus();
+    }
+  };
+
+  onEscPress = event => {
+    const { parentRef, isExpanded, onToggle, onClose } = this.props;
+    if (!isExpanded && event.key === KeyTypes.Enter) this.toggle.focus();
+    if (
+      isExpanded &&
+      (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) &&
+      parentRef &&
+      parentRef.contains(event.target)
+    ) {
+      onToggle && onToggle(false);
+      onClose && onClose();
+      this.toggle.focus();
+    }
+  };
+
+  onKeyDown = event => {
+    const { isExpanded, onToggle, onClose, onEnter } = this.props;
+    if ((event.key === KeyTypes.Tab && !isExpanded) || (event.key !== KeyTypes.Enter && event.key !== KeyTypes.Space))
+      return;
+    event.preventDefault();
+    if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && isExpanded) {
+      onToggle && onToggle(!isExpanded);
+      onClose && onClose();
+      this.toggle.focus();
+    } else if ((event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && !isExpanded) {
+      onToggle(!isExpanded);
+      onEnter();
+    }
+  };
+
+  render() {
+    const {
+      className,
+      children,
+      isExpanded,
+      isFocused,
+      isActive,
+      isHovered,
+      isPlain,
+      onToggle,
+      onEnter,
+      onClose,
+      parentRef,
+      id,
+      type,
+      ...props
+    } = this.props;
+    return (
+      <button
+        {...props}
+        id={id}
+        ref={toggle => {
+          this.toggle = toggle;
+        }}
+        className={css(
+          styles.selectToggle,
+          isFocused && styles.modifiers.focus,
+          isHovered && styles.modifiers.hover,
+          isActive && styles.modifiers.active,
+          isPlain && styles.modifiers.plain,
+          className
+        )}
+        type={type}
+        onClick={_event => {
+          onToggle && onToggle(!isExpanded);
+          if (isExpanded) onClose && onClose();
+        }}
+        aria-expanded={isExpanded}
+        aria-haspopup="listbox"
+        onKeyDown={this.onKeyDown}
+      >
+        <div className={css(styles.selectToggleWrapper)}>
+          <span className={css(styles.selectToggleText)}>{children}</span>
+        </div>
+        <CaretDownIcon className={css(styles.selectToggleArrow)} />
+      </button>
+    );
+  }
+}
+
+SelectToggle.propTypes = propTypes;
+SelectToggle.defaultProps = defaultProps;
+
+export default SelectToggle;
diff --git a/packages/patternfly-4/react-core/src/components/Select/SelectToggle.test.js b/packages/patternfly-4/react-core/src/components/Select/SelectToggle.test.js
new file mode 100644
index 00000000000..83ce32c4cab
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/SelectToggle.test.js
@@ -0,0 +1,136 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import SelectToggle from './SelectToggle';
+
+describe('API', () => {
+  test('click on closed', () => {
+    const mockToggle = jest.fn();
+    const view = mount(
+      <SelectToggle id="Select Toggle" onToggle={mockToggle} parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+
+    view
+      .find('div')
+      .first()
+      .simulate('click');
+    expect(mockToggle.mock.calls[0][0]).toBe(true);
+  });
+
+  test('click on opened', () => {
+    const mockToggle = jest.fn();
+    const view = mount(
+      <SelectToggle id="Select Toggle" onToggle={mockToggle} isExpanded parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+
+    view
+      .find('div')
+      .first()
+      .simulate('click');
+    expect(mockToggle.mock.calls[0][0]).toBe(false);
+  });
+
+  test('click on document', () => {
+    const map = {};
+    document.addEventListener = jest.fn((event, cb) => {
+      map[event] = cb;
+    });
+    const mockToggle = jest.fn();
+    mount(
+      <SelectToggle id="Select Toggle" onToggle={mockToggle} isExpanded parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+
+    map.mousedown({ target: document });
+    expect(mockToggle.mock.calls[0][0]).toBe(false);
+  });
+
+  test('touch on document', () => {
+    const map = {};
+    document.addEventListener = jest.fn((event, cb) => {
+      map[event] = cb;
+    });
+    const mockToggle = jest.fn();
+    mount(
+      <SelectToggle id="Select Toggle" onToggle={mockToggle} isExpanded parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+
+    map.touchstart({ target: document });
+    expect(mockToggle.mock.calls[0][0]).toBe(false);
+  });
+
+  test('on click outside has been removed', () => {
+    const map = {};
+    document.addEventListener = jest.fn((event, cb) => {
+      map[event] = cb;
+    });
+    document.removeEventListener = jest.fn((event, cb) => {
+      if (map[event] === cb) map[event] = () => {};
+    });
+    const mockToggle = jest.fn();
+    const view = mount(
+      <SelectToggle id="Select Toggle" onToggle={mockToggle} isExpanded parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+    view.unmount();
+    map.mousedown({ target: document });
+    expect(mockToggle.mock.calls).toHaveLength(0);
+    expect(document.removeEventListener).toHaveBeenCalledWith('mousedown', expect.any(Function));
+  });
+
+  test('on touch outside has been removed', () => {
+    const map = {};
+    document.addEventListener = jest.fn((event, cb) => {
+      map[event] = cb;
+    });
+    document.removeEventListener = jest.fn((event, cb) => {
+      if (map[event] === cb) map[event] = () => {};
+    });
+    const mockToggle = jest.fn();
+    const view = mount(
+      <SelectToggle id="Select Toggle" onToggle={mockToggle} isExpanded parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+    view.unmount();
+    map.touchstart({ target: document });
+    expect(mockToggle.mock.calls).toHaveLength(0);
+    expect(document.removeEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
+  });
+});
+
+describe('state', () => {
+  test('hover', () => {
+    const view = mount(
+      <SelectToggle id="Select Toggle" isHovered parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('active', () => {
+    const view = mount(
+      <SelectToggle id="Select Toggle" isActive parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('focus', () => {
+    const view = mount(
+      <SelectToggle id="Select Toggle" isFocused parentRef={document.createElement('div')}>
+        Select
+      </SelectToggle>
+    );
+    expect(view).toMatchSnapshot();
+  });
+});
diff --git a/packages/patternfly-4/react-core/src/components/Select/SingleSelect.js b/packages/patternfly-4/react-core/src/components/Select/SingleSelect.js
new file mode 100644
index 00000000000..65ee640f042
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/SingleSelect.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import styles from '@patternfly/patternfly/components/Select/select.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import { keyHandler } from '../../helpers/util';
+
+const propTypes = {
+  /** Content rendered inside the SingleSelect */
+  children: PropTypes.node.isRequired,
+  /** Additional classes added to the SingleSelect control */
+  className: PropTypes.string,
+  /** Flag indicating the Select is expanded */
+  isExpanded: PropTypes.bool,
+  /** Internal flag indicating whether select was opened via keyboard */
+  openedOnEnter: PropTypes.bool,
+  /** Currently selected option */
+  selected: PropTypes.string,
+  /** Additional props are spread to the container <select> */
+  '': PropTypes.any
+};
+
+const defaultProps = {
+  className: '',
+  isExpanded: false,
+  openedOnEnter: false,
+  selected: ''
+};
+
+class SingleSelect extends React.Component {
+  refCollection = [];
+
+  componentDidMount() {
+    if (this.props.openedOnEnter) {
+      const selectedRef = this.refCollection.filter(ref => ref.classList.contains('pf-c-select__menu-item--match'));
+      selectedRef && selectedRef[0] ? selectedRef[0].focus() : this.refCollection[0].focus();
+    }
+  }
+
+  extendChildren() {
+    return React.Children.map(this.props.children, (child, index) =>
+      React.cloneElement(child, {
+        isSelected: this.props.selected === child.props.value,
+        sendRef: this.sendRef,
+        keyHandler: this.childKeyHandler,
+        index
+      })
+    );
+  }
+
+  sendRef = (ref, index) => {
+    this.refCollection[index] = ref;
+  };
+
+  childKeyHandler = (index, position) => {
+    keyHandler(index, position, this.refCollection, this.props.children);
+  };
+
+  render() {
+    const { children, className, isExpanded, openedOnEnter, selected, ...props } = this.props;
+    this.renderedChildren = this.extendChildren();
+    return (
+      <ul {...props} className={css(styles.selectMenu, className)} role="listbox">
+        {this.renderedChildren}
+      </ul>
+    );
+  }
+}
+
+SingleSelect.propTypes = propTypes;
+SingleSelect.defaultProps = defaultProps;
+
+export default SingleSelect;
diff --git a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.js.snap b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.js.snap
new file mode 100644
index 00000000000..f7d0fa48a4a
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.js.snap
@@ -0,0 +1,463 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`select single select renders closed successfully 1`] = `
+.pf-c-select__toggle-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-select__toggle-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: calc(100% - 1.5rem);
+  white-space: normal;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 44px;
+  max-width: 100%;
+  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #ffffff;
+}
+.pf-c-select {
+  display: inline-block;
+  color: #282d33;
+  position: relative;
+  max-width: 100%;
+}
+
+<Select
+  ariaLabelledBy=""
+  className=""
+  isExpanded={false}
+  onSelect={[MockFunction]}
+  onToggle={[MockFunction]}
+  placeholderText={null}
+  selections={null}
+  variant="single"
+  width="100%"
+>
+  <div
+    className="pf-c-select"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <SelectToggle
+      aria-labelledby=" pf-toggle-id-0"
+      className=""
+      id="pf-toggle-id-0"
+      isActive={false}
+      isExpanded={false}
+      isFocused={false}
+      isHovered={false}
+      isPlain={false}
+      onClose={[Function]}
+      onEnter={[Function]}
+      onToggle={[MockFunction]}
+      parentRef={null}
+      style={
+        Object {
+          "width": "100%",
+        }
+      }
+      type="button"
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        aria-labelledby=" pf-toggle-id-0"
+        className="pf-c-select__toggle"
+        id="pf-toggle-id-0"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        style={
+          Object {
+            "width": "100%",
+          }
+        }
+        type="button"
+      >
+        <div
+          className="pf-c-select__toggle-wrapper"
+        >
+          <span
+            className="pf-c-select__toggle-text"
+          >
+            Mr
+          </span>
+        </div>
+        <CaretDownIcon
+          className="pf-c-select__toggle-arrow"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-select__toggle-arrow"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </SelectToggle>
+  </div>
+</Select>
+`;
+
+exports[`select single select renders expanded successfully 1`] = `
+.pf-c-select__toggle-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-select__toggle-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: calc(100% - 1.5rem);
+  white-space: normal;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 44px;
+  max-width: 100%;
+  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #ffffff;
+}
+.pf-c-select__menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  text-align: left;
+  white-space: nowrap;
+  background-color: #ededed;
+  text-decoration: none;
+}
+.pf-c-select__menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  text-align: left;
+  white-space: nowrap;
+  background-color: #ededed;
+  text-decoration: none;
+}
+.pf-c-select__menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  text-align: left;
+  white-space: nowrap;
+  background-color: #ededed;
+  text-decoration: none;
+}
+.pf-c-select__menu-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  text-align: left;
+  white-space: nowrap;
+  background-color: #ededed;
+  text-decoration: none;
+}
+.pf-c-select__menu {
+  display: block;
+  position: absolute;
+  z-index: 100;
+  min-width: 100%;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #ffffff;
+  background-clip: padding-box;
+  border: 1px solid transparent;
+  box-shadow: 0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06);
+}
+.pf-c-select.pf-m-expanded {
+  display: inline-block;
+  color: #282d33;
+  position: relative;
+  max-width: 100%;
+}
+
+<Select
+  ariaLabelledBy=""
+  className=""
+  isExpanded={true}
+  onSelect={[MockFunction]}
+  onToggle={[MockFunction]}
+  placeholderText={null}
+  selections={null}
+  variant="single"
+  width="100%"
+>
+  <div
+    className="pf-c-select pf-m-expanded"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <SelectToggle
+      aria-labelledby=" pf-toggle-id-1"
+      className=""
+      id="pf-toggle-id-1"
+      isActive={false}
+      isExpanded={true}
+      isFocused={false}
+      isHovered={false}
+      isPlain={false}
+      onClose={[Function]}
+      onEnter={[Function]}
+      onToggle={[MockFunction]}
+      parentRef={null}
+      style={
+        Object {
+          "width": "100%",
+        }
+      }
+      type="button"
+    >
+      <button
+        aria-expanded={true}
+        aria-haspopup="listbox"
+        aria-labelledby=" pf-toggle-id-1"
+        className="pf-c-select__toggle"
+        id="pf-toggle-id-1"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        style={
+          Object {
+            "width": "100%",
+          }
+        }
+        type="button"
+      >
+        <div
+          className="pf-c-select__toggle-wrapper"
+        >
+          <span
+            className="pf-c-select__toggle-text"
+          >
+            Mr
+          </span>
+        </div>
+        <CaretDownIcon
+          className="pf-c-select__toggle-arrow"
+          color="currentColor"
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-c-select__toggle-arrow"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              transform=""
+            />
+          </svg>
+        </CaretDownIcon>
+      </button>
+    </SelectToggle>
+    <SingleSelect
+      aria-labelledby=""
+      className=""
+      isExpanded={false}
+      openedOnEnter={false}
+      selected={null}
+    >
+      <ul
+        aria-labelledby=""
+        className="pf-c-select__menu"
+        role="listbox"
+      >
+        <SelectOption
+          className=""
+          index={0}
+          isDisabled={false}
+          isPlaceholder={false}
+          isSelected={false}
+          key=".$0"
+          keyHandler={[Function]}
+          onClick={[Function]}
+          sendRef={[Function]}
+          value="Mr"
+        >
+          <li
+            role="presentation"
+          >
+            <button
+              aria-selected={null}
+              className="pf-c-select__menu-item"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="option"
+            >
+              Mr
+            </button>
+          </li>
+        </SelectOption>
+        <SelectOption
+          className=""
+          index={1}
+          isDisabled={false}
+          isPlaceholder={false}
+          isSelected={false}
+          key=".$1"
+          keyHandler={[Function]}
+          onClick={[Function]}
+          sendRef={[Function]}
+          value="Mrs"
+        >
+          <li
+            role="presentation"
+          >
+            <button
+              aria-selected={null}
+              className="pf-c-select__menu-item"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="option"
+            >
+              Mrs
+            </button>
+          </li>
+        </SelectOption>
+        <SelectOption
+          className=""
+          index={2}
+          isDisabled={false}
+          isPlaceholder={false}
+          isSelected={false}
+          key=".$2"
+          keyHandler={[Function]}
+          onClick={[Function]}
+          sendRef={[Function]}
+          value="Ms"
+        >
+          <li
+            role="presentation"
+          >
+            <button
+              aria-selected={null}
+              className="pf-c-select__menu-item"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="option"
+            >
+              Ms
+            </button>
+          </li>
+        </SelectOption>
+        <SelectOption
+          className=""
+          index={3}
+          isDisabled={false}
+          isPlaceholder={false}
+          isSelected={false}
+          key=".$3"
+          keyHandler={[Function]}
+          onClick={[Function]}
+          sendRef={[Function]}
+          value="Other"
+        >
+          <li
+            role="presentation"
+          >
+            <button
+              aria-selected={null}
+              className="pf-c-select__menu-item"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="option"
+            >
+              Other
+            </button>
+          </li>
+        </SelectOption>
+      </ul>
+    </SingleSelect>
+  </div>
+</Select>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectOption.test.js.snap b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectOption.test.js.snap
new file mode 100644
index 00000000000..2ea7e0096b7
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectOption.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`select options disabled renders disabled successfully 1`] = `<[object Object] />`;
+
+exports[`select options hover renders with hover successfully 1`] = `<[object Object] />`;
+
+exports[`select options renders with value parameter successfully 1`] = `<[object Object] />`;
diff --git a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectToggle.test.js.snap b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectToggle.test.js.snap
new file mode 100644
index 00000000000..5d2d43e0e5e
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectToggle.test.js.snap
@@ -0,0 +1,304 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`state active 1`] = `
+.pf-c-select__toggle-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-select__toggle-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: calc(100% - 1.5rem);
+  white-space: normal;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle.pf-m-active {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 44px;
+  max-width: 100%;
+  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #ffffff;
+}
+
+<SelectToggle
+  className=""
+  id="Select Toggle"
+  isActive={true}
+  isExpanded={false}
+  isFocused={false}
+  isHovered={false}
+  isPlain={false}
+  onClose={[Function]}
+  onEnter={[Function]}
+  onToggle={[Function]}
+  parentRef={<div />}
+  type="button"
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    className="pf-c-select__toggle pf-m-active"
+    id="Select Toggle"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <div
+      className="pf-c-select__toggle-wrapper"
+    >
+      <span
+        className="pf-c-select__toggle-text"
+      >
+        Select
+      </span>
+    </div>
+    <CaretDownIcon
+      className="pf-c-select__toggle-arrow"
+      color="currentColor"
+      size="sm"
+      title={null}
+    >
+      <svg
+        aria-hidden={true}
+        aria-labelledby={null}
+        className="pf-c-select__toggle-arrow"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style={
+          Object {
+            "verticalAlign": "-0.125em",
+          }
+        }
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          transform=""
+        />
+      </svg>
+    </CaretDownIcon>
+  </button>
+</SelectToggle>
+`;
+
+exports[`state focus 1`] = `
+.pf-c-select__toggle-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-select__toggle-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: calc(100% - 1.5rem);
+  white-space: normal;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle.pf-m-focus {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 44px;
+  max-width: 100%;
+  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #ffffff;
+}
+
+<SelectToggle
+  className=""
+  id="Select Toggle"
+  isActive={false}
+  isExpanded={false}
+  isFocused={true}
+  isHovered={false}
+  isPlain={false}
+  onClose={[Function]}
+  onEnter={[Function]}
+  onToggle={[Function]}
+  parentRef={<div />}
+  type="button"
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    className="pf-c-select__toggle pf-m-focus"
+    id="Select Toggle"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <div
+      className="pf-c-select__toggle-wrapper"
+    >
+      <span
+        className="pf-c-select__toggle-text"
+      >
+        Select
+      </span>
+    </div>
+    <CaretDownIcon
+      className="pf-c-select__toggle-arrow"
+      color="currentColor"
+      size="sm"
+      title={null}
+    >
+      <svg
+        aria-hidden={true}
+        aria-labelledby={null}
+        className="pf-c-select__toggle-arrow"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style={
+          Object {
+            "verticalAlign": "-0.125em",
+          }
+        }
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          transform=""
+        />
+      </svg>
+    </CaretDownIcon>
+  </button>
+</SelectToggle>
+`;
+
+exports[`state hover 1`] = `
+.pf-c-select__toggle-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-select__toggle-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: calc(100% - 1.5rem);
+  white-space: normal;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle-arrow {
+  display: block;
+}
+.pf-c-select__toggle.pf-m-hover {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 44px;
+  max-width: 100%;
+  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #282d33;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #ffffff;
+}
+
+<SelectToggle
+  className=""
+  id="Select Toggle"
+  isActive={false}
+  isExpanded={false}
+  isFocused={false}
+  isHovered={true}
+  isPlain={false}
+  onClose={[Function]}
+  onEnter={[Function]}
+  onToggle={[Function]}
+  parentRef={<div />}
+  type="button"
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    className="pf-c-select__toggle pf-m-hover"
+    id="Select Toggle"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    type="button"
+  >
+    <div
+      className="pf-c-select__toggle-wrapper"
+    >
+      <span
+        className="pf-c-select__toggle-text"
+      >
+        Select
+      </span>
+    </div>
+    <CaretDownIcon
+      className="pf-c-select__toggle-arrow"
+      color="currentColor"
+      size="sm"
+      title={null}
+    >
+      <svg
+        aria-hidden={true}
+        aria-labelledby={null}
+        className="pf-c-select__toggle-arrow"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style={
+          Object {
+            "verticalAlign": "-0.125em",
+          }
+        }
+        viewBox="0 0 320 512"
+        width="1em"
+      >
+        <path
+          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          transform=""
+        />
+      </svg>
+    </CaretDownIcon>
+  </button>
+</SelectToggle>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/Select/examples/SingleSelectInput.js b/packages/patternfly-4/react-core/src/components/Select/examples/SingleSelectInput.js
new file mode 100644
index 00000000000..93d801ac29c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/examples/SingleSelectInput.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+
+class SingleSelectInput extends React.Component {
+  options = [
+    { value: 'Choose...', disabled: false, isPlaceholder: true },
+    { value: 'Mr', disabled: false },
+    { value: 'Miss', disabled: false },
+    { value: 'Mrs', disabled: false },
+    { value: 'Ms', disabled: false },
+    { value: 'Dr', disabled: false },
+    { value: 'Other', disabled: false }
+  ];
+
+  state = {
+    isExpanded: false,
+    selected: null
+  };
+
+  onToggle = isExpanded => {
+    this.setState({
+      isExpanded
+    });
+  };
+
+  onSelect = (event, selection, isPlaceholder) => {
+    if (isPlaceholder) this.clearSelection();
+    else {
+      this.setState({
+        selected: selection,
+        isExpanded: false
+      });
+      console.log('selected:', selection);
+    }
+  };
+
+  clearSelection = () => {
+    this.setState({
+      selected: null,
+      isExpanded: false
+    });
+  };
+
+  render() {
+    const { isExpanded, selected } = this.state;
+    const titleId = 'title-id';
+    return (
+      <div>
+        <span id={titleId} hidden>
+          Title
+        </span>
+        <Select
+          variant={SelectVariant.single}
+          aria-label="Select Input"
+          onToggle={this.onToggle}
+          onSelect={this.onSelect}
+          selections={selected}
+          isExpanded={isExpanded}
+          ariaLabelledBy={titleId}
+        >
+          {this.options.map((option, index) => (
+            <SelectOption
+              isDisabled={option.disabled}
+              key={index}
+              value={option.value}
+              isPlaceholder={option.isPlaceholder}
+            />
+          ))}
+        </Select>
+      </div>
+    );
+  }
+}
+
+export default SingleSelectInput;
diff --git a/packages/patternfly-4/react-core/src/components/Select/index.d.ts b/packages/patternfly-4/react-core/src/components/Select/index.d.ts
new file mode 100644
index 00000000000..4f20d26eba2
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/index.d.ts
@@ -0,0 +1,2 @@
+export { default as Select, SelectProps, SelectVariant } from './Select';
+export { default as SelectOption, SelectOptionProps } from './SelectOption';
diff --git a/packages/patternfly-4/react-core/src/components/Select/index.js b/packages/patternfly-4/react-core/src/components/Select/index.js
new file mode 100644
index 00000000000..6f754d7cbae
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/index.js
@@ -0,0 +1,3 @@
+export { default as Select } from './Select';
+export { default as SelectOption } from './SelectOption';
+export { SelectContext, SelectVariant } from './selectConstants';
diff --git a/packages/patternfly-4/react-core/src/components/Select/selectConstants.js b/packages/patternfly-4/react-core/src/components/Select/selectConstants.js
new file mode 100644
index 00000000000..78d2291183c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Select/selectConstants.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const SelectContext = React.createContext({
+  onSelect: () => {},
+  onClose: () => {}
+});
+
+export const SelectVariant = {
+  single: 'single'
+};
+
+export const KeyTypes = {
+  Tab: 'Tab',
+  Space: ' ',
+  Escape: 'Escape',
+  Enter: 'Enter',
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown'
+};
diff --git a/packages/patternfly-4/react-core/src/components/index.ts b/packages/patternfly-4/react-core/src/components/index.ts
index 3ad580c7a80..0e3d059fdd8 100644
--- a/packages/patternfly-4/react-core/src/components/index.ts
+++ b/packages/patternfly-4/react-core/src/components/index.ts
@@ -26,6 +26,7 @@ export * from './Page';
 export * from './Popover';
 export * from './Progress';
 export * from './Radio';
+export * from './Select';
 export * from './Switch';
 export * from './Tabs';
 export * from './Text';
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx
index 70bfc1bcc89..c91390ea2a8 100755
--- a/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx
@@ -8,7 +8,10 @@ import {
   Alert,
   AlertActionCloseButton,
   AlertActionLink,
-  AlertVariant
+  AlertVariant,
+  Select,
+  SelectOption,
+  SelectVariant
 } from '@patternfly/react-core';
 import React, { Component } from 'react';
 import logo from './logo.svg';
@@ -20,7 +23,27 @@ class myProps implements AvatarProps {
 }
 
 class App extends Component {
+  state = {
+    isExpanded: false,
+    selected: 'Placeholder text'
+  };
+
+  onToggle = isExpanded => {
+    this.setState({
+      isExpanded
+    });
+  };
+
+  onSelect = event => {
+    this.setState({
+      selected: event.target.innerHTML,
+      isExpanded: false
+    });
+    console.log('selected:', event.target.innerHTML);
+  };
+
   render() {
+    const { isExpanded, selected } = this.state;
     return (
       <div className="App">
         <header className="App-header">
@@ -54,6 +77,17 @@ class App extends Component {
           action={<AlertActionLink>Action Button</AlertActionLink>}
         />
         <Alert variant="success" title="Success notification title" />
+        <Select
+          variant={SelectVariant.single}
+          onToggle={this.onToggle}
+          onSelect={this.onSelect}
+          selections={selected}
+          isExpanded={isExpanded}
+        >
+          <SelectOption value="option 1" />
+          <SelectOption value="option 2" />
+          <SelectOption value="option 3" />
+        </Select>
       </div>
     );
   }