diff --git a/.changeset/few-bugs-promise.md b/.changeset/few-bugs-promise.md
new file mode 100644
index 0000000000..57bbff1794
--- /dev/null
+++ b/.changeset/few-bugs-promise.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/select': major
+---
+
+Initial release of Select component
diff --git a/.changeset/wet-hotels-listen.md b/.changeset/wet-hotels-listen.md
new file mode 100644
index 0000000000..c1cb1b23c3
--- /dev/null
+++ b/.changeset/wet-hotels-listen.md
@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/button': minor
+---
+
+- The default outline shown by the browser is no longer shown when a button is focused. Instead, a custom interaction ring will be displayed that conforms to LeafyGreen-UI style guidelines whenever the button is hovered or focused.
+- Button now has a `darkMode` prop which for now only controls the interaction ring color.
+- Button now has a `focused` prop which can be used to force the button to display as focused or unfocused.
diff --git a/README.md b/README.md
index c41d3d2c3c..6f622e1e0b 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ A set of CSS styles and React components built with design in mind.
 - [Portal](https://github.com/mongodb/leafygreen-ui/tree/master/packages/portal)
 - [Radio Box Group](https://github.com/mongodb/leafygreen-ui/tree/master/packages/radio-box-group)
 - [Radio Group](https://github.com/mongodb/leafygreen-ui/tree/master/packages/radio-group)
+- [Select](https://github.com/mongodb/leafygreen-ui/tree/master/packages/select)
 - [Side Nav](https://github.com/mongodb/leafygreen-ui/tree/master/packages/side-nav)
 - [Stepper](https://github.com/mongodb/leafygreen-ui/tree/master/packages/stepper)
 - [Syntax](https://github.com/mongodb/leafygreen-ui/tree/master/packages/syntax)
diff --git a/babel.config.js b/babel.config.js
index f070543bf1..6970b6d894 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -21,6 +21,7 @@ module.exports = function (api) {
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-logical-assignment-operators',
     'emotion',
   ];
 
diff --git a/build.tsconfig.json b/build.tsconfig.json
index b0bdd2f18e..9693952e61 100644
--- a/build.tsconfig.json
+++ b/build.tsconfig.json
@@ -86,6 +86,9 @@
     {
       "path": "./packages/radio-group"
     },
+    {
+      "path": "./packages/select"
+    },
     {
       "path": "./packages/side-nav"
     },
diff --git a/package.json b/package.json
index d6933d124b..fc3505f159 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@babel/plugin-proposal-class-properties": "7.8.3",
     "@babel/plugin-proposal-export-default-from": "7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
+    "@babel/plugin-proposal-logical-assignment-operators": "7.12.1",
     "@babel/plugin-proposal-object-rest-spread": "7.9.5",
     "@babel/plugin-proposal-optional-chaining": "7.9.0",
     "@babel/plugin-transform-react-jsx": "^7.9.4",
diff --git a/packages/select/README.md b/packages/select/README.md
new file mode 100644
index 0000000000..5f29ae3e7c
--- /dev/null
+++ b/packages/select/README.md
@@ -0,0 +1,133 @@
+# Select
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/select.svg)
+
+#### [View on Storybook](https://mongodb.github.io/leafygreen-ui/?path=/story/select--default)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/select
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/select
+```
+
+## Example
+
+```js
+import { Option, OptionGroup, Select, Size } from '@leafygreen-ui/select';
+
+<Select
+  label="Label"
+  description="Description"
+  placeholder="Placeholder"
+  name="Name"
+  size={Size.Default}
+  defaultValue="cat"
+>
+  <Option value="dog">Dog</Option>
+  <Option value="cat">Cat</Option>
+  <OptionGroup label="Less common">
+    <Option value="hamster">Hamster</Option>
+    <Option value="parrot">Parrot</Option>
+  </OptionGroup>
+</Select>;
+```
+
+**Output HTML**
+
+```html
+<div class="">
+  <label id="select-7-label" class="leafygreen-ui-xzhurf">Label</label>
+  <div id="select-7-description" class="leafygreen-ui-3gds6m">Description</div>
+  <button
+    type="button"
+    class="leafygreen-ui-1fdrra0"
+    aria-disabled="false"
+    role="combobox"
+    aria-labelledby="select-7-label"
+    aria-controls="select-7-menu"
+    aria-expanded="false"
+    aria-describedby="select-7-description"
+    name="Name"
+    value="cat"
+  >
+    <span class="leafygreen-ui-tdo6z2"
+      ><div class="leafygreen-ui-ogsjyj">
+        <span class="leafygreen-ui-1ks3bq2">Cat</span
+        ><svg
+          class="leafygreen-ui-msi0rg"
+          height="16"
+          width="16"
+          viewBox="0 0 16 16"
+          role="img"
+          aria-labelledby="CaretDown-7"
+        >
+          <title id="CaretDown-7">Caret Down Icon</title>
+          <desc>Created with Sketch.</desc>
+          <g
+            id="CaretDown-Copy"
+            stroke="none"
+            stroke-width="1"
+            fill="none"
+            fill-rule="evenodd"
+          >
+            <path
+              d="M4.67285687,6 L11.3271431,6 C11.9254697,6 12.224633,6.775217 11.8024493,7.22717749 L8.47530616,10.7889853 C8.21248981,11.0703382 7.78751019,11.0703382 7.52748976,10.7889853 L4.19755071,7.22717749 C3.77536701,6.775217 4.07453029,6 4.67285687,6 Z"
+              id="Path"
+              fill="currentColor"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div></div
+    ></span>
+  </button>
+</div>
+```
+
+## Select Properties
+
+| Prop        | Type                                                | Description                                                       | Default     |
+| ----------- | --------------------------------------------------- | ----------------------------------------------------------------- | ----------- |
+| `children`  | `node`                                              | `<Option />` and `<OptionGroup />` elements.                      |             |
+| `className` | `string`                                            | Adds a className to the outermost element.                        |             |
+| `darkMode`  | `boolean`                                           | Determines whether or not the component will appear in dark mode. | `false`     |
+| `size`      | `'xsmall'` \| `'small'` \| `'default'` \| `'large'` | Sets the size of the component's elements.                        | `'default'` |
+| `id`        | `string`                                            | id associated with the Select component.                          |             |
+| `name`      | `string`                                            | The name that will be used when submitted as part of a form.      |
+
+| `label` | `string` | Text shown in bold above the input element. | |
+| `aria-labelledby` | `string` | Must be provided if and only if `label` is not provided. | |
+| `description` | `string` | Text that gives more detail about the requirements for the input. | |
+| `placeholder` | `string` | The placeholder text shown in the input element when an option is not selected. | `'Select'` |
+| `disabled` | `boolean` | Disables the component from being edited. | `false` |
+| `value` | `string` | Sets the `<Option />` that will appear selected and makes the component a controlled component. | `''` |
+| `defaultValue` | `string` | Sets the `<Option />` that will appear selected on page load when the component is uncontrolled. | `''` |
+| `onChange` | `function` | A function that gets called when the selected value changes. Receives the value string as the first argument. | `() => {}` |
+| `readOnly` | `boolean` | Disables the console warning when the component is controlled and no `onChange` prop is provided. | `false` |
+
+# Option
+
+| Prop        | Type                 | Description                                                                                           | Default                     |
+| ----------- | -------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------- |
+| `children`  | `node`               | Content to appear inside of the component.                                                            |                             |
+| `className` | `string`             | Adds a className to the outermost element.                                                            |                             |
+| `glyph`     | `React.ReactElement` | Icon to display next to the option text.                                                              |                             |
+| `value`     | `string`             | Corresponds to the value passed into the `onChange` prop of `<Select />` when the option is selected. | text contents of `children` |
+| `disabled`  | `boolean`            | Prevents the option from being selectable.                                                            | `false`                     |
+
+# OptionGroup
+
+| Prop        | Type      | Description                                               | Default |
+| ----------- | --------- | --------------------------------------------------------- | ------- |
+| `children`  | `node`    | `<Option />` elements                                     |         |
+| `className` | `string`  | Adds a className to the outermost element.                |         |
+| `label`     | `string`  | Text shown above the group's options.                     |         |
+| `disabled`  | `boolean` | Prevents all the contained options from being selectable. | `false` |
diff --git a/packages/select/package.json b/packages/select/package.json
new file mode 100644
index 0000000000..31a9bc4c8b
--- /dev/null
+++ b/packages/select/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@leafygreen-ui/select",
+  "version": "0.9.0",
+  "description": "leafyGreen UI Kit Select",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "<3.9": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "../../node_modules/.bin/rollup --config ../../rollup.config.js"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/button": "^10.0.0",
+    "@leafygreen-ui/emotion": "^3.0.1",
+    "@leafygreen-ui/hooks": "^6.0.0",
+    "@leafygreen-ui/icon": "^7.0.2",
+    "@leafygreen-ui/lib": "^6.1.2",
+    "@leafygreen-ui/palette": "^3.1.0",
+    "@leafygreen-ui/popover": "^7.1.0",
+    "@leafygreen-ui/tokens": "0.5.0",
+    "@types/react-is": "^17.0.0",
+    "polished": "^4.0.3",
+    "react-is": "^17.0.1"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "^2.0.1"
+  }
+}
diff --git a/packages/select/src/ListMenu.tsx b/packages/select/src/ListMenu.tsx
new file mode 100644
index 0000000000..49a5648f80
--- /dev/null
+++ b/packages/select/src/ListMenu.tsx
@@ -0,0 +1,154 @@
+import React, { useCallback, useContext } from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { useViewportSize } from '@leafygreen-ui/hooks';
+import { keyMap } from '@leafygreen-ui/lib';
+import Popover, { Align, Justify } from '@leafygreen-ui/popover';
+import { breakpoints } from '@leafygreen-ui/tokens';
+import SelectContext from './SelectContext';
+import { colorSets, mobileSizeSet, sizeSets } from './styleSets';
+import { useForwardedRef } from './utils';
+
+const menuStyle = css`
+  position: relative;
+  width: 100%;
+  border-radius: 3px;
+  line-height: 16px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+`;
+
+interface ListMenuProps {
+  children: React.ReactNode;
+  id: string;
+  referenceElement: React.MutableRefObject<HTMLElement | null>;
+  onClose: () => void;
+  onSelectFocusedOption: React.KeyboardEventHandler;
+  onFocusPreviousOption: () => void;
+  onFocusNextOption: () => void;
+  className?: string;
+}
+
+const ListMenu = React.forwardRef<HTMLUListElement, ListMenuProps>(
+  function ListMenu(
+    {
+      children,
+      id,
+      referenceElement,
+      onClose,
+      onFocusPreviousOption,
+      onFocusNextOption,
+      onSelectFocusedOption,
+      className,
+    }: ListMenuProps,
+    forwardedRef,
+  ) {
+    const { mode, size, disabled, open } = useContext(SelectContext);
+
+    const colorSet = colorSets[mode];
+    const sizeSet = sizeSets[size];
+
+    const ref = useForwardedRef(forwardedRef, null);
+
+    const onKeyDown = useCallback(
+      (event: React.KeyboardEvent) => {
+        // No support for modifiers yet
+        /* istanbul ignore if */
+        if (event.ctrlKey || event.shiftKey || event.altKey) {
+          return;
+        }
+
+        let bubble = false;
+
+        switch (event.keyCode) {
+          case keyMap.Tab:
+          case keyMap.Enter:
+            onSelectFocusedOption(event);
+            break;
+          case keyMap.Escape:
+            onClose();
+            break;
+          case keyMap.ArrowUp:
+            onFocusPreviousOption();
+            break;
+          case keyMap.ArrowDown:
+            onFocusNextOption();
+            break;
+          /* istanbul ignore next */
+          default:
+            bubble = true;
+        }
+
+        /* istanbul ignore else */
+        if (!bubble) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      [
+        onClose,
+        onFocusNextOption,
+        onFocusPreviousOption,
+        onSelectFocusedOption,
+      ],
+    );
+
+    const viewportSize = useViewportSize();
+
+    const maxHeight =
+      viewportSize === null || ref.current === null
+        ? 0
+        : viewportSize.height - ref.current.getBoundingClientRect().top - 10;
+
+    const onClick = useCallback(
+      (event: React.MouseEvent) => {
+        if (ref.current) {
+          ref.current.focus();
+        }
+        event.stopPropagation();
+      },
+      [ref],
+    );
+
+    return (
+      <Popover
+        active={open && !disabled}
+        spacing={4}
+        align={Align.Bottom}
+        justify={Justify.Middle}
+        adjustOnMutation
+        className={className}
+        refEl={referenceElement}
+      >
+        <ul
+          role="listbox"
+          ref={ref}
+          tabIndex={-1}
+          onKeyDown={onKeyDown}
+          onClick={onClick}
+          className={cx(
+            menuStyle,
+            css`
+              font-size: ${sizeSet.option.text}px;
+              max-height: ${maxHeight}px;
+              background-color: ${colorSet.option.background.base};
+              box-shadow: 0 3px 7px 0 ${colorSet.menu.shadow};
+
+              @media only screen and (max-width: ${breakpoints.Desktop}px) {
+                font-size: ${mobileSizeSet.option.text}px;
+              }
+            `,
+          )}
+          id={id}
+        >
+          {children}
+        </ul>
+      </Popover>
+    );
+  },
+);
+
+ListMenu.displayName = 'ListMenu';
+
+export default ListMenu;
diff --git a/packages/select/src/MenuButton.tsx b/packages/select/src/MenuButton.tsx
new file mode 100644
index 0000000000..31b8dd67d4
--- /dev/null
+++ b/packages/select/src/MenuButton.tsx
@@ -0,0 +1,206 @@
+import React, { useCallback, useContext, useMemo } from 'react';
+import Button, { Variant } from '@leafygreen-ui/button';
+import { css, cx } from '@leafygreen-ui/emotion';
+import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
+import { keyMap } from '@leafygreen-ui/lib';
+import { breakpoints } from '@leafygreen-ui/tokens';
+import { colorSets, mobileSizeSet, Mode, sizeSets } from './styleSets';
+import SelectContext from './SelectContext';
+import { useForwardedRef } from './utils';
+
+const menuButtonStyle = css`
+  margin-top: 2px;
+
+  // reset default Button padding
+  > span {
+    padding: 0;
+  }
+`;
+
+const menuButtonContentsStyle = css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+`;
+
+const menuButtonTextStyle = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const caretIconStyle = css`
+  min-width: 16px;
+`;
+
+type Props = {
+  children: React.ReactNode;
+  value: string;
+  text: React.ReactNode;
+  name?: string;
+  deselected: boolean;
+  readOnly?: boolean;
+  onFocusFirstOption: () => void;
+  onFocusLastOption: () => void;
+  onDeselect: React.KeyboardEventHandler;
+  onClose: () => void;
+  onOpen: () => void;
+} & Required<
+  Pick<
+    JSX.IntrinsicElements['div'],
+    'aria-labelledby' | 'aria-controls' | 'aria-expanded' | 'aria-describedby'
+  >
+>;
+
+const MenuButton = React.forwardRef<HTMLElement, Props>(function MenuButton(
+  {
+    children,
+    value,
+    text,
+    name,
+    deselected,
+    readOnly,
+    onDeselect,
+    onFocusFirstOption,
+    onFocusLastOption,
+    onClose,
+    onOpen,
+    ...ariaProps
+  }: Props,
+  forwardedRef,
+) {
+  const { mode, size, open, disabled } = useContext(SelectContext);
+
+  const ref = useForwardedRef(forwardedRef, null);
+
+  const colorSet = colorSets[mode];
+  const sizeSet = sizeSets[size];
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      /* istanbul ignore if */
+      if (event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+
+      let bubble = false;
+
+      switch (event.keyCode) {
+        case keyMap.Tab:
+          onClose();
+          bubble = true;
+          break;
+        case keyMap.Escape:
+          if (open) {
+            onClose();
+          } else {
+            onDeselect(event);
+          }
+          break;
+        case keyMap.ArrowUp:
+          onOpen();
+          onFocusLastOption();
+          break;
+        case keyMap.ArrowDown:
+          onOpen();
+          onFocusFirstOption();
+          break;
+        /* istanbul ignore next */
+        default:
+          bubble = true;
+      }
+
+      if (!bubble) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [
+      disabled,
+      onClose,
+      onDeselect,
+      onFocusFirstOption,
+      onFocusLastOption,
+      onOpen,
+      open,
+    ],
+  );
+
+  const onClick = useCallback(() => {
+    if (open) {
+      onClose();
+    } else {
+      onOpen();
+    }
+    ref.current!.focus();
+  }, [onClose, onOpen, open, ref]);
+
+  const forceState = useMemo(() => {
+    if (open && !disabled) {
+      return { focused: true, active: true };
+    }
+  }, [open, disabled]);
+
+  return (
+    <Button
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role="combobox"
+      {...ariaProps}
+      ref={ref}
+      name={name}
+      value={value}
+      disabled={disabled}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      variant={mode === Mode.Dark ? Variant.Dark : Variant.Default}
+      darkMode={mode === Mode.Dark}
+      forceState={forceState}
+      className={cx(
+        menuButtonStyle,
+        css`
+          height: ${sizeSet.height}px;
+          width: ${sizeSet.width}px;
+          font-size: ${sizeSet.text}px;
+          color: ${deselected ? colorSet.text.deselected : colorSet.text.base};
+          border-color: ${open && !disabled
+            ? colorSet.border.open
+            : colorSet.border.base};
+
+          @media only screen and (max-width: ${breakpoints.Desktop}px) {
+            height: ${mobileSizeSet.height}px;
+            width: ${mobileSizeSet.width}px;
+            font-size: ${mobileSizeSet.text}px;
+          }
+        `,
+        {
+          [css`
+            // Displays the active state defined by <Button />
+            &:after {
+              opacity: 1;
+            }
+          `]: open && !disabled,
+          [css`
+            color: ${colorSet.text.disabled};
+          `]: disabled,
+        },
+      )}
+    >
+      <div className={menuButtonContentsStyle}>
+        <span className={menuButtonTextStyle}>{text}</span>
+        <CaretDownIcon aria-hidden className={caretIconStyle} />
+      </div>
+      {children}
+    </Button>
+  );
+});
+
+MenuButton.displayName = 'MenuButton';
+
+export default MenuButton;
diff --git a/packages/select/src/Option.tsx b/packages/select/src/Option.tsx
new file mode 100644
index 0000000000..ac4b1a03ec
--- /dev/null
+++ b/packages/select/src/Option.tsx
@@ -0,0 +1,274 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { usePrevious } from '@leafygreen-ui/hooks';
+import CheckmarkIcon from '@leafygreen-ui/icon/dist/Checkmark';
+import { LGGlyph } from '@leafygreen-ui/icon/src/types';
+import { colorSets } from './styleSets';
+import SelectContext from './SelectContext';
+
+type GlyphElement = React.ReactElement<LGGlyph.ComponentProps> & {
+  type?: { isGlyph?: boolean };
+};
+
+export type ReactEmpty = null | undefined | false | '';
+
+const optionStyle = css`
+  display: flex;
+  width: 100%;
+  padding: 10px 12px;
+  outline: none;
+  overflow-wrap: anywhere;
+  transition: background-color 150ms ease-in-out;
+`;
+
+const optionTextStyle = css`
+  display: flex;
+  align-items: center;
+`;
+
+const iconStyle = css`
+  min-width: 16px;
+  margin-right: 6px;
+`;
+
+export interface InternalProps {
+  children: React.ReactNode;
+  className: string | undefined;
+  glyph: GlyphElement | undefined;
+  selected: boolean;
+  focused: boolean;
+  disabled: boolean;
+  onClick: React.MouseEventHandler;
+  onFocus: React.FocusEventHandler;
+  isDeselection: boolean;
+  hasGlyphs: boolean;
+  triggerScrollIntoView: boolean;
+}
+
+export function InternalOption({
+  children,
+  className,
+  glyph,
+  selected,
+  focused,
+  disabled,
+  onClick,
+  onFocus,
+  isDeselection,
+  triggerScrollIntoView,
+  hasGlyphs,
+}: InternalProps) {
+  const { mode } = useContext(SelectContext);
+
+  const { option: colorSet } = colorSets[mode];
+
+  const ref = useRef<HTMLLIElement>(null);
+
+  const scrollIntoView = useCallback(() => {
+    const element = ref.current!;
+    const parent = element.offsetParent!;
+    // Can't use Element.scrollIntoView because it might
+    // cause scrolling outside the immediate parent.
+    parent.scrollTop =
+      element.offsetTop + (element.clientHeight - parent.clientHeight) / 2;
+  }, [ref]);
+
+  const alreadyScrolledIntoView = usePrevious(triggerScrollIntoView);
+  const shouldScrollIntoView =
+    triggerScrollIntoView && !alreadyScrolledIntoView;
+
+  useEffect(() => {
+    if (shouldScrollIntoView) {
+      scrollIntoView();
+    }
+  }, [scrollIntoView, shouldScrollIntoView]);
+
+  const wasFocused = usePrevious(focused);
+  const shouldFocus = focused && !wasFocused;
+
+  useEffect(() => {
+    if (shouldFocus) {
+      scrollIntoView();
+      ref.current!.focus();
+    }
+  }, [scrollIntoView, shouldFocus]);
+
+  const styledChildren: React.ReactNode = (
+    <span
+      className={cx(optionTextStyle, {
+        [css`
+          font-weight: bold;
+        `]: selected && !isDeselection,
+      })}
+    >
+      {children}
+    </span>
+  );
+
+  const iconPlaceholder = (
+    <span
+      className={cx(
+        iconStyle,
+        css`
+          height: 100%;
+        `,
+      )}
+    />
+  );
+
+  let styledGlyph = iconPlaceholder;
+
+  if (glyph) {
+    if (!glyph.type.isGlyph) {
+      console.error(
+        '`Option` instance did not render icon because it is not a known glyph element.',
+      );
+    } else {
+      styledGlyph = React.cloneElement(glyph, {
+        key: 'glyph',
+        className: cx(
+          iconStyle,
+          css`
+            color: ${colorSet.icon.base};
+          `,
+          {
+            [css`
+              color: ${colorSet.icon.disabled};
+            `]: disabled,
+          },
+          glyph.props.className,
+        ),
+      });
+    }
+  }
+
+  const checkmark =
+    selected && !isDeselection ? (
+      <CheckmarkIcon
+        key="checkmark"
+        className={cx(
+          iconStyle,
+          css`
+            color: ${colorSet.icon.selected};
+          `,
+          {
+            [css`
+              color: ${colorSet.icon.disabled};
+            `]: disabled,
+          },
+        )}
+      />
+    ) : (
+      iconPlaceholder
+    );
+
+  let renderedChildren: React.ReactNode;
+
+  if (hasGlyphs) {
+    renderedChildren = (
+      <span
+        className={css`
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+        `}
+      >
+        <span
+          className={css`
+            display: flex;
+          `}
+        >
+          {styledGlyph}
+          {styledChildren}
+        </span>
+        {checkmark}
+      </span>
+    );
+  } else {
+    renderedChildren = (
+      <>
+        {checkmark}
+        {styledChildren}
+      </>
+    );
+  }
+
+  return (
+    <li
+      role="option"
+      aria-selected={selected}
+      tabIndex={-1}
+      ref={ref}
+      className={cx(
+        optionStyle,
+        css`
+          cursor: pointer;
+          color: ${colorSet.text.base};
+        `,
+        {
+          [css(`
+            &:focus {
+              background-color: ${colorSet.background.focused};
+            }
+
+            &:hover {
+              background-color: ${colorSet.background.hovered};
+            }
+          `)]: !disabled,
+          [css`
+            cursor: not-allowed;
+            color: ${colorSet.text.disabled};
+          `]: disabled,
+        },
+        className,
+      )}
+      onClick={onClick}
+      onFocus={onFocus}
+      onKeyDown={undefined}
+    >
+      {renderedChildren}
+    </li>
+  );
+}
+
+InternalOption.displayName = 'Option';
+
+interface Props {
+  className?: string;
+  glyph?: GlyphElement;
+  disabled?: boolean;
+  value?: string;
+  children: React.ReactText | Array<React.ReactText | ReactEmpty>;
+}
+
+export default function Option(_: Props): JSX.Element {
+  throw Error('`Option` must be a child of a `Select` instance');
+}
+
+Option.displayName = 'Option';
+
+const textPropType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
+Option.propTypes = {
+  children: PropTypes.oneOfType([
+    textPropType,
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        textPropType,
+        PropTypes.oneOf([false, null, undefined, '']),
+      ]),
+    ),
+  ]).isRequired,
+  className: PropTypes.string,
+  glyph: PropTypes.element,
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+// React.ReactComponentElement messes up the original
+// typing of props, so it is fixed up by overriding it.
+export type OptionElement = Omit<
+  React.ReactComponentElement<typeof Option>,
+  'props'
+> & { props: Props };
diff --git a/packages/select/src/OptionGroup.tsx b/packages/select/src/OptionGroup.tsx
new file mode 100644
index 0000000000..6c29553516
--- /dev/null
+++ b/packages/select/src/OptionGroup.tsx
@@ -0,0 +1,111 @@
+import React, { useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { IdAllocator } from '@leafygreen-ui/lib';
+import Option from './Option';
+import SelectContext from './SelectContext';
+import { colorSets } from './styleSets';
+
+const optionGroupStyle = css`
+  padding-top: 8px;
+`;
+
+const optionGroupLabelStyle = css`
+  cursor: default;
+  width: 100%;
+  padding: 0 12px 2px;
+  outline: none;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: bold;
+`;
+
+export type ReactEmpty = null | undefined | false | '';
+
+export interface InternalProps {
+  className: string | undefined;
+  label: string;
+  children: React.ReactNode;
+}
+
+const idAllocator = IdAllocator.create('select-option-group');
+
+export function InternalOptionGroup({
+  className,
+  label,
+  children,
+}: InternalProps) {
+  const { mode } = useContext(SelectContext);
+  const colorSet = colorSets[mode].option;
+
+  const groupId = useMemo(() => idAllocator.generate(), []);
+
+  return (
+    <div
+      className={cx(
+        optionGroupStyle,
+        css`
+          border-bottom: 1px solid ${colorSet.group.border};
+        `,
+        className,
+      )}
+    >
+      <div
+        id={groupId}
+        className={cx(
+          optionGroupLabelStyle,
+          css`
+            color: ${colorSet.group.label};
+          `,
+        )}
+      >
+        {label}
+      </div>
+      <div role="group" aria-labelledby={groupId}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+InternalOptionGroup.displayName = 'OptionGroup';
+
+interface Props {
+  className?: string;
+  label: string;
+  disabled?: boolean;
+  children:
+    | React.ReactFragment
+    | React.ReactComponentElement<typeof Option>
+    | Array<
+        | React.ReactComponentElement<typeof Option>
+        | React.ReactFragment
+        | ReactEmpty
+      >;
+}
+
+export default function OptionGroup(_: Props): JSX.Element {
+  throw Error('`OptionGroup` must be a child of a `Select` instance');
+}
+
+OptionGroup.displayName = 'OptionGroup';
+
+OptionGroup.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf([false, null, undefined, '']),
+        PropTypes.element,
+      ]),
+    ),
+  ]).isRequired,
+  className: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+};
+
+export type OptionGroupElement = React.ReactComponentElement<
+  typeof OptionGroup
+>;
diff --git a/packages/select/src/Select.spec.tsx b/packages/select/src/Select.spec.tsx
new file mode 100644
index 0000000000..8b610e12af
--- /dev/null
+++ b/packages/select/src/Select.spec.tsx
@@ -0,0 +1,832 @@
+import React, { useState } from 'react';
+import { act } from 'react-dom/test-utils';
+import {
+  fireEvent,
+  getByText as getByTextFor,
+  render,
+  RenderResult,
+  waitForElementToBeRemoved,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { enforceExhaustive, keyMap } from '@leafygreen-ui/lib';
+import { Context, jest as Jest } from '@leafygreen-ui/testing-lib';
+import BeakerIcon from '@leafygreen-ui/icon/dist/Beaker';
+import { Option, OptionGroup, Select } from '.';
+
+const Color = {
+  Red: 'Explicit value: Red',
+  Blue: 'Blue',
+  Green: 'Green',
+  Yellow: 'Yellow',
+  Orange: 'Orange',
+  Indigo: 'Indigo',
+  Violet: 'Violet',
+} as const;
+
+const enabledOptions = ['Select', 'Red', 'Blue', 'Green', 'Yellow'] as const;
+
+const defaultProps = {
+  label: 'Label',
+  name: 'pet',
+  description: 'Description',
+  children: [
+    <Option key="red" value={Color.Red}>
+      Red
+    </Option>,
+    <Option key="blue">Blue</Option>,
+    <Option key="orange" disabled>
+      Orange
+    </Option>,
+    <OptionGroup key="enabled group" label="Enabled group">
+      <Option>Green</Option>
+      <Option>Yellow</Option>
+    </OptionGroup>,
+    <OptionGroup key="disabled group" label="Disabled group" disabled>
+      <Option>Indigo</Option>
+      <>
+        <Option>Violet</Option>
+      </>
+    </OptionGroup>,
+  ],
+} as const;
+
+function Controller({
+  children,
+  initialValue,
+}: {
+  children: (
+    value: string,
+    setValue: (value: React.SetStateAction<string>) => void,
+  ) => React.ReactNode;
+  initialValue: string;
+}) {
+  const [value, setValue] = useState<string>(initialValue);
+  return <>{children(value, setValue)}</>;
+}
+
+let offsetParentSpy: jest.SpyInstance;
+beforeAll(() => {
+  offsetParentSpy = jest.spyOn(HTMLElement.prototype, 'offsetParent', 'get');
+
+  // JSDOM doesn't implement `HTMLElement.prototype.offsetParent`, so this
+  // falls back to the parent element since it doesn't matter for these tests.
+  offsetParentSpy.mockImplementation(function (this: HTMLElement) {
+    return this.parentElement;
+  });
+});
+
+afterAll(() => {
+  if (offsetParentSpy.mock.calls.length === 0) {
+    // throw Error('`HTMLElement.prototype.offsetParent` was never called');
+  }
+  offsetParentSpy.mockRestore();
+});
+
+describe('packages/select', () => {
+  test('renders label and description', () => {
+    const { getByText } = render(<Select {...defaultProps} />);
+    expect(getByText(defaultProps.label)).toBeVisible();
+    expect(getByText(defaultProps.description)).toBeVisible();
+  });
+
+  test('renders placeholder', async () => {
+    const { getByRole, rerender } = render(<Select {...defaultProps} />);
+
+    let combobox = getByRole('combobox');
+    expect(combobox).toBeVisible();
+    expect(getByTextFor(combobox, 'Select')).toBeVisible();
+
+    rerender(<Select {...defaultProps} placeholder="Explicit placeholder" />);
+
+    combobox = getByRole('combobox');
+    expect(getByTextFor(combobox, 'Explicit placeholder')).toBeVisible();
+
+    userEvent.click(combobox);
+
+    const listbox = await waitFor(() => {
+      const listbox = getByRole('listbox');
+      expect(listbox).toBeVisible();
+      return listbox;
+    });
+
+    expect(getByTextFor(listbox, 'Explicit placeholder')).toBeVisible();
+  });
+
+  test('combobox button has selected value', () => {
+    const { getByRole, rerender } = render(<Select {...defaultProps} />);
+
+    const combobox = getByRole('combobox') as HTMLButtonElement;
+    expect(combobox).toBeInstanceOf(HTMLButtonElement);
+
+    expect(combobox.name).toEqual(defaultProps.name);
+    expect(combobox.disabled).toEqual(false);
+    expect(combobox).toHaveValue('');
+
+    rerender(<Select {...defaultProps} name="explicit_name" />);
+    expect(combobox.name).toEqual('explicit_name');
+
+    rerender(<Select {...defaultProps} disabled />);
+    expect(combobox.disabled).toEqual(true);
+  });
+
+  test('must render options in <Select>', () => {
+    Context.within(Jest.spyContext(console, 'error'), spy => {
+      spy.mockImplementation();
+
+      expect(() => {
+        render(<Option>bad</Option>);
+      }).toThrowError('`Option` must be a child of a `Select` instance');
+
+      expect(() => {
+        render(
+          <OptionGroup label="bad">
+            <Option>bad</Option>
+          </OptionGroup>,
+        );
+      }).toThrowError('`OptionGroup` must be a child of a `Select` instance');
+    });
+  });
+
+  describe('tab order', () => {
+    test('contains component when enabled', () => {
+      const { getByRole } = render(<Select {...defaultProps} />);
+
+      expect(document.body).toHaveFocus();
+
+      userEvent.tab();
+      const combobox = getByRole('combobox');
+      expect(combobox).toHaveFocus();
+
+      userEvent.tab();
+      expect(document.body).toHaveFocus();
+    });
+
+    test('does not contain component when disabled', () => {
+      render(<Select {...defaultProps} disabled />);
+
+      expect(document.body).toHaveFocus();
+
+      userEvent.tab();
+      expect(document.body).toHaveFocus();
+    });
+  });
+
+  describe.each([
+    ['enabled', true],
+    ['disabled', false],
+  ])('has initially selected option when %p', (_, enabled) => {
+    test('when uncontrolled', () => {
+      const { getByRole } = render(
+        <Select
+          {...defaultProps}
+          disabled={!enabled}
+          defaultValue={Color.Blue}
+        />,
+      );
+
+      const combobox = getByRole('combobox') as HTMLButtonElement;
+      expect(getByTextFor(combobox, 'Blue')).toBeVisible();
+      expect(combobox).toHaveValue('Blue');
+    });
+
+    test('when controlled', () => {
+      const onChangeSpy = jest.fn();
+      const { getByRole } = render(
+        <Select
+          {...defaultProps}
+          value={Color.Blue}
+          onChange={onChangeSpy}
+          disabled={!enabled}
+        />,
+      );
+
+      const combobox = getByRole('combobox') as HTMLButtonElement;
+      expect(getByTextFor(combobox, 'Blue')).toBeVisible();
+      expect(combobox).toHaveValue('Blue');
+
+      expect(onChangeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  test('warns when controlled component has no `onChange` handler', () => {
+    Context.within(Jest.spyContext(console, 'warn'), spy => {
+      spy.mockImplementation();
+
+      // @ts-expect-error
+      render(<Select {...defaultProps} value="" />);
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith(
+        'You provided a `value` prop to a form field without an `onChange` handler. ' +
+          'This will render a read-only field. ' +
+          'If the field should be mutable use `defaultValue`. ' +
+          'Otherwise, set either `onChange` or `readOnly`.',
+      );
+
+      spy.mockClear();
+
+      render(<Select {...defaultProps} defaultValue="" />);
+      render(<Select {...defaultProps} value="" readOnly />);
+      render(<Select {...defaultProps} value="" onChange={() => {}} />);
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('list menu', () => {
+    describe.each([
+      ['dark', true],
+      ['light', false],
+    ])('renders in %p mode', (_, darkMode) => {
+      test('all valid options', async () => {
+        const { getByRole, queryByText } = Context.within(
+          Jest.spyContext(console, 'error'),
+          spy => {
+            spy.mockImplementation();
+
+            const result = render(
+              <Select {...defaultProps} darkMode={darkMode}>
+                {defaultProps.children}
+                <Option glyph={<BeakerIcon />}>White</Option>
+                <div>Invalid element</div>
+              </Select>,
+            );
+
+            userEvent.click(result.getByRole('combobox'));
+
+            expect(spy).toHaveBeenCalledWith(
+              '`Select` instance received child that is not `Option` or `OptionGroup`.',
+            );
+
+            return result;
+          },
+        );
+
+        const listbox = await waitFor(() => {
+          const listbox = getByRole('listbox');
+          expect(listbox).toBeVisible();
+          return listbox;
+        });
+
+        Object.keys(Color).forEach(color => {
+          expect(getByTextFor(listbox, color)).toBeVisible();
+        });
+
+        expect(queryByText('Invalid element')).not.toBeInTheDocument();
+      });
+
+      test('omitting empty elements', () => {
+        Context.within(Jest.spyContext(console, 'error'), spy => {
+          spy.mockImplementation();
+
+          const { getByRole } = render(
+            <Select {...defaultProps} darkMode={darkMode}>
+              {defaultProps.children}
+              <></>
+              {}
+              {''}
+              {false}
+              {null}
+              {undefined}
+            </Select>,
+          );
+
+          userEvent.click(getByRole('combobox'));
+
+          expect(spy).not.toHaveBeenCalled();
+        });
+      });
+
+      test('glyph', async () => {
+        const { getByRole, getAllByTitle } = render(
+          <Select {...defaultProps} darkMode={darkMode} defaultValue="selected">
+            <Option glyph={<BeakerIcon />} value="nonselected">
+              Non-selected with glyph
+            </Option>
+            <Option glyph={<BeakerIcon />} value="selected">
+              Selected with glyph
+            </Option>
+          </Select>,
+        );
+
+        userEvent.click(getByRole('combobox'));
+
+        await waitFor(() => {
+          expect(getByRole('listbox')).toBeVisible();
+        });
+
+        getAllByTitle('Beaker Icon').forEach(element =>
+          expect(element.closest('svg')).toBeVisible(),
+        );
+      });
+
+      test('invalid glyph', () => {
+        Context.within(Jest.spyContext(console, 'error'), spy => {
+          spy.mockImplementation();
+
+          const { getByRole } = render(
+            <Select {...defaultProps} darkMode={darkMode}>
+              <Option glyph={<div />}>Bad icon</Option>
+            </Select>,
+          );
+
+          userEvent.click(getByRole('combobox'));
+
+          expect(spy).toHaveBeenCalledWith(
+            '`Option` instance did not render icon because it is not a known glyph element.',
+          );
+        });
+      });
+    });
+
+    describe('opening', () => {
+      test('by clicking', async () => {
+        const { getByRole, queryByRole } = render(<Select {...defaultProps} />);
+
+        const combobox = getByRole('combobox');
+
+        expect(queryByRole('listbox')).not.toBeInTheDocument();
+
+        userEvent.click(combobox);
+
+        await waitFor(() => {
+          expect(getByRole('listbox')).toBeVisible();
+        });
+
+        expect(combobox).toHaveFocus();
+      });
+
+      test('by arrow down key', async () => {
+        const { getByRole, queryByRole } = render(<Select {...defaultProps} />);
+
+        expect(queryByRole('listbox')).not.toBeInTheDocument();
+
+        fireEvent.keyDown(getByRole('combobox'), { keyCode: keyMap.ArrowDown });
+
+        const listbox = await waitFor(() => {
+          const listbox = getByRole('listbox');
+          expect(listbox).toBeVisible();
+          return listbox;
+        });
+
+        // First option is focused
+        expect(getByTextFor(listbox, 'Select').closest('li')).toHaveFocus();
+      });
+
+      test('by arrow up key', async () => {
+        const { getByRole, queryByRole, queryByText } = render(
+          <Select {...defaultProps} />,
+        );
+
+        expect(queryByRole('listbox')).not.toBeInTheDocument();
+        expect(queryByText('Yellow')).not.toBeInTheDocument();
+
+        fireEvent.keyDown(getByRole('combobox'), { keyCode: keyMap.ArrowUp });
+
+        const listbox = await waitFor(() => {
+          const listbox = getByRole('listbox');
+          expect(listbox).toBeVisible();
+          return listbox;
+        });
+
+        // Last enabled option is focused
+        expect(getByTextFor(listbox, 'Yellow').closest('li')).toHaveFocus();
+      });
+
+      describe('is not allowed when disabled', () => {
+        test('by clicking', () => {
+          const { getByRole, queryByRole } = render(
+            <Select {...defaultProps} disabled />,
+          );
+
+          const combobox = getByRole('combobox');
+          userEvent.click(combobox);
+
+          expect(combobox).not.toHaveFocus();
+
+          expect(queryByRole('listbox')).not.toBeInTheDocument();
+        });
+
+        test('by arrow down key', () => {
+          const { getByRole, queryByRole } = render(
+            <Select {...defaultProps} disabled />,
+          );
+
+          const combobox = getByRole('combobox');
+          fireEvent.keyDown(combobox, { keyCode: keyMap.ArrowDown });
+
+          expect(queryByRole('listbox')).not.toBeInTheDocument();
+        });
+
+        test('by arrow up key', () => {
+          const { getByRole, queryByRole } = render(
+            <Select {...defaultProps} disabled />,
+          );
+
+          const combobox = getByRole('combobox');
+          fireEvent.keyDown(combobox, { keyCode: keyMap.ArrowUp });
+
+          expect(queryByRole('listbox')).not.toBeInTheDocument();
+        });
+      });
+    });
+
+    describe.each([
+      ['menu button', 'combobox'],
+      ['list menu', 'listbox'],
+    ] as const)('closing when %p is focused', (_, focusedElementRole) => {
+      let getByRole: RenderResult['getByRole'];
+      let getByText: RenderResult['getByText'];
+
+      beforeEach(async () => {
+        ({ getByRole, getByText } = render(<Select {...defaultProps} />));
+
+        userEvent.click(getByRole('combobox'));
+
+        await waitFor(() => {
+          // eslint-disable-next-line jest/no-standalone-expect
+          expect(getByRole('listbox')).toBeVisible();
+        });
+
+        const focusedElement = getByRole(focusedElementRole);
+        act(() => focusedElement.focus());
+      });
+
+      test('by clicking outside', async () => {
+        userEvent.click(document.body);
+
+        expect(document.body).toHaveFocus();
+
+        await waitForElementToBeRemoved(getByRole('listbox'));
+      });
+
+      test('by clicking menu button', async () => {
+        const combobox = getByRole('combobox');
+        userEvent.click(combobox);
+
+        expect(combobox).toHaveFocus();
+
+        await waitForElementToBeRemoved(getByRole('listbox'));
+      });
+
+      test('by escape key', async () => {
+        fireEvent.keyDown(getByRole(focusedElementRole), {
+          keyCode: keyMap.Escape,
+        });
+
+        const combobox = getByRole('combobox');
+        expect(combobox).toHaveFocus();
+
+        await waitForElementToBeRemoved(getByRole('listbox'));
+      });
+
+      switch (focusedElementRole) {
+        case 'combobox':
+          test('by tab key', async () => {
+            userEvent.tab();
+
+            expect(document.body).toHaveFocus();
+
+            await waitForElementToBeRemoved(getByRole('listbox'));
+          });
+          break;
+        case 'listbox':
+          test('does not occur by tab key', async () => {
+            userEvent.tab();
+
+            const listbox = await waitFor(() => {
+              const listbox = getByRole('listbox');
+              expect(listbox).toBeVisible();
+              return listbox;
+            });
+
+            expect(listbox).toHaveFocus();
+          });
+          break;
+        default:
+          enforceExhaustive(focusedElementRole);
+      }
+
+      test('does not occur by clicking on option group label', async () => {
+        userEvent.click(getByText('Enabled group'));
+
+        const listbox = await waitFor(() => {
+          const listbox = getByRole('listbox');
+          expect(listbox).toBeVisible();
+          return listbox;
+        });
+
+        expect(listbox).toHaveFocus();
+      });
+    });
+
+    test('Escape key clears selected option', () => {
+      const { getByRole } = render(
+        <Select {...defaultProps} defaultValue={Color.Blue} />,
+      );
+
+      const combobox = getByRole('combobox');
+      expect(getByTextFor(combobox, 'Blue')).toBeVisible();
+
+      userEvent.tab();
+
+      fireEvent.keyDown(combobox, { keyCode: keyMap.Escape });
+
+      expect(getByTextFor(combobox, 'Select')).toBeVisible();
+    });
+
+    describe.each([
+      ['uncontrolled', false],
+      ['controlled', true],
+    ])('when %p selecting', (_, controlled) => {
+      let getByRole: RenderResult['getByRole'];
+
+      let combobox: HTMLElement;
+      let onChangeSpy: jest.MockedFunction<(
+        value: string,
+        event: React.MouseEvent | React.KeyboardEvent,
+      ) => void>;
+
+      beforeEach(() => {
+        onChangeSpy = jest.fn();
+
+        ({ getByRole } = render(
+          controlled ? (
+            <Controller initialValue="">
+              {(value, setValue) => (
+                <Select
+                  {...defaultProps}
+                  value={value}
+                  onChange={(value, event) => {
+                    setValue(value);
+                    onChangeSpy(value, event);
+                  }}
+                />
+              )}
+            </Controller>
+          ) : (
+            <Select {...defaultProps} onChange={onChangeSpy} />
+          ),
+        ));
+
+        combobox = getByRole('combobox');
+      });
+
+      describe.each([
+        ['option', 'Red', Color.Red],
+        ['option in group', 'Green', Color.Green],
+      ])('%p', (_, optionText, optionValue) => {
+        test.each([
+          ['tab', keyMap.Tab],
+          ['enter', keyMap.Enter],
+        ])('by %p key', async (_, keyCode) => {
+          userEvent.click(combobox);
+
+          const listbox = await waitFor(() => {
+            const listbox = getByRole('listbox');
+            expect(listbox).toBeVisible();
+            return listbox;
+          });
+
+          const targetOption = getByTextFor(listbox, optionText).closest('li');
+          expect(targetOption).not.toBe(null);
+
+          act(() => targetOption!.focus());
+
+          fireEvent.keyDown(targetOption!, { keyCode });
+
+          expect(onChangeSpy).toHaveBeenCalledTimes(1);
+          expect(onChangeSpy).toHaveBeenCalledWith(
+            optionValue,
+            expect.anything(),
+          );
+
+          await waitForElementToBeRemoved(listbox);
+
+          expect(getByTextFor(combobox, optionText)).toBeVisible();
+          expect(combobox).toHaveFocus();
+          expect(combobox).toHaveValue(optionValue);
+        });
+
+        test('by clicking', async () => {
+          userEvent.click(combobox);
+
+          const listbox = await waitFor(() => {
+            const listbox = getByRole('listbox');
+            expect(listbox).toBeVisible();
+            return listbox;
+          });
+
+          userEvent.click(getByTextFor(listbox, optionText));
+
+          expect(onChangeSpy).toHaveBeenCalledTimes(1);
+          expect(onChangeSpy).toHaveBeenCalledWith(
+            optionValue,
+            expect.anything(),
+          );
+
+          await waitForElementToBeRemoved(listbox);
+
+          expect(getByTextFor(combobox, optionText)).toBeVisible();
+          expect(combobox).toHaveFocus();
+          expect(combobox).toHaveValue(optionValue);
+        });
+      });
+
+      describe.each([
+        ['disabled option', 'Orange'],
+        ['option in disabled group', 'Indigo'],
+      ])('does not occur for %p', (_, optionText) => {
+        test.each([
+          ['tab', keyMap.Tab],
+          ['enter', keyMap.Enter],
+        ])('by %p key', async (_, keyCode) => {
+          userEvent.click(combobox);
+
+          const listbox = await waitFor(() => {
+            const listbox = getByRole('listbox');
+            expect(listbox).toBeVisible();
+            return listbox;
+          });
+
+          const targetOption = getByTextFor(listbox, optionText).closest('li');
+          expect(targetOption).not.toBe(null);
+
+          act(() => targetOption!.focus());
+          fireEvent.keyDown(targetOption!, { keyCode });
+
+          expect(onChangeSpy).not.toHaveBeenCalled();
+          expect(listbox).toBeVisible();
+
+          expect(getByTextFor(combobox, 'Select')).toBeVisible();
+          expect(targetOption).toHaveFocus();
+
+          expect(combobox).toHaveValue('');
+        });
+
+        // eslint-disable-next-line jest/no-identical-title
+        test('by clicking', async () => {
+          userEvent.click(combobox);
+
+          const listbox = await waitFor(() => {
+            const listbox = getByRole('listbox');
+            expect(listbox).toBeVisible();
+            return listbox;
+          });
+
+          userEvent.click(getByTextFor(listbox, optionText));
+
+          expect(onChangeSpy).not.toHaveBeenCalled();
+          expect(listbox).toBeVisible();
+
+          expect(getByTextFor(combobox, 'Select')).toBeVisible();
+          expect(combobox).toHaveValue('');
+        });
+      });
+    });
+
+    describe('focus', () => {
+      test('moves to next option by arrow down key', async () => {
+        const { getByRole } = render(<Select {...defaultProps} />);
+
+        userEvent.click(getByRole('combobox'));
+
+        const listbox = await waitFor(() => {
+          const listbox = getByRole('listbox');
+          expect(listbox).toBeVisible();
+          return listbox;
+        });
+
+        enabledOptions.forEach(expectedOptionText => {
+          fireEvent.keyDown(listbox, { keyCode: keyMap.ArrowDown });
+
+          expect(
+            getByTextFor(listbox, expectedOptionText).closest('li'),
+          ).toHaveFocus();
+        });
+
+        // Moves to first option when the end is reached
+        fireEvent.keyDown(listbox, { keyCode: keyMap.ArrowDown });
+
+        expect(getByTextFor(listbox, 'Select').closest('li')).toHaveFocus();
+      });
+
+      test('moves to previous option by arrow down key', async () => {
+        const { getByRole } = render(<Select {...defaultProps} />);
+
+        userEvent.click(getByRole('combobox'));
+
+        const listbox = await waitFor(() => {
+          const listbox = getByRole('listbox');
+          expect(listbox).toBeVisible();
+          return listbox;
+        });
+
+        [...enabledOptions].reverse().forEach(expectedOptionText => {
+          fireEvent.keyDown(listbox, { keyCode: keyMap.ArrowUp });
+
+          expect(
+            getByTextFor(listbox, expectedOptionText).closest('li'),
+          ).toHaveFocus();
+        });
+
+        // Moves to last option when the top is reached
+        fireEvent.keyDown(listbox, { keyCode: keyMap.ArrowUp });
+
+        expect(getByTextFor(listbox, 'Yellow').closest('li')).toHaveFocus();
+      });
+    });
+  });
+
+  describe('selected option is stable', () => {
+    const selected: JSX.Element = (
+      <Option value="selected">Selected Option</Option>
+    );
+    const nonselected: JSX.Element = (
+      <Option value="nonselected">Non-selected Option</Option>
+    );
+
+    let getByRole: RenderResult['getByRole'];
+    let rerender: RenderResult['rerender'];
+    let combobox: HTMLElement;
+
+    beforeEach(async () => {
+      ({ getByRole, rerender } = render(
+        <Select label="Choice" name="choice">
+          {selected}
+          {nonselected}
+        </Select>,
+      ));
+
+      combobox = getByRole('combobox');
+      userEvent.click(combobox);
+
+      const listbox = await waitFor(() => {
+        const listbox = getByRole('listbox');
+        // eslint-disable-next-line jest/no-standalone-expect
+        expect(listbox).toBeVisible();
+        return listbox;
+      });
+
+      userEvent.click(getByTextFor(listbox, 'Selected Option'));
+    });
+
+    test('when selected option is removed', () => {
+      rerender(
+        <Select label="Choice" name="choice">
+          {nonselected}
+        </Select>,
+      );
+
+      expect(getByTextFor(combobox, 'Select')).toBeVisible();
+    });
+
+    test('when options are re-ordered', () => {
+      rerender(
+        <Select label="Choice" name="choice">
+          {nonselected}
+          {selected}
+        </Select>,
+      );
+
+      expect(getByTextFor(combobox, 'Selected Option')).toBeVisible();
+    });
+
+    describe('when selected option is replaced', () => {
+      test('with different object identity', () => {
+        rerender(
+          <Select label="Choice" name="choice">
+            {nonselected}
+            <Option value="selected">Selected Option</Option>
+          </Select>,
+        );
+
+        expect(getByTextFor(combobox, 'Selected Option')).toBeVisible();
+      });
+
+      test('with same explicit value and different text', () => {
+        rerender(
+          <Select label="Choice" name="choice">
+            {nonselected}
+            <Option>selected</Option>
+            <Option value="selected">Different text</Option>
+          </Select>,
+        );
+
+        expect(getByTextFor(combobox, 'Different text')).toBeVisible();
+      });
+
+      test('with same computed value', () => {
+        rerender(
+          <Select label="Choice" name="choice">
+            {nonselected}
+            <Option>select{'ed'}</Option>
+          </Select>,
+        );
+
+        expect(getByTextFor(combobox, 'selected')).toBeVisible();
+      });
+    });
+  });
+});
diff --git a/packages/select/src/Select.story.tsx b/packages/select/src/Select.story.tsx
new file mode 100644
index 0000000000..106ce29f84
--- /dev/null
+++ b/packages/select/src/Select.story.tsx
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { css } from '@leafygreen-ui/emotion';
+import BeakerIcon from '@leafygreen-ui/icon/dist/Beaker';
+import LeafygreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { uiColors } from '@leafygreen-ui/palette';
+import { Option, OptionGroup, Select, Size } from '.';
+
+storiesOf('Select', module)
+  .add('Uncontrolled', () => {
+    const darkMode = boolean('darkMode', false);
+    const label = text('Label', 'Label');
+    const description = text('Description', 'This is a description');
+    const placeholder = text('Placeholder', 'Select');
+    const size = select('Size', Object.values(Size), Size.Default);
+    const disabled = boolean('Disabled', false);
+    const withIcons = boolean('With icons', false);
+    const glyph = withIcons ? <BeakerIcon /> : undefined;
+    const useProvider = boolean('Use LeafygreenProvider', false);
+    const Provider = useProvider ? LeafygreenProvider : React.Fragment;
+
+    return (
+      <div
+        className={css`
+          position: absolute;
+          background-color: ${darkMode ? uiColors.gray.dark3 : uiColors.white};
+          padding: 20px;
+          height: 100%;
+        `}
+      >
+        <Provider>
+          <Select
+            darkMode={darkMode}
+            size={size}
+            label={label}
+            description={description}
+            placeholder={placeholder}
+            name="pets"
+            defaultValue="cat"
+            disabled={disabled}
+          >
+            <OptionGroup label="Common">
+              <Option value="dog" glyph={glyph}>
+                Dog
+              </Option>
+              <Option value="cat" glyph={glyph}>
+                Cat
+              </Option>
+            </OptionGroup>
+            <OptionGroup label="Less common">
+              <Option value="hamster" glyph={glyph}>
+                Hamster
+              </Option>
+              <Option value="parrot">Parrot</Option>
+            </OptionGroup>
+            <Option glyph={glyph}>Mexican spiny-tailed iguana</Option>
+            <Option value="spider" glyph={glyph} disabled>
+              Spider
+            </Option>
+          </Select>
+        </Provider>
+      </div>
+    );
+  })
+  .add('Controlled', () => {
+    const darkMode = boolean('darkMode', false);
+    const label = text('Label', 'Label');
+    const description = text('Description', 'This is a description');
+    const placeholder = text('Placeholder', 'Select');
+    const size = select('Size', Object.values(Size), Size.Default);
+    const disabled = boolean('Disabled', false);
+    const withIcons = boolean('With icons', false);
+    const glyph = withIcons ? <BeakerIcon /> : undefined;
+    const useProvider = boolean('Use LeafygreenProvider', false);
+    const Provider = useProvider ? LeafygreenProvider : React.Fragment;
+
+    const [value, setValue] = useState('cat');
+
+    return (
+      <div
+        className={css`
+          position: absolute;
+          background-color: ${darkMode ? uiColors.gray.dark3 : uiColors.white};
+          padding: 20px;
+          height: 100%;
+        `}
+      >
+        <Provider>
+          <Select
+            darkMode={darkMode}
+            size={size}
+            label={label}
+            description={description}
+            placeholder={placeholder}
+            name="pets"
+            value={value}
+            onChange={setValue}
+            disabled={disabled}
+          >
+            <OptionGroup label="Common">
+              <Option value="dog" glyph={glyph}>
+                Dog
+              </Option>
+              <Option value="cat" glyph={glyph}>
+                Cat
+              </Option>
+            </OptionGroup>
+            <OptionGroup label="Less common">
+              <Option value="hamster" glyph={glyph}>
+                Hamster
+              </Option>
+              <Option value="parrot" glyph={glyph}>
+                Parrot
+              </Option>
+            </OptionGroup>
+            <Option glyph={glyph}>Mexican spiny-tailed iguana</Option>
+            <Option value="spider" glyph={glyph} disabled>
+              Spider
+            </Option>
+          </Select>
+        </Provider>
+      </div>
+    );
+  });
diff --git a/packages/select/src/Select.tsx b/packages/select/src/Select.tsx
new file mode 100644
index 0000000000..a61b9d3e8a
--- /dev/null
+++ b/packages/select/src/Select.tsx
@@ -0,0 +1,518 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { useViewportSize } from '@leafygreen-ui/hooks';
+import { IdAllocator, OneOf } from '@leafygreen-ui/lib';
+import { breakpoints } from '@leafygreen-ui/tokens';
+import { colorSets, mobileSizeSet, Mode, Size, sizeSets } from './styleSets';
+import ListMenu from './ListMenu';
+import MenuButton from './MenuButton';
+import SelectContext from './SelectContext';
+import { InternalOption, OptionElement } from './Option';
+import {
+  convertToInternalElements,
+  getOptionValue,
+  isOptionDisabled,
+  isOptionSelectable,
+  reconcileOption,
+  traverseSelectChildren,
+  useStateRef,
+} from './utils';
+
+const labelStyle = css`
+  display: inline-block;
+  margin-bottom: 2px;
+  font-weight: bold;
+`;
+
+export type Props = {
+  children: React.ReactNode;
+  className?: string;
+  id?: string;
+  darkMode?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  description?: string;
+  placeholder?: string;
+  name?: string;
+} & (
+  | // Uncontrolled
+  ({
+      defaultValue?: string;
+      value?: undefined;
+    } & {
+      onChange?: (
+        value: string,
+        event: React.MouseEvent | React.KeyboardEvent,
+      ) => void;
+      readOnly?: false;
+    })
+  // Controlled
+  | ({ value: string; defaultValue?: undefined } & (
+      | {
+          onChange: (
+            value: string,
+            event: React.MouseEvent | React.KeyboardEvent,
+          ) => void;
+          readOnly?: false;
+        }
+      | { readOnly: true; onChange?: undefined }
+    ))
+) &
+  OneOf<{ label: string }, { 'aria-labelledby': string }>;
+
+const idAllocator = IdAllocator.create('select');
+
+export default function Select({
+  children,
+  darkMode = false,
+  size = Size.Default,
+  disabled = false,
+  className,
+  id: idProp,
+  label,
+  description,
+  placeholder = 'Select',
+  name,
+  defaultValue,
+  value,
+  onChange,
+  readOnly,
+  'aria-labelledby': ariaLabelledBy,
+}: Props) {
+  const id = useMemo(() => idProp ?? idAllocator.generate(), [idProp]);
+  const labelId = 'aria-labelledby' ?? `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const menuId = `${id}-menu`;
+
+  const [open, setOpen] = useState(false);
+
+  const menuButtonRef = useStateRef<HTMLDivElement | null>(null);
+  const listMenuRef = useStateRef<HTMLUListElement | null>(null);
+
+  const mode = darkMode ? Mode.Dark : Mode.Light;
+  const colorSet = colorSets[mode];
+  const sizeSet = sizeSets[size];
+
+  const providerData = useMemo(() => {
+    return { mode, size, open, disabled };
+  }, [mode, size, open, disabled]);
+
+  useEffect(() => {
+    if (value !== undefined && onChange === undefined && readOnly !== true) {
+      console.warn(
+        'You provided a `value` prop to a form field without an `onChange` handler. ' +
+          'This will render a read-only field. ' +
+          'If the field should be mutable use `defaultValue`. ' +
+          'Otherwise, set either `onChange` or `readOnly`.',
+      );
+    }
+  }, [onChange, readOnly, value]);
+
+  if (!label && !ariaLabelledBy) {
+    console.error(
+      'For screen-reader accessibility, label or aria-labelledby must be provided to IconButton.',
+    );
+  }
+
+  /**
+   * Open / close state
+   */
+
+  const onOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+    menuButtonRef.current!.focus();
+  }, [menuButtonRef]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const onClickOutside = (event: MouseEvent) => {
+      const stillFocused =
+        menuButtonRef.current!.contains(event.target as Node) ||
+        listMenuRef.current!.contains(event.target as Node);
+      setOpen(stillFocused);
+    };
+
+    document.addEventListener('mousedown', onClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', onClickOutside);
+    };
+  }, [listMenuRef, menuButtonRef, open]);
+
+  const initialUncontrolledSelectedOption = useMemo(() => {
+    let initialUncontrolledSelectedOption: OptionElement | null = null;
+
+    if (value === undefined && defaultValue !== undefined) {
+      traverseSelectChildren(children, (option, group) => {
+        if (isOptionSelectable(option, group, defaultValue)) {
+          initialUncontrolledSelectedOption = option;
+        }
+      });
+    }
+
+    return initialUncontrolledSelectedOption;
+  }, [children, defaultValue, value]);
+
+  /**
+   * Selection
+   */
+
+  // We store the option element instance rather than just the value in order
+  // to differentiate between multiple options that have the same value.
+  const [
+    uncontrolledSelectedOption,
+    setUncontrolledSelectedOption,
+  ] = useState<OptionElement | null>(initialUncontrolledSelectedOption);
+
+  // If the option instances have changed we'll do our best to preserve
+  // the state by checking if any of the new option instances sufficiently
+  // match the current state and use it instead.
+  useEffect(() => {
+    if (uncontrolledSelectedOption !== null) {
+      setUncontrolledSelectedOption(
+        reconcileOption(children, uncontrolledSelectedOption) ??
+          initialUncontrolledSelectedOption,
+      );
+    }
+  }, [children, initialUncontrolledSelectedOption, uncontrolledSelectedOption]);
+
+  const selectedOption = useMemo(() => {
+    if (value !== undefined) {
+      let selectedOption: OptionElement | null = null;
+
+      traverseSelectChildren(children, (option, group) => {
+        if (isOptionSelectable(option, group, value)) {
+          selectedOption = option;
+        }
+      });
+      return selectedOption;
+    } else {
+      return uncontrolledSelectedOption;
+    }
+  }, [children, uncontrolledSelectedOption, value]);
+
+  const onSelect = useCallback(
+    (
+      option: OptionElement | null,
+      event: React.MouseEvent | React.KeyboardEvent,
+    ) => {
+      if (value === undefined) {
+        setUncontrolledSelectedOption(option);
+      }
+      onChange?.(getOptionValue(option), event);
+      setFocusedOption(undefined);
+      onClose();
+    },
+    [onChange, onClose, value],
+  );
+
+  const getOptionClickHandler = useCallback(
+    (option: OptionElement | null, optionDisabled: boolean) => {
+      return (event: React.MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!disabled && !optionDisabled) {
+          onSelect(option, event);
+          onClose();
+        }
+      };
+    },
+    [disabled, onClose, onSelect],
+  );
+
+  const onDeselect = useCallback(
+    (event: React.KeyboardEvent) => {
+      onSelect(null, event);
+    },
+    [onSelect],
+  );
+
+  /**
+   * Focus
+   */
+
+  const [focusedOption, setFocusedOption] = useState<
+    OptionElement | null | undefined
+  >();
+
+  const enabledOptions = useMemo(() => {
+    const enabledOptions: Array<OptionElement | null> = [null];
+
+    traverseSelectChildren(children, (option, group) => {
+      if (!isOptionDisabled(option, group)) {
+        enabledOptions.push(option);
+      }
+    });
+
+    return enabledOptions;
+  }, [children]);
+
+  const onSelectFocusedOption = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (focusedOption !== undefined) {
+        onSelect(focusedOption, event);
+      }
+    },
+    [focusedOption, onSelect],
+  );
+
+  const onFocusFirstOption = useCallback(() => {
+    setFocusedOption(null);
+  }, []);
+
+  const onFocusLastOption = useCallback(() => {
+    setFocusedOption(enabledOptions[enabledOptions.length - 1]);
+  }, [enabledOptions]);
+
+  const onFocusPreviousOption = useCallback(() => {
+    if (
+      focusedOption === undefined ||
+      enabledOptions.indexOf(focusedOption) === 0
+    ) {
+      onFocusLastOption();
+    } else {
+      const index = enabledOptions.indexOf(focusedOption) - 1;
+      setFocusedOption(enabledOptions[index]);
+    }
+  }, [enabledOptions, focusedOption, onFocusLastOption]);
+
+  const onFocusNextOption = useCallback(() => {
+    if (
+      focusedOption === undefined ||
+      enabledOptions.indexOf(focusedOption) === enabledOptions.length - 1
+    ) {
+      onFocusFirstOption();
+    } else {
+      const index = enabledOptions.indexOf(focusedOption) + 1;
+      setFocusedOption(enabledOptions[index]);
+    }
+  }, [enabledOptions, focusedOption, onFocusFirstOption]);
+
+  const getOptionFocusHandler = useCallback(
+    (option: OptionElement | null, optionDisabled: boolean) => {
+      return (event: React.FocusEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!disabled && !optionDisabled) {
+          setFocusedOption(option);
+        }
+      };
+    },
+    [disabled],
+  );
+
+  /**
+   * Rendering
+   */
+
+  const viewportSize = useViewportSize();
+
+  const hasGlyphs = useMemo(() => {
+    let hasGlyphs = false;
+
+    traverseSelectChildren(children, option => {
+      hasGlyphs ||= option.props.glyph !== undefined;
+    });
+
+    return hasGlyphs;
+  }, [children]);
+
+  const canTriggerScrollIntoView = useMemo(
+    () =>
+      viewportSize !== null &&
+      listMenuRef.current !== null &&
+      focusedOption === undefined &&
+      open,
+    [focusedOption, listMenuRef, open, viewportSize],
+  );
+
+  const deselectionOption = useMemo(() => {
+    const selected = selectedOption === null;
+    return (
+      <InternalOption
+        className={undefined}
+        glyph={undefined}
+        selected={selected}
+        focused={focusedOption === null}
+        disabled={false}
+        onClick={getOptionClickHandler(null, false)}
+        onFocus={getOptionFocusHandler(null, false)}
+        isDeselection
+        hasGlyphs
+        triggerScrollIntoView={selected && canTriggerScrollIntoView}
+      >
+        {placeholder}
+      </InternalOption>
+    );
+  }, [
+    canTriggerScrollIntoView,
+    focusedOption,
+    getOptionClickHandler,
+    getOptionFocusHandler,
+    placeholder,
+    selectedOption,
+  ]);
+
+  const renderedChildren = useMemo(
+    () =>
+      convertToInternalElements(
+        children,
+        (option, group) => {
+          const selected = option === selectedOption;
+          const disabled = isOptionDisabled(option, group);
+          return {
+            className: option.props.className,
+            glyph: option.props.glyph,
+            selected,
+            focused: option === focusedOption,
+            disabled,
+            children: option.props.children,
+            isDeselection: false,
+            hasGlyphs,
+            onClick: getOptionClickHandler(option, disabled),
+            onFocus: getOptionFocusHandler(option, disabled),
+            triggerScrollIntoView: selected && canTriggerScrollIntoView,
+          };
+        },
+        () => {
+          console.error(
+            '`Select` instance received child that is not `Option` or `OptionGroup`.',
+          );
+        },
+      ),
+    [
+      canTriggerScrollIntoView,
+      children,
+      focusedOption,
+      getOptionClickHandler,
+      getOptionFocusHandler,
+      hasGlyphs,
+      selectedOption,
+    ],
+  );
+
+  return (
+    <div
+      className={cx(
+        {
+          [css`
+            cursor: not-allowed;
+          `]: disabled,
+        },
+        className,
+      )}
+    >
+      {label && (
+        <label
+          id={labelId}
+          className={cx(
+            labelStyle,
+            css`
+              color: ${disabled
+                ? colorSet.label.disabled
+                : colorSet.label.base};
+              font-size: ${sizeSet.label.text}px;
+              line-height: ${sizeSet.label.lineHeight}px;
+
+              @media only screen and (max-width: ${breakpoints.Desktop}px) {
+                font-size: ${mobileSizeSet.label.text}px;
+                line-height: ${mobileSizeSet.label.lineHeight}px;
+              }
+            `,
+            {
+              [css`
+                cursor: not-allowed;
+              `]: disabled,
+            },
+          )}
+        >
+          {label}
+        </label>
+      )}
+
+      {description && (
+        <div
+          id={descriptionId}
+          className={css`
+            color: ${colorSet.description};
+            font-size: ${sizeSet.description.text}px;
+            line-height: ${sizeSet.description.lineHeight}px;
+
+            @media only screen and (max-width: ${breakpoints.Desktop}px) {
+              font-size: ${mobileSizeSet.description.text}px;
+              line-height: ${mobileSizeSet.description.lineHeight}px;
+            }
+          `}
+        >
+          {description}
+        </div>
+      )}
+      <SelectContext.Provider value={providerData}>
+        <MenuButton
+          ref={menuButtonRef}
+          name={name}
+          readOnly={readOnly}
+          value={getOptionValue(selectedOption)}
+          text={
+            selectedOption !== null
+              ? selectedOption.props.children
+              : placeholder
+          }
+          deselected={selectedOption === null}
+          onDeselect={onDeselect}
+          onOpen={onOpen}
+          onClose={onClose}
+          onFocusFirstOption={onFocusFirstOption}
+          onFocusLastOption={onFocusLastOption}
+          aria-labelledby={labelId}
+          aria-controls={menuId}
+          aria-expanded={open}
+          aria-describedby={descriptionId}
+        >
+          <ListMenu
+            id={menuId}
+            referenceElement={menuButtonRef}
+            ref={listMenuRef}
+            onClose={onClose}
+            onSelectFocusedOption={onSelectFocusedOption}
+            onFocusPreviousOption={onFocusPreviousOption}
+            onFocusNextOption={onFocusNextOption}
+            className={css`
+              width: ${menuButtonRef.current?.clientWidth}px;
+            `}
+          >
+            {deselectionOption}
+            {renderedChildren}
+          </ListMenu>
+        </MenuButton>
+      </SelectContext.Provider>
+    </div>
+  );
+}
+
+Select.displayName = 'Select';
+
+Select.propTypes = {
+  label: PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  description: PropTypes.string,
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+  darkMode: PropTypes.bool,
+  size: PropTypes.oneOf(Object.values(Size)),
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+};
diff --git a/packages/select/src/SelectContext.tsx b/packages/select/src/SelectContext.tsx
new file mode 100644
index 0000000000..6d8202567d
--- /dev/null
+++ b/packages/select/src/SelectContext.tsx
@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+import { Mode, Size } from './styleSets';
+
+interface SelectData {
+  mode: Mode;
+  size: Size;
+  open: boolean;
+  disabled: boolean;
+}
+
+export const SelectContext = createContext<SelectData>({
+  mode: Mode.Light,
+  size: Size.Default,
+  open: false,
+  disabled: false,
+});
+
+export default SelectContext;
diff --git a/packages/select/src/index.ts b/packages/select/src/index.ts
new file mode 100644
index 0000000000..49574d5727
--- /dev/null
+++ b/packages/select/src/index.ts
@@ -0,0 +1,4 @@
+export { Size } from './styleSets';
+export { default as Select } from './Select';
+export { default as Option } from './Option';
+export { default as OptionGroup } from './OptionGroup';
diff --git a/packages/select/src/styleSets.ts b/packages/select/src/styleSets.ts
new file mode 100644
index 0000000000..f2edc38839
--- /dev/null
+++ b/packages/select/src/styleSets.ts
@@ -0,0 +1,244 @@
+import { transparentize } from 'polished';
+import { uiColors } from '@leafygreen-ui/palette';
+
+export const Mode = {
+  Dark: 'dark',
+  Light: 'light',
+} as const;
+
+export type Mode = typeof Mode[keyof typeof Mode];
+
+interface ColorSet {
+  label: {
+    base: string;
+    disabled: string;
+  };
+  description: string;
+  border: {
+    base: string;
+    open: string;
+  };
+  text: {
+    base: string;
+    deselected: string;
+    disabled: string;
+  };
+  menu: {
+    shadow: string;
+  };
+  option: {
+    group: {
+      label: string;
+      border: string;
+    };
+    background: {
+      base: string;
+      hovered: string;
+      focused: string;
+    };
+    text: {
+      base: string;
+      selected: string;
+      disabled: string;
+    };
+    icon: {
+      base: string;
+      selected: string;
+      disabled: string;
+    };
+  };
+}
+
+export const colorSets: Record<Mode, ColorSet> = {
+  [Mode.Light]: {
+    label: {
+      base: uiColors.gray.dark3,
+      disabled: uiColors.gray.dark1,
+    },
+    description: uiColors.gray.dark1,
+    border: {
+      base: uiColors.gray.light1,
+      open: uiColors.gray.dark1,
+    },
+    text: {
+      base: uiColors.gray.dark3,
+      deselected: uiColors.gray.dark1,
+      disabled: uiColors.gray.base,
+    },
+    menu: {
+      shadow: transparentize(0.78, uiColors.black),
+    },
+    option: {
+      group: {
+        label: uiColors.gray.dark3,
+        border: uiColors.gray.light2,
+      },
+      background: {
+        base: uiColors.white,
+        hovered: uiColors.gray.light2,
+        focused: uiColors.blue.light3,
+      },
+      text: {
+        base: uiColors.gray.dark3,
+        selected: uiColors.blue.base,
+        disabled: uiColors.gray.base,
+      },
+      icon: {
+        base: uiColors.gray.dark1,
+        selected: uiColors.blue.base,
+        disabled: uiColors.gray.base,
+      },
+    },
+  },
+
+  [Mode.Dark]: {
+    label: {
+      base: uiColors.white,
+      disabled: uiColors.gray.light1,
+    },
+    description: uiColors.gray.light1,
+    border: {
+      base: uiColors.gray.dark2,
+      open: uiColors.gray.dark2,
+    },
+    text: {
+      base: uiColors.white,
+      deselected: uiColors.gray.light1,
+      disabled: uiColors.gray.dark1,
+    },
+    menu: {
+      shadow: transparentize(0.2, uiColors.black),
+    },
+    option: {
+      group: {
+        label: uiColors.white,
+        border: uiColors.gray.dark1,
+      },
+      background: {
+        base: uiColors.gray.dark2,
+        hovered: uiColors.gray.dark1,
+        focused: uiColors.blue.base,
+      },
+      text: {
+        base: uiColors.white,
+        selected: '#9DD0E7',
+        disabled: uiColors.gray.base,
+      },
+      icon: {
+        base: uiColors.gray.light1,
+        selected: '#9DD0E7',
+        disabled: uiColors.gray.base,
+      },
+    },
+  },
+};
+
+export const Size = {
+  XSmall: 'xsmall',
+  Small: 'small',
+  Default: 'default',
+  Large: 'large',
+} as const;
+
+export type Size = typeof Size[keyof typeof Size];
+
+interface SizeSet {
+  height: number;
+  width: number;
+  text: number;
+  label: {
+    text: number;
+    lineHeight: number;
+  };
+  description: {
+    text: number;
+    lineHeight: number;
+  };
+  option: {
+    text: number;
+  };
+}
+
+export const sizeSets: Record<Size, SizeSet> = {
+  [Size.XSmall]: {
+    height: 22,
+    width: 194,
+    text: 12,
+    label: {
+      text: 14,
+      lineHeight: 16,
+    },
+    description: {
+      text: 14,
+      lineHeight: 16,
+    },
+    option: {
+      text: 14,
+    },
+  },
+  [Size.Small]: {
+    height: 28,
+    width: 194,
+    text: 14,
+    label: {
+      text: 14,
+      lineHeight: 16,
+    },
+    description: {
+      text: 14,
+      lineHeight: 16,
+    },
+    option: {
+      text: 14,
+    },
+  },
+  [Size.Default]: {
+    height: 36,
+    width: 194,
+    text: 14,
+    label: {
+      text: 14,
+      lineHeight: 16,
+    },
+    description: {
+      text: 14,
+      lineHeight: 20,
+    },
+    option: {
+      text: 14,
+    },
+  },
+  [Size.Large]: {
+    height: 48,
+    width: 230,
+    text: 18,
+    label: {
+      text: 18,
+      lineHeight: 21,
+    },
+    description: {
+      text: 18,
+      lineHeight: 24,
+    },
+    option: {
+      text: 16,
+    },
+  },
+};
+
+export const mobileSizeSet: SizeSet = {
+  height: 36,
+  width: 194,
+  text: 16,
+  label: {
+    text: 16,
+    lineHeight: 19,
+  },
+  description: {
+    text: 16,
+    lineHeight: 22,
+  },
+  option: {
+    text: 16,
+  },
+};
diff --git a/packages/select/src/utils.tsx b/packages/select/src/utils.tsx
new file mode 100644
index 0000000000..d3a88eccea
--- /dev/null
+++ b/packages/select/src/utils.tsx
@@ -0,0 +1,236 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { isComponentType } from '@leafygreen-ui/lib';
+import {
+  InternalOption,
+  InternalProps as InternalOptionProps,
+  OptionElement,
+  ReactEmpty,
+} from './Option';
+import { InternalOptionGroup, OptionGroupElement } from './OptionGroup';
+import { isFragment } from 'react-is';
+
+function isReactEmpty(value: React.ReactNode): value is ReactEmpty {
+  return (
+    value === undefined || value === null || value === false || value === ''
+  );
+}
+
+export function traverseSelectChildren(
+  children: React.ReactNode,
+  optionFn: (child: OptionElement, group?: OptionGroupElement) => void,
+): void {
+  React.Children.forEach(children, child => {
+    if (isComponentType<OptionElement>(child, 'Option')) {
+      optionFn(child);
+    } else if (isComponentType<OptionGroupElement>(child, 'OptionGroup')) {
+      traverseSelectChildren(child.props.children, option =>
+        optionFn(option, child),
+      );
+    } else if (isFragment(child)) {
+      traverseSelectChildren(child.props.children, optionFn);
+    }
+  });
+}
+
+export function convertToInternalElements(
+  children: React.ReactNode,
+  optionFn: (
+    child: OptionElement,
+    group?: OptionGroupElement,
+  ) => InternalOptionProps,
+  fallbackFn?: (child: React.ReactNode) => void,
+): React.ReactNode {
+  return React.Children.map(children, child => {
+    if (isComponentType<OptionElement>(child, 'Option')) {
+      return <InternalOption {...optionFn(child)} />;
+    } else if (isComponentType<OptionGroupElement>(child, 'OptionGroup')) {
+      const { children: options, ...rest } = child.props;
+      return (
+        <InternalOptionGroup className={undefined} {...rest}>
+          {convertToInternalElements(
+            options,
+            option => optionFn(option, child),
+            fallbackFn,
+          )}
+        </InternalOptionGroup>
+      );
+    } else if (isFragment(child)) {
+      return convertToInternalElements(
+        child.props.children,
+        optionFn,
+        fallbackFn,
+      );
+    } else if (!isReactEmpty(child)) {
+      fallbackFn?.(child);
+    }
+
+    return null;
+  });
+}
+
+export function getOptionValue(option: OptionElement | null): string {
+  if (option === null) {
+    return '';
+  }
+
+  if (option.props.value !== undefined) {
+    return option.props.value;
+  }
+
+  if (Array.isArray(option.props.children)) {
+    return option.props.children.filter(child => !isReactEmpty(child)).join('');
+  }
+
+  return option.props.children.toString();
+}
+
+export function isOptionDisabled(
+  option: OptionElement,
+  group: OptionGroupElement | undefined,
+): boolean {
+  return (option.props.disabled ?? false) || (group?.props?.disabled ?? false);
+}
+
+export function isOptionSelectable(
+  option: OptionElement,
+  group: OptionGroupElement | undefined,
+  value: string,
+): boolean {
+  return getOptionValue(option) === value && !isOptionDisabled(option, group);
+}
+
+/**
+ * Given the selected option from a previous render, attempts to find a
+ * match among the options of the next render to become the next selected
+ * option, so that the state of the component doesn't need to be lost.
+ */
+export function reconcileOption(
+  children: React.ReactNode,
+  previousOption: OptionElement,
+): OptionElement | null {
+  // we disregard `key`s because they should only be compared in
+  // the context of the same parent element, which we don't know
+  // and would be complex to track. we disregard which option
+  // group the previous option was in as well for simplicity.
+  let sameInstance: OptionElement | undefined;
+  let sameChildrenAndValue: OptionElement | undefined;
+  let sameExplicitValue: OptionElement | undefined;
+  let sameValue: OptionElement | undefined;
+
+  traverseSelectChildren(children, option => {
+    if (option === previousOption) {
+      sameInstance = previousOption;
+    } else if (
+      option.props.children === previousOption.props.children &&
+      option.props.value === previousOption.props.value
+    ) {
+      sameChildrenAndValue ??= option;
+    } else if (
+      option.props.value !== undefined &&
+      option.props.value === previousOption.props.value
+    ) {
+      sameExplicitValue ??= option;
+    } else if (getOptionValue(option) === getOptionValue(previousOption)) {
+      sameValue ??= option;
+    }
+  });
+
+  return (
+    sameInstance ??
+    sameChildrenAndValue ??
+    sameExplicitValue ??
+    sameValue ??
+    null
+  );
+}
+
+export function useObservedRef<T>(
+  callback: (value: T) => void,
+  initialValue: T,
+  options: { initialValue: T; deps?: React.DependencyList },
+): React.MutableRefObject<T>;
+export function useObservedRef<T>(
+  callback: (value: T) => void,
+  options?: { initialValue: T | null; deps?: React.DependencyList },
+): React.RefObject<T>;
+export function useObservedRef<T>(
+  callback: (value: T | undefined) => void,
+  options?: { deps?: React.DependencyList },
+): React.MutableRefObject<T>;
+export function useObservedRef<T>(
+  callback: (value: T | null | undefined) => void,
+  {
+    initialValue,
+    deps = [],
+  }: { initialValue?: T | null; deps?: React.DependencyList } = {},
+) {
+  const ref = useRef(initialValue);
+
+  return useMemo(
+    () => ({
+      get current() {
+        return ref.current;
+      },
+      set current(nextValue) {
+        ref.current = nextValue;
+        callback(nextValue);
+      },
+    }),
+    [
+      callback,
+      ref,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps,
+    ],
+  );
+}
+
+type SettableRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
+
+type ValueOrArray<T> = T | ReadonlyArray<T>;
+
+export function useForwardedRef<T>(
+  forwardedRefOrRefs: ValueOrArray<SettableRef<T> | null>,
+  initialValue: T,
+): React.MutableRefObject<T>;
+export function useForwardedRef<T>(
+  forwardedRefOrRefs: ValueOrArray<SettableRef<T | null> | null>,
+  initialValue: T | null,
+): React.RefObject<T>;
+export function useForwardedRef<T>(
+  forwardedRefOrRefs: ValueOrArray<SettableRef<T | null | undefined> | null>,
+  initialValue?: T | null,
+): React.MutableRefObject<T | null | undefined> {
+  const forwardValueToRefs = useCallback(
+    <T,>(
+      forwardedRefOrRefs: ValueOrArray<SettableRef<T> | null>,
+      nextValue: T,
+    ) => {
+      if (Array.isArray(forwardedRefOrRefs)) {
+        forwardedRefOrRefs.forEach(forwardValueToRefs);
+      } else if (typeof forwardedRefOrRefs === 'function') {
+        forwardedRefOrRefs(nextValue);
+      } else if (forwardedRefOrRefs) {
+        // @ts-expect-error https://github.com/microsoft/TypeScript/issues/40527
+        forwardedRefOrRefs.current = nextValue;
+      }
+    },
+    [],
+  );
+
+  return useObservedRef(
+    useCallback(value => forwardValueToRefs(forwardedRefOrRefs, value), [
+      forwardedRefOrRefs,
+      forwardValueToRefs,
+    ]),
+    { initialValue },
+  );
+}
+
+/**
+ * TODO: Explore obsoleting `useElementNode` in favor of this
+ */
+export const useStateRef: typeof useRef = <T,>(initialValue?: T) => {
+  const [value, setValue] = useState(initialValue);
+  return useObservedRef(setValue, { initialValue, deps: [value] });
+};
diff --git a/packages/select/tsconfig.json b/packages/select/tsconfig.json
new file mode 100644
index 0000000000..9bc97f46a8
--- /dev/null
+++ b/packages/select/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "extends": "../../package.tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*"],
+  "references": [
+    {
+      "path": "../button"
+    },
+    {
+      "path": "../emotion"
+    },
+    {
+      "path": "../hooks"
+    },
+    {
+      "path": "../icon"
+    },
+    {
+      "path": "../leafygreen-provider"
+    },
+    {
+      "path": "../lib"
+    },
+    {
+      "path": "../palette"
+    },
+    {
+      "path": "../popover"
+    },
+    {
+      "path": "../tokens"
+    }
+  ]
+}
diff --git a/rollup.config.js b/rollup.config.js
index 95e81fba0f..7056169084 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -144,6 +144,7 @@ const config = ['esm', 'umd'].flatMap(format => {
         'create-emotion-server',
         'polished',
         'prop-types',
+        'react-is',
         'react-transition-group',
         '@testing-library/react',
         'lodash',
diff --git a/scripts/jestSSRSetup.js b/scripts/jestSSRSetup.js
index bd2254b6fc..01498e5726 100644
--- a/scripts/jestSSRSetup.js
+++ b/scripts/jestSSRSetup.js
@@ -51,43 +51,39 @@ Context.within(new ArtificialServerContext(), () => {
 const { CacheProvider } = require('@emotion/core');
 const { cache, extractCritical } = require('@leafygreen-ui/emotion');
 
-const originalRender = ReactDOM.render;
-
 const stylesToCleanup = new Set();
 let registeredStyleCleanup = false;
 
 ReactDOM.render = (element, container, callback) => {
   element = React.createElement(CacheProvider, { value: cache }, element);
 
-  if (container._reactRootContainer) {
-    // No need to hydrate since component is already mounted
-    return originalRender(element, container, callback);
-  }
-
-  const { html, css, ids } = extractCritical(
-    Context.within(new ArtificialServerContext(), () =>
-      ReactDOMServer.renderToString(element),
-    ),
-  );
+  if (!container._reactRootContainer) {
+    const { html, css, ids } = extractCritical(
+      Context.within(new ArtificialServerContext(), () =>
+        ReactDOMServer.renderToString(element),
+      ),
+    );
 
-  // Client-only Emotion renders the style tags inline, but SSR requires
-  // manually adding the style tags https://emotion.sh/docs/ssr#on-server
-  const style = document.createElement('style');
-  style.setAttribute('data-emotion-css', ids.join(' '));
-  style.innerHTML = css;
-  document.head.appendChild(style);
-  stylesToCleanup.add(style);
+    // Client-only Emotion renders the style tags inline, but SSR requires
+    // manually adding the style tags https://emotion.sh/docs/ssr#on-server
+    const style = document.createElement('style');
+    style.setAttribute('data-emotion-css', ids.join(' '));
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    stylesToCleanup.add(style);
 
-  if (!registeredStyleCleanup) {
-    registeredStyleCleanup = true;
-    afterEach(() => {
-      stylesToCleanup.forEach(style => {
-        style.remove();
-        stylesToCleanup.delete(style);
+    if (!registeredStyleCleanup) {
+      registeredStyleCleanup = true;
+      afterEach(() => {
+        stylesToCleanup.forEach(style => {
+          style.remove();
+          stylesToCleanup.delete(style);
+        });
       });
-    });
+    }
+
+    container.innerHTML = html;
   }
 
-  container.innerHTML = html;
   return ReactDOM.hydrate(element, container, callback);
 };
diff --git a/yarn.lock b/yarn.lock
index 4f5db84858..f7c38f7a5a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -459,6 +459,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.0"
 
+"@babel/plugin-proposal-logical-assignment-operators@7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.1.tgz#f2c490d36e1b3c9659241034a5d2cd50263a2751"
+  integrity sha512-k8ZmVv0JU+4gcUGeCDZOGd0lCIamU/sMtIiX3UWnUc5yzgq6YUGyEolNYD+MLYKfSzgECPcqetVcJP9Afe/aCA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
 "@babel/plugin-proposal-logical-assignment-operators@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz#9f80e482c03083c87125dee10026b58527ea20c8"
@@ -1254,6 +1262,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.3.3", "@babel/template@^7.7.4", "@babel/template@^7.8.6":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -4299,6 +4314,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-is@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.0.tgz#6b60190ae60591ae0c83d6f3854e61e08f5a7976"
+  integrity sha512-A0DQ1YWZ0RG2+PV7neAotNCIh8gZ3z7tQnDJyS2xRPDNtAtSPcJ9YyfMP8be36Ha0kQRzbZCrrTMznA4blqO5g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -13980,6 +14002,13 @@ polished@^4.0.1:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+polished@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.0.3.tgz#e2bde249f8884bdabc6997dd3eca225ee32f7a26"
+  integrity sha512-yOALHMrqcYHlHIxFkHvGX8NGsjsbSaYMZ8Z3uEElVpzF5ZgNmTgqMOh4bnSVXGC6sXjBTZCH6+GebTRWhJR4zQ==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+
 popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"