diff --git a/cypress/component/SelectPreview.spec.tsx b/cypress/component/SelectPreview.spec.tsx
new file mode 100644
index 0000000000..76c20a2cdb
--- /dev/null
+++ b/cypress/component/SelectPreview.spec.tsx
@@ -0,0 +1,948 @@
+import * as React from 'react';
+import * as h from '../helpers';
+// Left Examples
+import {
+  DefaultLeft,
+  AlertLeft,
+  ErrorLeft,
+  DisabledLeft,
+  ScrollableLeft,
+} from '../../modules/preview-react/select/stories/examples/Left Label';
+// Top Examples
+import {
+  Default,
+  Alert,
+  Error,
+  Disabled,
+  Scrollable,
+} from '../../modules/preview-react/select/stories/examples/Top Label';
+import {
+  AccessibilityTest,
+  DisabledOptionsTest,
+  PortalTest,
+} from '../../modules/preview-react/select/stories/stories_CypressTesting';
+
+function getAssistiveFocus($menu: JQuery): JQuery {
+  const activeId = $menu.attr('aria-activedescendant');
+  return $menu.find(`[id="${activeId}"]`);
+}
+
+function assertOptionInView($option: JQuery) {
+  const option = $option[0];
+  const $menu = $option.parent();
+  const menu = $menu[0];
+
+  const menuBorderTopWidth = parseInt($menu.css('borderTopWidth'), 10);
+
+  const menuViewTop = menu.scrollTop + menuBorderTopWidth;
+  const menuViewBottom = menuViewTop + menu.clientHeight;
+  const optionTop = option.offsetTop;
+  const optionBottom = optionTop + option.offsetHeight;
+
+  const optionInView = optionTop >= menuViewTop && optionBottom <= menuViewBottom;
+
+  expect(optionInView).to.equal(true);
+}
+
+function assertOptionCenteredInView($option: JQuery) {
+  const option = $option[0];
+  const $menu = $option.parent();
+  const menu = $menu[0];
+
+  const menuBorderTopWidth = parseInt($menu.css('borderTopWidth'), 10);
+
+  const expectedMenuScrollTop = Math.floor(
+    option.offsetTop - menu.clientHeight / 2 - menuBorderTopWidth + option.clientHeight / 2
+  );
+
+  expect(menu.scrollTop).to.equal(expectedMenuScrollTop);
+}
+
+describe('Select', () => {
+  [Default, Alert, Error, DefaultLeft, AlertLeft, ErrorLeft].forEach(Story => {
+    context(`given the "${Story.name}" story is rendered`, () => {
+      beforeEach(() => {
+        cy.mount(<Story />);
+      });
+
+      it('should not have any axe errors', () => {
+        cy.checkA11y();
+      });
+
+      context('when the select button is clicked', () => {
+        beforeEach(() => {
+          cy.findByLabelText('Label').click();
+        });
+
+        it('should not have any axe errors', () => {
+          cy.checkA11y('[role="listbox"]', {
+            rules: {
+              'aria-input-field-name': {enabled: false},
+              'scrollable-region-focusable': {enabled: false},
+            },
+          });
+        });
+
+        context('the select button', () => {
+          it('should have an aria-expanded attribute set to "true"', () => {
+            cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
+          });
+        });
+
+        context('the menu', () => {
+          it('should be visible', () => {
+            cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).should('be.visible');
+          });
+
+          it('should have focus', () => {
+            cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).should('be.focused');
+          });
+
+          it('should have an aria-activedescendant attribute with the same value as the id of the first option ("E-mail")', () => {
+            cy.findByLabelText('Label')
+              .pipe(h.selectPreview.getMenu)
+              .should($menu => {
+                const menuAD = $menu.attr('aria-activedescendant');
+                const optionId = $menu.find(`[role=option]:eq(0)`).attr('id');
+
+                expect(menuAD).to.equal(optionId);
+              });
+          });
+
+          it('should set assistive focus to the first option ("E-mail")', () => {
+            cy.findByLabelText('Label')
+              .pipe(h.selectPreview.getMenu)
+              .pipe(getAssistiveFocus)
+              .should('have.text', 'E-mail');
+          });
+        });
+
+        context('the first option ("Mail")', () => {
+          it('should have an aria-selected attribute set to "true"', () => {
+            cy.findByLabelText('Label')
+              .pipe(h.selectPreview.getOption(0))
+              .should('have.attr', 'aria-selected', 'true');
+          });
+        });
+
+        context(`when the "Phone" option (with the value "phone") is clicked`, () => {
+          beforeEach(() => {
+            cy.findByLabelText('Label').pipe(h.selectPreview.getOption('Phone')).click();
+          });
+
+          context('the select button', () => {
+            it(`should read "Phone"`, () => {
+              cy.findByLabelText('Label').should('have.text', 'Phone');
+            });
+
+            it(`should have a value of "phone"`, () => {
+              cy.findByLabelText('Label').should('have.value', 'phone');
+            });
+
+            it(`should re-acquire focus`, () => {
+              cy.findByLabelText('Label').should('be.focused');
+            });
+          });
+
+          context('the menu', () => {
+            it('should not be visible', () => {
+              cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).should('not.exist');
+            });
+          });
+
+          context('when the menu is opened again', () => {
+            beforeEach(() => {
+              cy.findByLabelText('Label').click();
+            });
+
+            context('the menu', () => {
+              it('should set assistive focus to the "Phone" option', () => {
+                cy.findByLabelText('Label')
+                  .pipe(h.selectPreview.getMenu)
+                  .pipe(getAssistiveFocus)
+                  .should('have.text', 'Phone');
+              });
+            });
+
+            context('the "Phone" option', () => {
+              it('should have an aria-selected attribute set to "true"', () => {
+                cy.findByLabelText('Label')
+                  .pipe(h.selectPreview.getOption('Phone'))
+                  .should('have.attr', 'aria-selected', 'true');
+              });
+            });
+          });
+        });
+      });
+
+      context('when the select button is focused', () => {
+        beforeEach(() => {
+          cy.findByLabelText('Label').focus();
+        });
+
+        context('when the down arrow key is pressed', () => {
+          beforeEach(() => {
+            cy.focused().realType('{downarrow}');
+          });
+
+          context('the select button', () => {
+            it('should have an aria-expanded attribute set to "true"', () => {
+              cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
+            });
+          });
+
+          context('the menu', () => {
+            it('should be visible', () => {
+              cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).should('be.visible');
+            });
+
+            it('should have focus', () => {
+              cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).should('be.focused');
+            });
+          });
+
+          context('when the down arrow key is pressed for a second time', () => {
+            beforeEach(() => {
+              cy.focused().realType('{downarrow}');
+            });
+
+            context('the menu', () => {
+              it('should set assistive focus to the "Phone" option', () => {
+                cy.findByLabelText('Label')
+                  .pipe(h.selectPreview.getMenu)
+                  .pipe(getAssistiveFocus)
+                  .should('have.text', 'Phone');
+              });
+            });
+
+            context('when the down arrow key is pressed for a third time', () => {
+              beforeEach(() => {
+                cy.focused().realType('{downarrow}');
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the "Mail" option', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'Mail');
+                });
+              });
+
+              context('when the enter key is pressed', () => {
+                beforeEach(() => {
+                  cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).realType('{enter}');
+                });
+
+                context('the select button', () => {
+                  it(`should read "Mail"`, () => {
+                    cy.findByLabelText('Label').should('have.text', 'Mail');
+                  });
+
+                  it(`should have a value of "mail"`, () => {
+                    cy.findByLabelText('Label').should('have.value', 'mail');
+                  });
+
+                  it(`should re-acquire focus`, () => {
+                    cy.findByLabelText('Label').should('be.focused');
+                  });
+                });
+
+                context('the menu', () => {
+                  it('should not be visible', () => {
+                    cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).should('not.exist');
+                  });
+                });
+
+                context('when the menu is expanded again', () => {
+                  beforeEach(() => {
+                    cy.focused().realType('{downarrow}');
+                  });
+
+                  context('the menu', () => {
+                    it('should set assistive focus to the "Mail" option', () => {
+                      cy.findByLabelText('Label')
+                        .pipe(h.selectPreview.getMenu)
+                        .pipe(getAssistiveFocus)
+                        .should('have.text', 'Mail');
+                    });
+                  });
+
+                  context('the "Mail" option', () => {
+                    it('should have an aria-selected attribute set to "true"', () => {
+                      cy.findByLabelText('Label')
+                        .pipe(h.selectPreview.getOption('Mail'))
+                        .should('have.attr', 'aria-selected', 'true');
+                    });
+                  });
+                });
+              });
+            });
+
+            context('when the up arrow key is pressed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).realType('{uparrow}');
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the "E-mail" option', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'E-mail');
+                });
+              });
+            });
+          });
+        });
+
+        context('when the enter key is pressed', () => {
+          beforeEach(() => {
+            cy.findByLabelText('Label').realType('{enter}');
+          });
+
+          context('the select button', () => {
+            it('should have an aria-expanded attribute set to "true"', () => {
+              cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
+            });
+          });
+        });
+
+        context('when the space key is pressed', () => {
+          beforeEach(() => {
+            cy.findByLabelText('Label').type(' ', {force: true}); // disable event.preventDefault checks
+          });
+
+          context('the select button', () => {
+            it('should have an aria-expanded attribute set to "true"', () => {
+              cy.findByLabelText('Label').should('have.attr', 'aria-expanded', 'true');
+            });
+          });
+        });
+      });
+
+      context('when the "select" helper is used to select "Mail"', () => {
+        beforeEach(() => {
+          cy.findByLabelText('Label').pipe(h.selectPreview.select('Mail'));
+        });
+
+        it('should have a value of "mail"', () => {
+          cy.findByLabelText('Label').should('have.value', 'mail');
+        });
+      });
+
+      context('when the "select" helper is used to select /^Mail$/', () => {
+        beforeEach(() => {
+          cy.findByLabelText('Label').pipe(h.selectPreview.select(/^Mail$/));
+        });
+
+        it('should have a value of "mail"', () => {
+          cy.findByLabelText('Label').should('have.value', 'mail');
+        });
+      });
+    });
+  });
+
+  context(`given the "Default" story is rendered`, () => {
+    beforeEach(() => {
+      cy.mount(<Default />);
+    });
+
+    context('when the menu is opened', () => {
+      beforeEach(() => {
+        cy.findByLabelText('Label').focus().realType('{downarrow}');
+      });
+
+      context('the menu', () => {
+        it('should set assistive focus to the first option ("E-mail")', () => {
+          cy.findByLabelText('Label')
+            .pipe(h.selectPreview.getMenu)
+            .pipe(getAssistiveFocus)
+            .should('have.text', 'E-mail');
+        });
+      });
+
+      context('when focus is advanced to the second option ("Phone")', () => {
+        beforeEach(() => {
+          cy.focused().realType('{downarrow}');
+        });
+
+        context('the menu', () => {
+          it('should set assistive focus to the second option ("Phone")', () => {
+            cy.findByLabelText('Label')
+              .pipe(h.selectPreview.getMenu)
+              .pipe(getAssistiveFocus)
+              .should('have.text', 'Phone');
+          });
+        });
+
+        context(
+          'when the menu is closed WITHOUT selecting the newly focused option ("Phone")',
+          () => {
+            beforeEach(() => {
+              cy.focused().realType('{esc}');
+            });
+
+            context('when the menu is re-opened AFTER it has fully closed', () => {
+              beforeEach(() => {
+                // Wait for menu to fully close before we open it again (so we
+                // don't interrupt the menu's closing animation and cause it to
+                // re-open while it's in the middle of closing)
+                cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).should('not.exist');
+                cy.findByLabelText('Label').focus().realType('{downarrow}');
+              });
+
+              context('the menu', () => {
+                it('should have reset assistive focus to the first option ("E-mail")', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'E-mail');
+                });
+              });
+            });
+
+            context('when the menu is re-opened BEFORE it has fully closed', () => {
+              beforeEach(() => {
+                cy.focused().realType('{downarrow}');
+              });
+
+              context('the menu', () => {
+                it('should still have assistive focus set to the second option ("Phone")', () => {
+                  // Focus is shifting between the button and menu as we close
+                  // and open the menu. It's important that we use getMenu rather
+                  // than cy.focused() to ensure we obtain a reference to the menu.
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'Phone');
+                });
+              });
+            });
+          }
+        );
+      });
+    });
+  });
+
+  [Disabled, DisabledLeft].forEach(Story => {
+    context(`given the "${Story.name}" story is rendered`, () => {
+      beforeEach(() => {
+        cy.mount(<Story />);
+      });
+
+      it('should not have any axe errors', () => {
+        cy.checkA11y();
+      });
+
+      context('the select button', () => {
+        it('should be disabled', () => {
+          cy.findByLabelText('Label').should('be.disabled');
+        });
+      });
+    });
+  });
+
+  context('given the "Disabled Options Test" story is rendered', () => {
+    beforeEach(() => {
+      cy.mount(<DisabledOptionsTest />);
+    });
+
+    context('when the menu is opened', () => {
+      beforeEach(() => {
+        cy.findByLabelText('Label (Disabled Options)').focus().realType('{downarrow}');
+      });
+
+      context('the "Carrier Pigeon" option', () => {
+        it('should have an aria-disabled attribute set to "true"', () => {
+          cy.findByLabelText('Label (Disabled Options)')
+            .pipe(h.selectPreview.getOption('Carrier Pigeon'))
+            .should('have.attr', 'aria-disabled', 'true');
+        });
+      });
+
+      context('when the down arrow key is pressed', () => {
+        beforeEach(() => {
+          cy.focused().realType('{downarrow}');
+        });
+
+        context('the menu', () => {
+          it('should set assistive focus to first enabled option ("E-mail")', () => {
+            cy.findByLabelText('Label (Disabled Options)')
+              .pipe(h.selectPreview.getMenu)
+              .pipe(getAssistiveFocus)
+              .should('have.text', 'E-mail');
+          });
+        });
+
+        context('when the up arrow key is pressed', () => {
+          beforeEach(() => {
+            cy.focused().realType('{uparrow}');
+          });
+
+          context('the menu', () => {
+            it('should retain assistive focus on the "E-mail" option since the previous option ("Carrier Pigeon", which also happens to be the first option) is disabled', () => {
+              cy.findByLabelText('Label (Disabled Options)')
+                .pipe(h.selectPreview.getMenu)
+                .pipe(getAssistiveFocus)
+                .should('have.text', 'E-mail');
+            });
+          });
+        });
+
+        context('when the down arrow key is pressed 2 more times', () => {
+          beforeEach(() => {
+            cy.focused().realType('{downarrow}{downarrow}');
+          });
+
+          context('the menu', () => {
+            it('should set assistive focus to the third option down ("Mail") since focus will have skipped one disabled option ("Fax")', () => {
+              cy.findByLabelText('Label (Disabled Options)')
+                .pipe(h.selectPreview.getMenu)
+                .pipe(getAssistiveFocus)
+                .should('have.text', 'Mail');
+            });
+          });
+
+          context('when the down arrow key is pressed 2 more times', () => {
+            beforeEach(() => {
+              cy.focused().realType('{downarrow}{downarrow}');
+            });
+
+            context('the menu', () => {
+              it('should set assistive focus to the first option down ("Mobile Phone") since the second option down ("Telegram", which also happens to be the last option) is disabled', () => {
+                cy.findByLabelText('Label (Disabled Options)')
+                  .pipe(h.selectPreview.getMenu)
+                  .pipe(getAssistiveFocus)
+                  .should('have.text', 'Mobile Phone');
+              });
+            });
+          });
+        });
+      });
+
+      context('when the Home key is pressed', () => {
+        beforeEach(() => {
+          cy.focused().realType('{home}');
+        });
+
+        context('the menu', () => {
+          it('should set assistive focus to the first enabled option ("E-mail")', () => {
+            cy.findByLabelText('Label (Disabled Options)')
+              .pipe(h.selectPreview.getMenu)
+              .pipe(getAssistiveFocus)
+              .should('have.text', 'E-mail');
+          });
+        });
+      });
+
+      context('when the End key is pressed', () => {
+        beforeEach(() => {
+          cy.focused().realType('{end}');
+        });
+
+        context('the menu', () => {
+          it('should set assistive focus to the last enabled option ("Mobile Phone")', () => {
+            cy.findByLabelText('Label (Disabled Options)')
+              .pipe(h.selectPreview.getMenu)
+              .pipe(getAssistiveFocus)
+              .should('have.text', 'Mobile Phone');
+          });
+        });
+      });
+    });
+  });
+
+  [Scrollable, ScrollableLeft].forEach(Story => {
+    context(`given the "${Story.name}" story is rendered`, () => {
+      beforeEach(() => {
+        cy.mount(<Story />);
+      });
+
+      context('when the select button is focused', () => {
+        beforeEach(() => {
+          cy.findByLabelText('Label').focus();
+        });
+
+        context(
+          'when a character is typed (provided no other characters have been typed in the last 500ms), the select should select the first matching option beyond the currently selected option (cycling back to the beginning of the options if necessary)',
+          () => {
+            context('when "s" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').realType('s');
+              });
+
+              context('the select button', () => {
+                it('should read the first option beginning with "s" ("San Francisco (United States)")', () => {
+                  cy.findByLabelText('Label').should('have.text', 'San Francisco (United States)');
+                });
+
+                it(`should have a value of "san-francisco"`, () => {
+                  cy.findByLabelText('Label').should('have.value', 'san-francisco');
+                });
+              });
+            });
+
+            context('when "s{500ms delay}s" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').realType('ss', {delay: 500});
+              });
+
+              context('the select button', () => {
+                it('should read the second option beginning with "s" ("San Mateo (United States)")', () => {
+                  cy.findByLabelText('Label').should('have.text', 'San Mateo (United States)');
+                });
+              });
+            });
+
+            context('when "s{500ms delay}d" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').realType('sd', {delay: 500});
+              });
+
+              context('the select button', () => {
+                it('should read the first option beginning with "d" ("Dallas (United States)")', () => {
+                  cy.findByLabelText('Label').should('have.text', 'Dallas (United States)');
+                });
+              });
+            });
+          }
+        );
+
+        context(
+          'when multiple characters are typed in rapid succession (<500ms between keystrokes), thus forming a string, and multiple options begin with that string, the select should retain the currently selected option for as long as possible (instead of cycling selection between matching options with each keystroke)',
+          () => {
+            context('when "sa" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').realType('sa');
+              });
+
+              context('the select button', () => {
+                it('should read "San Francisco (United States)"', () => {
+                  cy.findByLabelText('Label').should('have.text', 'San Francisco (United States)');
+                });
+              });
+            });
+
+            context('when "san " is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').realType('san ');
+              });
+
+              context('the select button', () => {
+                it('should read "San Francisco (United States)"', () => {
+                  cy.findByLabelText('Label').should('have.text', 'San Francisco (United States)');
+                });
+              });
+            });
+
+            context('when "san m" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').realType('san m');
+              });
+
+              context('the select button', () => {
+                it('should read "San Mateo (United States)"', () => {
+                  cy.findByLabelText('Label').should('have.text', 'San Mateo (United States)');
+                });
+              });
+            });
+          }
+        );
+
+        // TODO: Figure out why this test doesn't open the menu when the
+        // space key is pressed when using Firefox with Cypress (pressing
+        // the space key in the middle of a typeahead string in normal
+        // usage of Firefox opens the menu, see SelectBase)
+        // Ensure Firefox doesn't display the menu if there's a space in the
+        // typeahead string
+        // context('when "san " is typed', () => {
+        //   beforeEach(() => {
+        //     cy.findByLabelText('Label').realType('san ');
+        //   });
+
+        //   context('the menu', () => {
+        //     it('should not be visible', () => {
+        //       cy.findByLabelText('Label')
+        //         .pipe(h.selectPreview.getMenu)
+        //         .should('not.exist');
+        //     });
+        //   });
+        // });
+      });
+
+      context('when the menu is opened', () => {
+        beforeEach(() => {
+          cy.findByLabelText('Label').click();
+        });
+
+        context(
+          'when a character is typed (provided no other characters have been typed in the last 500ms), the select should advance assistive focus to the first matching option beyond the currently selected option (cycling back to the beginning of the options if necessary) and scroll that option into view',
+          () => {
+            context('when "s" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).realType('s');
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the first option beginning with "s" ("San Francisco (United States)")', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'San Francisco (United States)');
+                });
+
+                it('should scroll so that the "San Francisco (United States)" option is fully visible', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should(assertOptionInView);
+                });
+              });
+            });
+
+            context('when "s{500ms delay}s" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label')
+                  .pipe(h.selectPreview.getMenu)
+                  .realType('ss', {delay: 500});
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the second option beginning with "s" ("San Mateo (United States)")', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'San Mateo (United States)');
+                });
+
+                it('should scroll so that the "San Mateo (United States)" option is fully visible', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should(assertOptionInView);
+                });
+              });
+            });
+
+            context('when "s{500ms delay}d" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label')
+                  .pipe(h.selectPreview.getMenu)
+                  .realType('sd', {delay: 500});
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the first option beginning with "d" ("Dallas (United States)")', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'Dallas (United States)');
+                });
+
+                it('should scroll so that the "Dallas (United States)" option is fully visible', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should(assertOptionInView);
+                });
+              });
+            });
+
+            context('when "the onto" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).realType('the onto');
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to "The Ontologically..."', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should(
+                      'have.text',
+                      'The Ontologically Anthropocentric Sensory Immersive Simulation (Virtual Reality)'
+                    );
+                });
+
+                it('should scroll so that the "The Ontologically..." (text wrapped) option is fully visible', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should(assertOptionInView);
+                });
+              });
+            });
+          }
+        );
+
+        context(
+          'when multiple characters are typed in rapid succession (<500ms between keystrokes), thus forming a string, and multiple options begin with that string, the select should retain assistive focus on the currently focused option for as long as possible (instead of cycling focus between matching options with each keystroke)',
+          () => {
+            context('when "sa" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).realType('sa');
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the "San Francisco (United States)" option', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'San Francisco (United States)');
+                });
+              });
+            });
+
+            context('when "san " is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).realType('san ');
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the "San Francisco (United States)" option', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'San Francisco (United States)');
+                });
+              });
+            });
+
+            context('when "san m" is typed', () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').pipe(h.selectPreview.getMenu).realType('san m');
+              });
+
+              context('the menu', () => {
+                it('should set assistive focus to the "San Mateo (United States)" option', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should('have.text', 'San Mateo (United States)');
+                });
+              });
+            });
+          }
+        );
+      });
+
+      context(
+        'when the menu is opened and the selected option is initially out of view, the menu should scroll the selected option into view and center it if possible',
+        () => {
+          context('when "Dallas (United States)" is selected and the menu is opened', () => {
+            beforeEach(() => {
+              cy.findByLabelText('Label').focus().type('d').click();
+            });
+
+            context('the menu', () => {
+              it('should scroll so that the "Dallas (United States)" option is centered in view', () => {
+                cy.findByLabelText('Label')
+                  .pipe(h.selectPreview.getMenu)
+                  .pipe(getAssistiveFocus)
+                  .should(assertOptionCenteredInView);
+              });
+            });
+          });
+
+          context(
+            'when "The Ontologically..." (text wrapped) is selected and the menu is opened',
+            () => {
+              beforeEach(() => {
+                cy.findByLabelText('Label').focus().type('the onto').click();
+              });
+
+              context('the menu', () => {
+                it('should scroll so that the "The Ontologically..." option is centered in view', () => {
+                  cy.findByLabelText('Label')
+                    .pipe(h.selectPreview.getMenu)
+                    .pipe(getAssistiveFocus)
+                    .should(assertOptionCenteredInView);
+                });
+              });
+            }
+          );
+        }
+      );
+    });
+
+    context(`given the "Portal Test" story is rendered`, () => {
+      beforeEach(() => {
+        cy.mount(<PortalTest />);
+      });
+
+      context('when the page is scrolled to the bottom', () => {
+        beforeEach(() => {
+          cy.scrollTo('bottom');
+          cy.window().its('scrollY').as('originalWindowScrollY');
+        });
+
+        context('when the bottommost select button is clicked', () => {
+          beforeEach(() => {
+            cy.findByLabelText('Label (Bottom)').click();
+          });
+
+          context('the page', () => {
+            it('should not scroll', () => {
+              cy.window().then($window => {
+                cy.get('@originalWindowScrollY').should('equal', Math.floor($window.scrollY));
+              });
+            });
+          });
+        });
+
+        context(
+          `when the blur test button is clicked and then the bottommost select button (which is re-rendered by the test button's blur handler) is clicked`,
+          () => {
+            beforeEach(() => {
+              cy.findByTestId('blur-test-button').click();
+              cy.findByLabelText('Label (Bottom)').click();
+            });
+
+            context('the page', () => {
+              it('should not scroll', () => {
+                cy.window().then($window => {
+                  cy.get('@originalWindowScrollY').should('equal', Math.floor($window.scrollY));
+                });
+              });
+            });
+          }
+        );
+      });
+    });
+
+    context(`given the "Accessibility Test" story is rendered`, () => {
+      beforeEach(() => {
+        cy.mount(<AccessibilityTest />);
+      });
+
+      context('when the select button with aria-required set to true is clicked', () => {
+        beforeEach(() => {
+          cy.findByLabelText(/Label \(aria-required\)/).click();
+        });
+
+        context('the menu', () => {
+          it('should have an aria-required attribute set to "true"', () => {
+            cy.findByLabelText(/Label \(aria-required\)/)
+              .pipe(h.selectPreview.getMenu)
+              .should('have.attr', 'aria-required', 'true');
+          });
+        });
+      });
+
+      context('when the select button with required set to true is clicked', () => {
+        beforeEach(() => {
+          cy.findByLabelText(/Label \(required\)/).click();
+        });
+
+        context('the menu', () => {
+          it('should have an aria-required attribute set to "true"', () => {
+            cy.findByLabelText(/Label \(required\)/)
+              .pipe(h.selectPreview.getMenu)
+              .should('have.attr', 'aria-required', 'true');
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
index c4cd5af1fe..b4fcc0a656 100644
--- a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
@@ -42,7 +42,6 @@ A note to the reader:
 - [Deprecations](#deprecations)
 - [Removals](#removals)
   - [InputIconContainer](#inputiconcontainer)
-  - [Select (Preview)](#select-preview)
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
   - [Avatar](#avatar)
@@ -80,13 +79,6 @@ deprecated code is removed.
 Removals are deletions from our codebase and you can no longer consume this component. We've either
 promoted or replaced a component or utility.
 
-### Select (Preview)
-
-**PR:** [#2796](https://github.com/Workday/canvas-kit/pull/2796)
-
-We've removed the `Select` component that was in Preview. Please use the compound
-[Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
-
 ### InputIconContainer
 
 **PR:** [#2838](https://github.com/Workday/canvas-kit/pull/2838)
diff --git a/modules/preview-react/index.ts b/modules/preview-react/index.ts
index 3388de841d..d0a5f54083 100644
--- a/modules/preview-react/index.ts
+++ b/modules/preview-react/index.ts
@@ -6,6 +6,7 @@ export * from './menu';
 export * from './pill';
 export * from './radio';
 export * from './segmented-control';
+export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
diff --git a/modules/preview-react/select/LICENSE b/modules/preview-react/select/LICENSE
new file mode 100644
index 0000000000..2bb61ad23f
--- /dev/null
+++ b/modules/preview-react/select/LICENSE
@@ -0,0 +1,126 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and
+   distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the
+   copyright owner or entity authorized by the copyright owner that is granting the License. "Legal
+   Entity" shall mean the union of the acting entity and all other entities that control, are
+   controlled by, or are under common control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the direction or management of such
+   entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an
+   individual or Legal Entity exercising permissions granted by this License. "Source" form shall
+   mean the preferred form for making modifications, including but not limited to software source
+   code, documentation source, and configuration files. "Object" form shall mean any form resulting
+   from mechanical transformation or translation of a Source form, including but not limited to
+   compiled object code, generated documentation, and conversions to other media types. "Work" shall
+   mean the work of authorship, whether in Source or Object form, made available under the License,
+   as indicated by a copyright notice that is included in or attached to the work (an example is
+   provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or
+   Object form, that is based on (or derived from) the Work and for which the editorial revisions,
+   annotations, elaborations, or other modifications represent, as a whole, an original work of
+   authorship. For the purposes of this License, Derivative Works shall not include works that
+   remain separable from, or merely link (or bind by name) to the interfaces of, the Work and
+   Derivative Works thereof. "Contribution" shall mean any work of authorship, including the
+   original version of the Work and any modifications or additions to that Work or Derivative Works
+   thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright
+   owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner.
+   For the purposes of this definition, "submitted" means any form of electronic, verbal, or written
+   communication sent to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems, and issue tracking
+   systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and
+   improving the Work, but excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean
+   Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by
+   Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform,
+   sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made, use, offer to sell, sell,
+   import, and otherwise transfer the Work, where such license applies only to those patent claims
+   licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or
+   by combination of their Contribution(s) with the Work to which such Contribution(s) was
+   submitted. If You institute patent litigation against any entity (including a cross-claim or
+   counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work
+   constitutes direct or contributory patent infringement, then any patent licenses granted to You
+   under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof
+   in any medium, with or without modifications, and in Source or Object form, provided that You
+   meet the following conditions: You must give any other recipients of the Work or Derivative Works
+   a copy of this License; and You must cause any modified files to carry prominent notices stating
+   that You changed the files; and You must retain, in the Source form of any Derivative Works that
+   You distribute, all copyright, patent, trademark, and attribution notices from the Source form of
+   the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If
+   the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works
+   that You distribute must include a readable copy of the attribution notices contained within such
+   NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in
+   at least one of the following places: within a NOTICE text file distributed as part of the
+   Derivative Works; within the Source form or documentation, if provided along with the Derivative
+   Works; or, within a display generated by the Derivative Works, if and wherever such third-party
+   notices normally appear. The contents of the NOTICE file are for informational purposes only and
+   do not modify the License. You may add Your own attribution notices within Derivative Works that
+   You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such
+   additional attribution notices cannot be construed as modifying the License. You may add Your own
+   copyright statement to Your modifications and may provide additional or different license terms
+   and conditions for use, reproduction, or distribution of Your modifications, or for any such
+   Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work
+   otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution
+   intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms
+   and conditions of this License, without any additional terms or conditions. Notwithstanding the
+   above, nothing herein shall supersede or modify the terms of any separate license agreement you
+   may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service
+   marks, or product names of the Licensor, except as required for reasonable and customary use in
+   describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor
+   provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT
+   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation,
+   any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or
+   redistributing the Work and assume any risks associated with Your exercise of permissions under
+   this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including
+   negligence), contract, or otherwise, unless required by applicable law (such as deliberate and
+   grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for
+   damages, including any direct, indirect, special, incidental, or consequential damages of any
+   character arising as a result of this License or out of the use or inability to use the Work
+   (including but not limited to damages for loss of goodwill, work stoppage, computer failure or
+   malfunction, or any and all other commercial damages or losses), even if such Contributor has
+   been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works
+   thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty,
+   indemnity, or other liability obligations and/or rights consistent with this License. However, in
+   accepting such obligations, You may act only on Your own behalf and on Your sole responsibility,
+   not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each
+   Contributor harmless for any liability incurred by, or claims asserted against, such Contributor
+   by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of
+Workday, Inc. All other brand and product names are trademarks or registered trademarks of their
+respective holders.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.
diff --git a/modules/preview-react/select/README.MD b/modules/preview-react/select/README.MD
new file mode 100644
index 0000000000..dc196ee7e1
--- /dev/null
+++ b/modules/preview-react/select/README.MD
@@ -0,0 +1,236 @@
+# Canvas Kit Select (with Canvas-styled Menu)
+
+<a href="https://github.com/Workday/canvas-kit/tree/master/modules/preview-react/README.md">
+  <img src="https://img.shields.io/badge/PREVIEW-beta-blueviolet" alt="PREVIEW: Beta" />
+</a> This component is in Preview because it has not been converted to a [Compound Component](../../docs/mdx/COMPOUND_COMPONENTS.mdx) yet.
+
+A Canvas-styled Select with a Canvas-styled menu. This is a
+[_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.
+
+Undocumented props (`disabled`, `name`, etc.) should behave similarly to how you would expect from a
+standard `<select>` element.
+
+The menu is rendered using a portal by way of the Canvas Kit Popper.
+
+**Note:** There is also a non-Labs Select. The non-Labs Select uses the standard browser-provided
+menu whereas the Labs Select uses a custom Canvas-styled menu.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+#### Example
+
+In this example, `options` is an array of objects. Each option contains a `label` (analagous to the
+text content of an `<option>`) and a `value` (analagous to the `value` attribute of an `<option>`).
+
+**Note:** While a base Select component is provided in this package, it is **not accessible** when
+used as is. It should be used in tandem with [`FormField`](../../../form-field/react) to be made
+fully accessible (see below).
+
+```tsx
+import * as React from 'react';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+
+function Example() {
+  const options = [
+    {label: 'E-mail', value: 'email'},
+    {label: 'Phone', value: 'phone'},
+    {label: 'Fax (disabled)', value: 'fax', disabled: true},
+    {label: 'Mail', value: 'mail'},
+  ];
+
+  const [value, setValue] = React.useState('email');
+
+  const handleChange = event => {
+    setValue(event.currentTarget.value);
+  };
+
+  return <Select onChange={handleChange} options={options} value={value} />;
+}
+```
+
+#### Accessible Example
+
+```tsx
+import * as React from 'react';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+function Example() {
+  const options = [
+    {label: 'E-mail', value: 'email'},
+    {label: 'Phone', value: 'phone'},
+    {label: 'Fax (disabled)', value: 'fax', disabled: true},
+    {label: 'Mail', value: 'mail'},
+  ];
+
+  const [value, setValue] = React.useState('email');
+
+  const handleChange = event => {
+    setValue(event.currentTarget.value);
+  };
+
+  return (
+    <FormField label="My Select Field" inputId="my-select-field">
+      <Select onChange={handleChange} options={options} value={value} />
+    </FormField>
+  );
+}
+```
+
+#### Example with Array of Strings
+
+`options` may also be formatted as an array of strings rather than an array of objects.
+
+```tsx
+import * as React from 'react';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+function Example() {
+  const options = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
+
+  const [value, setValue] = React.useState('California');
+
+  const handleChange = event => {
+    setValue(event.currentTarget.value);
+  };
+
+  return (
+    <FormField label="My Select Field" inputId="my-select-field">
+      <Select onChange={handleChange} options={options} value={value} />
+    </FormField>
+  );
+}
+```
+
+#### Example with Custom Options Data
+
+Each option in `options` may contain a `data` object with any number of key/value pairs. This `data`
+object is carried over to the `option` passed into the `renderOption` function where it may then be
+used to customize how each option is rendered.
+
+```tsx
+import * as React from 'react';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
+import {
+  activityStreamIcon,
+  avatarIcon,
+  uploadCloudIcon,
+  userIcon,
+} from '@workday/canvas-system-icons-web';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+
+function Example() {
+  const options = [
+    {value: 'Activity Stream', data: {icon: activityStreamIcon}},
+    {value: 'Avatar', data: {icon: avatarIcon}},
+    {value: 'Upload Cloud', data: {icon: uploadCloudIcon}},
+    {value: 'User', data: {icon: userIcon}},
+  ];
+
+  const renderOption = option => {
+    const iconColor = option.focused ? typeColors.inverse : colors.blackPepper100;
+    return (
+      <div style={{alignItems: 'center', display: 'flex', padding: '3px 0'}}>
+        <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
+        <div style={{marginLeft: 5}}>{option.value}</div>
+      </div>
+    );
+  };
+
+  const [value, setValue] = React.useState('Activity Stream');
+
+  const handleChange = event => {
+    setValue(event.currentTarget.value);
+  };
+
+  return (
+    <FormField label="My Select Field" inputId="my-select-field">
+      <Select onChange={handleChange} options={options} renderOption={renderOption} value={value} />
+    </FormField>
+  );
+}
+```
+
+## Static Properties
+
+#### `ErrorType: ErrorType`
+
+```tsx
+<Select error={Select.ErrorType.Alert} />
+```
+
+## Component Props
+
+### Required
+
+#### `options: (Option | string)[]`
+
+> The options of the Select. `options` may be an array of objects or an array of strings.
+>
+> If `options` is an array of objects, each object must adhere to the `Option` interface:
+>
+> - `data: object` (optional)
+> - `disabled: boolean` (optional)
+> - `id: string` (optional, a random `id` will be assigned to the object if one isn't provided)
+> - `label: string` (optional, analagous to the text content of an `<option>`)
+> - `value: string` (required, analagous to the `value` attribute of an `<option>`)
+>
+> If `label` is omitted, the `value` will be used to render the option.
+>
+> The `data` object is carried over to the `option` passed into the `renderOption` function where it
+> may then be used to customize how each option is rendered.
+
+### Optional
+
+#### `error: ErrorType`
+
+> The type of error associated with the Select (if applicable).
+
+| Type  | Description     |
+| ----- | --------------- |
+| Error | Red outline.    |
+| Alert | Orange outline. |
+
+---
+
+#### `ref: React.Ref<HTMLButtonElement>`
+
+> A ref to be forwarded to the underlying `<button>` element (the collapsed form of the Select
+> component is rendered as a `<button>`). Use this to imperatively modify the button element.
+
+Default: `undefined`
+
+---
+
+#### `renderOption: (option: RenderableOption) => React.ReactNode`
+
+> The function called to render the content of each option.
+>
+> The `option` argument passed to the function is an object which contains the following:
+>
+> - `data: object` (data object carried over from the corresponding option originally passed into
+>   the component)
+> - `disabled: boolean`
+> - `focused: boolean` (set to `true` if the option has keyboard focus)
+> - `id: string`
+> - `label: string`
+> - `selected: boolean` (set to `true` if the option is selected)
+> - `value: string`
+>
+> If you omit the `renderOption` prop, each option will be rendered using a default `renderOption`
+> function provided by the component.
+
+---
+
+#### `value: string`
+
+> The value of the Select.
diff --git a/modules/preview-react/select/index.ts b/modules/preview-react/select/index.ts
new file mode 100644
index 0000000000..a29681e4e6
--- /dev/null
+++ b/modules/preview-react/select/index.ts
@@ -0,0 +1,8 @@
+export * from './lib/Select';
+
+export {
+  Option,
+  RenderableOption,
+  RenderOptionFunction,
+  RenderSelectedFunction,
+} from './lib/SelectBase';
diff --git a/modules/preview-react/select/lib/Select.tsx b/modules/preview-react/select/lib/Select.tsx
new file mode 100644
index 0000000000..c61f54bdb9
--- /dev/null
+++ b/modules/preview-react/select/lib/Select.tsx
@@ -0,0 +1,595 @@
+import * as React from 'react';
+import {
+  ErrorType,
+  StyledType,
+  createComponent,
+  useForkRef,
+  generateUniqueId,
+} from '@workday/canvas-kit-react/common';
+import {menuAnimationDuration} from './SelectMenu';
+import {SelectBase, CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
+import {MenuVisibility} from './types';
+import {getCorrectedIndexByValue} from './utils';
+/**
+ * @deprecated ⚠️ `SelectProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface SelectProps extends CoreSelectBaseProps {
+  /**
+   * The options of the Select. `options` may be an array of objects, an array of strings,
+   * or an array that contains both objects and strings.
+   *
+   * If `options` includes objects, each included object must adhere to the `Option` interface:
+   *
+   * * `data: object` (optional)
+   * * `disabled: boolean` (optional)
+   * * `id: string` (optional, a random `id` will be assigned to the object if one isn't provided)
+   * * `label: string` (optional, analogous to the text content of an `<option>`)
+   * * `value: string` (required, analogous to the `value` attribute of an `<option>`)
+   *
+   * If `label` is omitted, the `value` will be used to render the option.
+   *
+   * The `data` object is carried over to the `option` passed into the `renderOption` function where it may then be used to customize how each option is rendered.
+   */
+  options: (Option | string)[];
+}
+
+interface SelectContainerProps extends SelectProps, StyledType {
+  /**
+   * The ref passed from `createComponent` to be forwarded to the underlying button element.
+   */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+}
+
+interface SelectContainerState {
+  focusedOptionIndex: number;
+  menuVisibility: MenuVisibility;
+}
+
+class SelectContainer extends React.Component<SelectContainerProps, SelectContainerState> {
+  static ErrorType = ErrorType;
+
+  state: Readonly<SelectContainerState> = {
+    focusedOptionIndex: 0,
+    menuVisibility: 'closed',
+  };
+
+  private forwardedButtonRef: React.Ref<HTMLButtonElement>;
+  private localButtonRef = React.createRef<HTMLButtonElement>();
+  private inputRef = React.createRef<HTMLInputElement>();
+  private menuRef = React.createRef<HTMLUListElement>();
+
+  private menuAnimationTimer!: ReturnType<typeof setTimeout>;
+
+  // For type-ahead functionality
+  private keysSoFar = '';
+  private clearKeysSoFarTimeout = 500;
+  private clearKeysSoFarTimer!: ReturnType<typeof setTimeout>;
+
+  // Cached values
+  private normalizedOptions: NormalizedOption[] = [];
+
+  private areOptionsDefined = (): boolean => {
+    const {options} = this.props;
+
+    if (!options || options.length === 0) {
+      return false;
+    }
+
+    return true;
+  };
+
+  // Store normalized options since the options prop can take on multiple
+  // forms. It can be an array of strings, an array of objects (sometimes with
+  // arbitrary keys), or an array that contains both strings and objects
+  private setNormalizedOptions = (): void => {
+    const {options} = this.props;
+
+    // Abort if options weren't defined
+    if (!this.areOptionsDefined()) {
+      return;
+    }
+
+    this.normalizedOptions = options.map(option => {
+      let data = {};
+      let disabled, id, label, value;
+
+      if (typeof option === 'string') {
+        disabled = false;
+        id = generateUniqueId();
+        value = option;
+        label = option;
+      } else {
+        data = option.data || data;
+        disabled = !!option.disabled;
+        id = option.id || generateUniqueId();
+        value = option.value;
+        label = option.label || option.value;
+      }
+
+      return {
+        data,
+        disabled,
+        id,
+        label,
+        value,
+      };
+    });
+  };
+
+  private getIndexByStartString = (
+    startIndex: number,
+    startString: string,
+    endIndex: number = this.normalizedOptions.length,
+    ignoreDisabled: boolean = true
+  ): number => {
+    for (let i = startIndex; i < endIndex; i++) {
+      const label = this.normalizedOptions[i].label.toLowerCase();
+      if (label.indexOf(startString.toLowerCase()) === 0) {
+        if (!ignoreDisabled || (ignoreDisabled && !this.normalizedOptions[i].disabled)) {
+          return i;
+        }
+      }
+    }
+
+    return -1;
+  };
+
+  // This helper focuses the next enabled option given a startIndex and a
+  // direction. If startIndex refers to an enabled option, we focus that option
+  // immediately. Otherwise, we advance `direction` number of spaces in the options
+  // array and check again if that index refers to an enabled option.
+  //
+  // This is useful for manipulating focus using the keyboard where pressing the
+  // Up/Down key means "focus the first enabled option above/below the currently
+  // focused option", or pressing the Home/End key means "focus the first/last
+  // enabled option on the menu."
+  private focusNextEnabledOption = (startIndex: number, direction: number) => {
+    // Ensure direction is non-zero
+    if (direction === 0) {
+      return;
+    }
+
+    const numOptions = this.normalizedOptions.length;
+
+    let currentIndex = startIndex;
+
+    // Check if currentIndex refers to an enabled option. If not, keep moving
+    // the index in the prescribed direction until we find an enabled option.
+    while (
+      currentIndex >= 0 &&
+      currentIndex < numOptions &&
+      this.normalizedOptions[currentIndex].disabled
+    ) {
+      currentIndex += direction;
+    }
+    // Update the focused index only if currentIndex is inbounds and
+    // refers to an enabled option
+    if (
+      currentIndex >= 0 &&
+      currentIndex < numOptions &&
+      !this.normalizedOptions[currentIndex].disabled
+    ) {
+      this.setState({focusedOptionIndex: currentIndex});
+    }
+  };
+
+  private updateStateFromValue = () => {
+    this.setState({
+      focusedOptionIndex: getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
+    });
+  };
+
+  private focusButton = () => {
+    if (this.localButtonRef.current) {
+      this.localButtonRef.current.focus();
+    }
+  };
+
+  private setMenuAnimationTimeout = (callback: () => void) => {
+    if (this.menuAnimationTimer) {
+      clearTimeout(this.menuAnimationTimer);
+    }
+    this.menuAnimationTimer = setTimeout(callback, menuAnimationDuration);
+  };
+
+  private openMenu = () => {
+    this.setState({menuVisibility: 'opening'});
+    this.setMenuAnimationTimeout(() => {
+      this.setState({menuVisibility: 'opened'});
+    });
+  };
+
+  private closeMenu = () => {
+    this.setState({menuVisibility: 'closing'});
+    this.setMenuAnimationTimeout(() => {
+      this.setState({
+        // Reset the focused option to the currently selected option in case
+        // the user focused a different option but chose not to select it. The
+        // next time the menu opens, focus should begin on the selected option.
+        focusedOptionIndex: getCorrectedIndexByValue(this.normalizedOptions, this.props.value),
+        menuVisibility: 'closed',
+      });
+    });
+  };
+
+  private toggleMenu = (open: boolean): void => {
+    const {menuVisibility} = this.state;
+
+    if (open) {
+      switch (menuVisibility) {
+        // We're opening a menu which is currently closed: set the menu state
+        // to open before kicking off openMenu. This allows us to transition
+        // from 0 opacity in the open state to the targeted 1.0 opacity in
+        // the opening state.
+        case 'closed':
+          this.setState({menuVisibility: 'open'}, this.openMenu);
+          break;
+        // We're opening a menu which is in the process of closing. Since the
+        // menu isn't closed, there's no need to set the open state: kick off
+        // openMenu immediately.
+        case 'close':
+        case 'closing':
+          this.openMenu();
+          break;
+        // Otherwise, we're opening a menu is already opened or in the process of
+        // opening; no need to do anything further.
+        default:
+          break;
+      }
+    } else {
+      switch (menuVisibility) {
+        // We're closing a menu which is currently opened: set the menu state to
+        // close before kicking off closeMenu.
+        case 'opened':
+          this.setState({menuVisibility: 'close'}, this.closeMenu);
+          break;
+        // We're closing a menu which is in the process of opening. Since the
+        // menu isn't opened, there's no need to set the close state: kick off
+        // closeMenu immediately.
+        case 'open':
+        case 'opening':
+          this.closeMenu();
+          break;
+        // Otherwise, we're closing a menu which is already closed or in the process
+        // of closing; no need to do anything further.
+        default:
+          break;
+      }
+    }
+  };
+
+  // Code inspired by: https://stackoverflow.com/a/46012210
+  // In order for Select to be usable as a controlled component, we
+  // need to programmatically change the value of the SelectInput
+  // in such a way that triggers its change event
+  private fireChangeEvent = (value: string): void => {
+    if (this.inputRef && this.inputRef.current) {
+      const nativeInputValue = Object.getOwnPropertyDescriptor(
+        Object.getPrototypeOf(this.inputRef.current),
+        'value'
+      );
+      if (nativeInputValue && nativeInputValue.set) {
+        nativeInputValue.set.call(this.inputRef.current, value);
+      }
+
+      let event: Event;
+      if (typeof Event === 'function') {
+        // Modern browsers
+        event = new Event('change', {bubbles: true});
+      } else {
+        // IE 11
+        event = document.createEvent('Event');
+        event.initEvent('change', true, true);
+      }
+
+      this.inputRef.current.dispatchEvent(event);
+    }
+  };
+
+  private handleKeyboardTypeAhead = (key: string, numOptions: number) => {
+    // Abort immediately if the menu is the process of closing
+    if (this.state.menuVisibility === 'closing') {
+      return;
+    }
+
+    // Set the starting point of the search to one of two locations
+    // based on the search string so far (keysSoFar):
+    //
+    // 1. If the search string is empty, start the search from the
+    // next option AFTER the currently focused option. For example,
+    // if the Select is currently focused on "San Francisco", typing
+    // "s" again advances focus to the next option that begins with "s".
+    //
+    // 2. If the search string is populated, start the search from the
+    // CURRENTLY focused option. For example, if the Select is currently
+    // focused on "San Francisco", typing "san j" retains focus on
+    // "San Francisco" as you type "san " (because "san " still matches
+    // "San Francisco") and then advances focus to "San Jose" after you
+    // type the "j" at the end.
+    let start =
+      this.keysSoFar.length === 0
+        ? this.state.focusedOptionIndex + 1
+        : this.state.focusedOptionIndex;
+
+    // If the starting point is beyond the list of options, reset it
+    // to the beginning of the list
+    start = start === numOptions ? 0 : start;
+
+    this.keysSoFar += key;
+    this.startClearKeysSoFarTimer();
+
+    // First, look for a match from start to end
+    let matchIndex;
+    matchIndex = this.getIndexByStartString(start, this.keysSoFar);
+
+    // If a match isn't found between start and end, wrap the search
+    // around and search again from the beginning (0) to start
+    if (matchIndex === -1) {
+      matchIndex = this.getIndexByStartString(0, this.keysSoFar, start);
+    }
+
+    // A match was found...
+    if (matchIndex > -1) {
+      if (this.state.menuVisibility === 'closed') {
+        // If the menu is closed, fire the change event
+        this.fireChangeEvent(this.normalizedOptions[matchIndex].value);
+      } else {
+        // Otherwise the menu is visible (or at least partially visible);
+        // focus the matched option
+        this.setState({focusedOptionIndex: matchIndex});
+      }
+    }
+  };
+
+  private startClearKeysSoFarTimer = () => {
+    if (this.clearKeysSoFarTimer) {
+      clearTimeout(this.clearKeysSoFarTimer);
+    }
+    this.clearKeysSoFarTimer = setTimeout(() => {
+      this.keysSoFar = '';
+    }, this.clearKeysSoFarTimeout);
+  };
+
+  constructor(props: SelectContainerProps) {
+    super(props);
+    this.setNormalizedOptions();
+
+    // We need a local ref (RefObject) to the Select component's underlying
+    // button to manage focus within the component and to serve as its Popper
+    // Menu's anchorElement. If the buttonRef prop (to be forwarded to the
+    // underlying button) passed in through createComponent was a ref object,
+    // we could reuse it for our internal purposes. buttonRef may be a callback
+    // ref, however, or it may not even be defined.
+    //
+    // To guarantee we have access to a ref object, we created one earlier when
+    // declaring the localButtonRef instance variable. We then use useForkRef
+    // to combine localButtonRef and buttonRef into a single callback ref
+    // (forwardedButtonRef) which can be forwarded to the underlying button.
+    // When the component mounts/unmounts, this callback will both:
+    //
+    // (1) Update the current value of localButtonRef, and;
+    // (2) Either update the current value of buttonRef if it was a ref object,
+    //     or call buttonRef with the underlying button element if it was a
+    //     callback ref.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    this.forwardedButtonRef = useForkRef(props.buttonRef, this.localButtonRef);
+  }
+
+  componentDidMount() {
+    this.updateStateFromValue();
+  }
+
+  componentDidUpdate(prevProps: SelectProps) {
+    const {options, value} = this.props;
+
+    if (options !== prevProps.options) {
+      this.setNormalizedOptions();
+      this.updateStateFromValue();
+    }
+
+    if (value !== prevProps.value) {
+      this.updateStateFromValue();
+    }
+  }
+
+  componentWillUnmount() {
+    // Clear timers
+    if (this.menuAnimationTimer) {
+      clearTimeout(this.menuAnimationTimer);
+    }
+    if (this.clearKeysSoFarTimer) {
+      clearTimeout(this.clearKeysSoFarTimer);
+    }
+  }
+
+  handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    const {menuVisibility} = this.state;
+
+    switch (menuVisibility) {
+      // If we click the button while the menu is in the process of closing,
+      // we want to toggle the menu back on. However, we also need to focus
+      // the menu since it won't be focused using Popper's onFirstUpdate
+      // callback (because the menu already exists).
+      case 'close':
+      case 'closing':
+        if (this.menuRef.current) {
+          this.menuRef.current.focus();
+        }
+        this.toggleMenu(true);
+        break;
+      case 'closed':
+        this.toggleMenu(true);
+        break;
+      // Otherwise, the menu is opened or in the process of opening; toggle
+      // the menu off.
+      default:
+        this.toggleMenu(false);
+        break;
+    }
+  };
+
+  handleOptionSelection = (index: number): void => {
+    // Abort if a disabled option was clicked (we ignore these clicks)
+    if (this.normalizedOptions[index].disabled) {
+      return;
+    }
+
+    // Toggle menu off, shift focus back to the button, and fire change event
+    this.toggleMenu(false);
+    this.focusButton();
+    this.fireChangeEvent(this.normalizedOptions[index].value);
+  };
+
+  handleMenuCloseOnKeyPress = (): void => {
+    // Toggle menu off and shift focus back to the button
+    this.handleClose();
+    this.focusButton();
+  };
+
+  handleClose = (): void => {
+    this.toggleMenu(false);
+  };
+
+  handleKeyDown = (event: React.KeyboardEvent): void => {
+    const {options} = this.props;
+    const numOptions = options.length;
+
+    const {focusedOptionIndex, menuVisibility} = this.state;
+
+    let isShortcut = false;
+
+    // Check for type-ahead first
+    if (event.key.length === 1 && event.key.match(/\S/)) {
+      isShortcut = true;
+      this.handleKeyboardTypeAhead(event.key, numOptions);
+    } else {
+      switch (event.key) {
+        case 'ArrowUp':
+        case 'Up': // IE/Edge specific value
+        case 'ArrowDown':
+        case 'Down': // IE/Edge specific value
+          isShortcut = true;
+          if (menuVisibility === 'closed' || menuVisibility === 'closing') {
+            this.toggleMenu(true);
+          } else {
+            const direction = event.key === 'ArrowUp' || event.key === 'Up' ? -1 : 1;
+            const startIndex = focusedOptionIndex + direction;
+            this.focusNextEnabledOption(startIndex, direction);
+          }
+          break;
+
+        case 'Home':
+        case 'End':
+          isShortcut = true;
+          const direction = event.key === 'Home' ? 1 : -1;
+          const startIndex = event.key === 'Home' ? 0 : numOptions - 1;
+          this.focusNextEnabledOption(startIndex, direction);
+          break;
+
+        case 'Tab':
+          if (menuVisibility !== 'closed') {
+            isShortcut = true;
+            this.handleMenuCloseOnKeyPress();
+          }
+          break;
+
+        case 'Spacebar':
+        case ' ':
+          isShortcut = true;
+          // If the user is in the middle of typing a string, treat
+          // space key as type-ahead rather than option selection
+          if (this.keysSoFar !== '') {
+            this.handleKeyboardTypeAhead(' ', numOptions);
+          } else if (menuVisibility === 'closed' || menuVisibility === 'closing') {
+            this.toggleMenu(true);
+          } else {
+            this.handleOptionSelection(focusedOptionIndex);
+          }
+          break;
+
+        case 'Enter':
+          isShortcut = true;
+          if (menuVisibility === 'closed' || menuVisibility === 'closing') {
+            // allow the click
+            isShortcut = false;
+          } else {
+            this.handleOptionSelection(focusedOptionIndex);
+          }
+          break;
+
+        default:
+      }
+    }
+
+    if (isShortcut) {
+      // Call stopPropagation here to limit shortcut key handling to the Select
+      // component. Otherwise, for example, using the typeahead feature of the
+      // Select would end up triggering a number of undesired if actions if the
+      // containing application supports its own keyboard shortcuts.
+      event.stopPropagation();
+
+      // Call preventDefault here to maintain control of what happens when
+      // handling shortcut keys. For example, without this call, pressing the
+      // down arrow key would scroll the menu down (since the menu has DOM
+      // focus while its visible and scrolling is the default behavior of the
+      // down arrow key). Instead, we want to provide our own custom behavior
+      // of assistively focusing the next option.
+      event.preventDefault();
+    }
+  };
+
+  public render() {
+    const {
+      value,
+
+      // Strip props we don't want to pass down from elemProps
+      buttonRef,
+      options,
+      onKeyDown,
+      onBlur,
+
+      ...elemProps
+    } = this.props;
+
+    const {focusedOptionIndex, menuVisibility} = this.state;
+
+    // Don't pass in event handlers if options weren't defined
+    const eventHandlers = this.areOptionsDefined()
+      ? {
+          onClick: this.handleClick,
+          onKeyDown: this.handleKeyDown,
+          onClose: this.handleClose,
+          onOptionSelection: this.handleOptionSelection,
+        }
+      : {};
+
+    return (
+      <SelectBase
+        forwardedButtonRef={this.forwardedButtonRef}
+        localButtonRef={this.localButtonRef}
+        focusedOptionIndex={focusedOptionIndex}
+        inputRef={this.inputRef}
+        menuRef={this.menuRef}
+        menuVisibility={menuVisibility}
+        options={this.normalizedOptions}
+        value={value}
+        {...eventHandlers}
+        {...elemProps}
+      />
+    );
+  }
+}
+/**
+ * @deprecated ⚠️ `Select` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export const Select = createComponent('button')({
+  displayName: 'Select',
+  Component: (props: SelectProps, ref, Element) => (
+    // Select is still a class component, so we render a renamed version of it
+    // (SelectContainer) and pass it ref and Element
+    <SelectContainer as={Element} buttonRef={ref} {...props} />
+  ),
+  subComponents: {
+    ErrorType,
+  },
+});
diff --git a/modules/preview-react/select/lib/SelectBase.tsx b/modules/preview-react/select/lib/SelectBase.tsx
new file mode 100644
index 0000000000..c3913afe47
--- /dev/null
+++ b/modules/preview-react/select/lib/SelectBase.tsx
@@ -0,0 +1,493 @@
+import React, {useLayoutEffect} from 'react';
+
+import {
+  GrowthBehavior,
+  ErrorType,
+  StyledType,
+  Themeable,
+  errorRing,
+  styled,
+  useUniqueId,
+} from '@workday/canvas-kit-react/common';
+import {colors, borderRadius, inputColors, type, space} from '@workday/canvas-kit-react/tokens';
+import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+
+import {SelectMenu} from './SelectMenu';
+import {SelectOption} from './SelectOption';
+import {scrollIntoViewIfNeeded} from './scrolling';
+import {MenuPlacement, MenuVisibility} from './types';
+import {getCorrectedIndexByValue} from './utils';
+
+interface OptionData {
+  // This allows developers to include arbitrary keys in their
+  // Options data and to utilize those keys in their renderOption
+  // function without encountering TypeScript errors
+  [key: string]: any;
+}
+/**
+ * @deprecated ⚠️ `Option` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface Option {
+  data?: OptionData;
+  disabled?: boolean;
+  id?: string;
+  label?: string;
+  value: string;
+}
+/**
+ * @deprecated ⚠️ `NormalizedOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface NormalizedOption extends Option {
+  // Optional keys in Option are required in NormalizedOption
+  data: OptionData;
+  disabled: boolean;
+  id: string;
+  label: string;
+}
+/**
+ * @deprecated ⚠️ `RenderSelectedFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface RenderSelectedFunction {
+  (option: NormalizedOption): React.ReactNode;
+}
+/**
+ * @deprecated ⚠️ `RenderableOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface RenderableOption extends NormalizedOption {
+  focused: boolean;
+  selected: boolean;
+}
+/**
+ * @deprecated ⚠️ `RenderOptionFunction` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface RenderOptionFunction {
+  (option: RenderableOption): React.ReactNode;
+}
+/**
+ * @deprecated ⚠️ `CoreSelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface CoreSelectBaseProps
+  extends Themeable,
+    GrowthBehavior,
+    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>,
+    Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'required'>,
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  /**
+   * The type of error associated with the Select (if applicable).
+   */
+  error?: ErrorType;
+  /**
+   * The function called to render the content of each option.
+   *
+   * The `option` argument passed to the function is an object which contains the following:
+   *
+   * * `data: object` (data object carried over from the corresponding option originally passed into the component)
+   * * `disabled: boolean`
+   * * `focused: boolean` (set to `true` if the option has keyboard focus)
+   * * `id: string`
+   * * `label: string`
+   * * `selected: boolean` (set to `true` if the option is selected)
+   * * `value: string`
+   *
+   * If you omit the `renderOption` prop, each option will be rendered using a `defaultRenderOption` function provided by the component.
+   *
+   * @default defaultRenderOption
+   */
+  renderOption?: RenderOptionFunction;
+  /**
+   * The function called to render the selected option.
+   *
+   * The `option` argument passed to the function is an object which contains the following:
+   *
+   * * `data: object` (data object carried over from the corresponding option originally passed into the component)
+   * * `disabled: boolean`
+   * * `id: string`
+   * * `label: string`
+   * * `value: string`
+   *
+   * If you omit the `renderSelected` prop, each option will be rendered using a `defaultRenderSelected` function provided by the component.
+   *
+   * @default defaultRenderSelected
+   */
+  renderSelected?: RenderSelectedFunction;
+  /**
+   * The value of the Select.
+   */
+  value?: string;
+}
+/**
+ * @deprecated ⚠️ `SelectBaseProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface SelectBaseProps extends CoreSelectBaseProps, StyledType {
+  /**
+   * The ref to be forwarded to the underlying button element. Use this to imperatively manipulate the button.
+   */
+  forwardedButtonRef?: React.Ref<HTMLButtonElement>;
+  /**
+   * The local ref to the underlying button element. Can be used in situations where RefObject is required (such as the Popper Menu).
+   */
+  localButtonRef?: React.RefObject<HTMLButtonElement>;
+  /**
+   * The index of the focused option in the SelectBase.
+   * @default 0
+   */
+  focusedOptionIndex?: number;
+  /**
+   * The ref to the underlying (hidden) text input element. Use this to imperatively manipulate the input.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * The placement of the SelectBase menu relative to its corresponding SelectButton.
+   * @default 'bottom'
+   */
+  menuPlacement?: MenuPlacement;
+  /**
+   * The ref to the underlying menu element. Use this to imperatively manipulate the menu.
+   */
+  menuRef?: React.RefObject<HTMLUListElement>;
+  /**
+   * The visibility state of the SelectBase menu.
+   * @default 'closed'
+   */
+  menuVisibility?: MenuVisibility;
+  /**
+   * The function called when a key is pressed down while the SelectBase button or menu has focus.
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+  /**
+   * The function called when the menu is closed.
+   */
+  onClose?: () => void;
+  /**
+   * The function called when an option in the SelectBase is selected via a click or a keyboard shortcut. The `index` passed to the callback function represents the index of the option which was selected.
+   */
+  onOptionSelection?: (index: number) => void;
+  /**
+   * The options of the SelectBase. `options` is an array of objects, each object adhering to the `NormalizedOption` interface:
+   *
+   * * `value: string` (required, analagous to the `value` attribute of an `<option>`)
+   * * `disabled: boolean` (required)
+   * * `id: string` (required)
+   * * `label: string` (required, analagous to the text content of an `<option>`)
+   */
+  options: NormalizedOption[];
+  /**
+   * If true, automatically flip the SelectBase menu to keep it visible if necessary (e.g., if the the menu would otherwise display below the visible area of the viewport).
+   * @default true
+   */
+  shouldMenuAutoFlip?: boolean;
+  /**
+   * If true, focus the SelectBase menu when it's shown. Set to false if you don't want to focus the menu automatically (for visual testing purposes, for example).
+   * @default true
+   */
+  shouldMenuAutoFocus?: boolean;
+}
+
+export const buttonBorderWidth = 1;
+
+const menuIconSize = space.m;
+
+const SelectButton = styled('button')<
+  Pick<SelectBaseProps, 'error' | 'grow' | 'menuVisibility' | 'theme'> & StyledType
+>(
+  {
+    ...type.levels.subtext.large,
+    border: `${buttonBorderWidth}px solid ${inputColors.border}`,
+    cursor: 'default',
+    display: 'block',
+    backgroundColor: inputColors.background,
+    borderRadius: borderRadius.m,
+    boxSizing: 'border-box',
+    height: space.xl,
+    outline: 'none',
+    overflow: 'hidden',
+    padding: `calc(${space.xxs} - ${buttonBorderWidth}px)`,
+    paddingRight: `calc(${space.xxs} + ${space.m} + (${space.xxs} + ${buttonBorderWidth}px))`,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    transition: '0.2s box-shadow, 0.2s border-color',
+    whiteSpace: 'nowrap',
+    // width is required (instead of minWidth) in order for the button to
+    // be sized properly for lengthy options
+    width: `calc((${space.xxxl} * 7) / 2)`,
+    '&::placeholder': {
+      color: inputColors.placeholder,
+    },
+    '&:disabled': {
+      backgroundColor: inputColors.disabled.background,
+      borderColor: inputColors.disabled.border,
+      color: inputColors.disabled.text,
+      '&::placeholder': {
+        color: inputColors.disabled.text,
+      },
+    },
+  },
+  ({error, menuVisibility, theme}) => {
+    const themedFocusOutlineColor = theme.canvas.palette.common.focusOutline;
+    const buttonFocusStyles = {
+      borderColor: themedFocusOutlineColor,
+      boxShadow: `inset 0 0 0 1px ${themedFocusOutlineColor}`,
+    };
+
+    if (error === undefined) {
+      // If there isn't an error, apply focus and hover styles if the menu is
+      // closed or in the process of closing (otherwise, the menu is opened
+      // or in the process of opening: style the button as if it had focus)
+      return menuVisibility === 'closed' || menuVisibility === 'closing'
+        ? {
+            '&:focus:not([disabled])': {
+              ...buttonFocusStyles,
+            },
+            '&:hover:not([disabled]):not(:focus)': {
+              borderColor: inputColors.hoverBorder,
+            },
+          }
+        : {...buttonFocusStyles};
+    }
+
+    return {
+      ...errorRing(error, theme),
+    };
+  },
+  ({grow}) =>
+    grow && {
+      width: '100%',
+    }
+);
+
+const SelectMenuIcon = styled(SystemIcon)({
+  position: 'absolute',
+  top: space.xxxs,
+  right: space.xxxs,
+  padding: space.xxxs,
+  pointerEvents: 'none',
+  '& path': {
+    transition: '100ms fill',
+  },
+});
+
+const SelectInput = styled('input')({
+  display: 'none',
+});
+
+const SelectWrapper = styled('div')<Pick<SelectBaseProps, 'grow' | 'disabled'>>(
+  {
+    position: 'relative',
+  },
+  ({grow}) => ({
+    display: grow ? 'block' : 'inline-block',
+  }),
+  ({disabled}) => ({
+    '&:hover .menu-icon path': {
+      fill: disabled ? undefined : colors.licorice500,
+    },
+  })
+);
+
+const defaultRenderOption: RenderOptionFunction = option => {
+  return <div>{defaultRenderSelected(option)}</div>;
+};
+
+const defaultRenderSelected: RenderSelectedFunction = option => {
+  return option.label;
+};
+/**
+ * @deprecated ⚠️ `SelectBase` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export const SelectBase = ({
+  'aria-labelledby': ariaLabelledBy,
+  'aria-required': ariaRequired,
+  as,
+  forwardedButtonRef,
+  localButtonRef,
+  disabled,
+  error,
+  focusedOptionIndex = 0,
+  grow,
+  inputRef,
+  menuPlacement = 'bottom',
+  menuRef,
+  menuVisibility = 'closed',
+  onChange,
+  onKeyDown,
+  onBlur,
+  onClose,
+  onOptionSelection,
+  options,
+  renderOption = defaultRenderOption,
+  renderSelected = defaultRenderSelected,
+  required,
+  shouldMenuAutoFlip = true,
+  shouldMenuAutoFocus = true,
+  value,
+  ...elemProps
+}: SelectBaseProps) => {
+  const focusedOptionRef = React.useRef<HTMLLIElement>(null);
+
+  const menuId = useUniqueId();
+
+  const renderOptions = (renderOption: RenderOptionFunction) => {
+    const selectedOptionIndex = getCorrectedIndexByValue(options, value);
+
+    return options.map((option, index) => {
+      const optionProps = {
+        'aria-disabled': option.disabled ? true : undefined,
+        'aria-selected': selectedOptionIndex === index ? true : undefined,
+        error,
+        focused: focusedOptionIndex === index,
+        id: option.id,
+        interactive: menuVisibility === 'opening' || menuVisibility === 'opened',
+        key: option.id,
+        optionRef: focusedOptionIndex === index ? focusedOptionRef : undefined,
+        value: option.value,
+        ...(onOptionSelection
+          ? {
+              onClick: (event: React.MouseEvent) => {
+                // TODO: Figure out why this preventDefault call exists.
+                // Removing it doesn't have any obvious consequences,
+                // but need to do more careful testing.
+                event.preventDefault();
+                onOptionSelection(index);
+              },
+            }
+          : {}),
+      };
+
+      // Pass in additional information about the option state: focused, selected
+      const normalizedOption = {
+        ...option,
+        focused: optionProps.focused,
+        selected: !!optionProps['aria-selected'],
+      };
+
+      return <SelectOption {...optionProps}>{renderOption(normalizedOption)}</SelectOption>;
+    });
+  };
+
+  // If the focused option changed, scroll the newly focused option into view (if
+  // necessary) but do NOT center it
+  useLayoutEffect(() => {
+    const focusedOption = focusedOptionRef.current;
+
+    if (focusedOption) {
+      // TODO: Figure out if rAF is the best approach here. I initially added
+      // rAF to get the Select States Menu On story to render correctly in IE.
+      // Without rAF, the menu is scrolled slightly further down than it should
+      // be (only in IE, and only in the Menu On visual testing stories), which
+      // triggers a visual regression. We're inside useLayoutEffect here so I
+      // didn't expect to need rAF in order to make proper measurements, but it
+      // seems to be necessary in IE.
+      //
+      // This rAF call also has the additional benefit of fixing a jarring menu
+      // placement issue in IE (https://github.com/Workday/canvas-kit/issues/791),
+      // so I'm leaving it in for now.
+      const animateId = requestAnimationFrame(() => {
+        // We cannot use the native Element.scrollIntoView() here because it
+        // doesn't work properly with the portalled menu: when using the keyboard
+        // to advance focus through the options, using scrollIntoView to keep the
+        // newly focused option in view also scrolls the ENTIRE page. Instead, we
+        // call our own scrollIntoViewIfNeeded function.
+        scrollIntoViewIfNeeded(focusedOption, false);
+      });
+
+      return () => {
+        cancelAnimationFrame(animateId);
+      };
+    }
+
+    return undefined;
+  }, [focusedOptionIndex]);
+
+  // If the menu was just opened, scroll the focused option into view (if
+  // necessary) and center it
+  useLayoutEffect(() => {
+    const focusedOption = focusedOptionRef.current;
+
+    // We need to scroll if the menu is either opening or opened in case we decide to
+    // bypass the opening state and jump straight to opened (like in visual testing,
+    // for instance)
+    if (focusedOption && (menuVisibility === 'opening' || menuVisibility === 'opened')) {
+      // TODO: This rAF call is also necessary for the Menu On visual testing
+      // stories to render properly in IE (see above, both rAF calls need to be
+      // present). It has no bearing on the menu placement issue.
+      const animateId = requestAnimationFrame(() => {
+        scrollIntoViewIfNeeded(focusedOption, true);
+      });
+
+      return () => {
+        cancelAnimationFrame(animateId);
+      };
+    }
+
+    return undefined;
+  }, [menuVisibility]);
+
+  // Do a bit of error-checking in case options weren't provided
+  const hasOptions = options.length > 0;
+  const selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
+  const selectedOptionValue = selectedOption ? selectedOption.value : '';
+
+  return (
+    <SelectWrapper grow={grow} disabled={disabled}>
+      <SelectButton
+        aria-expanded={menuVisibility !== 'closed' ? 'true' : undefined}
+        aria-haspopup="listbox"
+        aria-controls={menuVisibility !== 'closed' ? menuId : undefined}
+        as={as}
+        disabled={disabled}
+        error={error}
+        grow={grow}
+        menuVisibility={menuVisibility}
+        onKeyDown={onKeyDown}
+        onBlur={event => {
+          if (menuVisibility === 'closed') {
+            onBlur?.(event);
+          } else {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }}
+        // Prevent Firefox from triggering click handler on spacebar during
+        // type-ahead when the menu is closed (and, thus, incorrectly displaying
+        // the menu)
+        onKeyUp={e => {
+          e.preventDefault();
+        }}
+        ref={forwardedButtonRef}
+        type="button"
+        value={selectedOptionValue}
+        {...elemProps}
+      >
+        {!!selectedOption && renderSelected(selectedOption)}
+      </SelectButton>
+      <SelectInput onChange={onChange} ref={inputRef} type="text" value={selectedOptionValue} />
+      {hasOptions && menuVisibility !== 'closed' && (
+        <SelectMenu
+          aria-activedescendant={options[focusedOptionIndex].id}
+          aria-labelledby={ariaLabelledBy}
+          aria-required={ariaRequired || required ? true : undefined}
+          buttonRef={localButtonRef}
+          id={menuId}
+          error={error}
+          menuRef={menuRef}
+          onKeyDown={onKeyDown}
+          onClose={onClose}
+          placement={menuPlacement}
+          shouldAutoFlip={shouldMenuAutoFlip}
+          shouldAutoFocus={shouldMenuAutoFocus}
+          visibility={menuVisibility}
+        >
+          {renderOptions(renderOption)}
+        </SelectMenu>
+      )}
+      <SelectMenuIcon
+        className="menu-icon"
+        icon={caretDownSmallIcon}
+        color={disabled ? colors.licorice100 : colors.licorice200}
+        colorHover={disabled ? colors.licorice100 : colors.licorice500}
+        size={`${menuIconSize}rem`}
+      />
+    </SelectWrapper>
+  );
+};
diff --git a/modules/preview-react/select/lib/SelectMenu.tsx b/modules/preview-react/select/lib/SelectMenu.tsx
new file mode 100644
index 0000000000..60fc16e040
--- /dev/null
+++ b/modules/preview-react/select/lib/SelectMenu.tsx
@@ -0,0 +1,304 @@
+import React, {useState, useEffect, useLayoutEffect, useCallback} from 'react';
+
+import {CSSObject} from '@emotion/styled';
+import {EmotionCanvasTheme, ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
+import {
+  Placement,
+  Popper,
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  usePopupModel,
+  useReturnFocus,
+  useTransferOnFullscreenExit,
+} from '@workday/canvas-kit-react/popup';
+import {colors, borderRadius, inputColors} from '@workday/canvas-kit-react/tokens';
+
+import {SelectProps} from './Select';
+import {MenuPlacement, MenuVisibility} from './types';
+
+interface SelectMenuProps
+  extends Themeable,
+    React.HTMLAttributes<HTMLUListElement>,
+    Pick<SelectProps, 'error'> {
+  /**
+   * The ref to the anchor button element. Required to anchor the menu.
+   */
+  buttonRef?: React.RefObject<HTMLButtonElement>;
+  /**
+   * The ref to the underlying menu/listbox element. Use this to imperatively manipulate the menu.
+   */
+  menuRef?: React.RefObject<HTMLUListElement>;
+  /**
+   * The function called when the menu is closed.
+   */
+  onClose?: () => void;
+  /**
+   * The placement of the SelectMenu relative to its corresponding button.
+   * @default 'bottom'
+   */
+  placement?: MenuPlacement;
+  /**
+   * If true, automatically flip the SelectMenu to keep it visible if necessary (e.g., if the the SelectMenu would otherwise display below the visible area of the viewport).
+   * @default true
+   */
+  shouldAutoFlip?: boolean;
+  /**
+   * If true, focus the SelectMenu when it's shown. Set to false if you don't want to focus the SelectMenu automatically (for visual testing purposes, for example).
+   * @default true
+   */
+  shouldAutoFocus?: boolean;
+  /**
+   * The visibility state of the SelectMenu.
+   * @default 'closed'
+   */
+  visibility?: MenuVisibility;
+}
+
+export const menuAnimationDuration = 200;
+
+const menuBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSSObject => {
+  let borderColor = theme.canvas.palette.common.focusOutline;
+  let dividerBorderColor = borderColor;
+  let dividerBorderWidth = 1;
+
+  if (error === ErrorType.Error) {
+    borderColor = theme.canvas.palette.error.main;
+    dividerBorderColor = borderColor;
+  } else if (error === ErrorType.Alert) {
+    borderColor = theme.canvas.palette.alert.darkest;
+    dividerBorderColor = theme.canvas.palette.alert.main;
+    dividerBorderWidth = 2;
+  }
+
+  const dividerBorder = `${dividerBorderWidth}px solid ${dividerBorderColor}`;
+
+  return {
+    borderColor: borderColor,
+
+    // Render the divider using a pseudo-element
+    '&:before': {
+      backgroundColor: colors.soap400,
+      borderLeft: dividerBorder,
+      borderRight: dividerBorder,
+      boxSizing: 'border-box',
+      content: '""',
+      display: 'block',
+      height: 1,
+      position: 'absolute',
+      width: '100%',
+
+      '[data-popper-placement="bottom"] &': {
+        top: 0,
+      },
+      '[data-popper-placement="top"] &': {
+        bottom: 0,
+      },
+    },
+  };
+};
+
+const menuListBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSSObject => {
+  let borderColor = theme.canvas.palette.common.focusOutline;
+  let borderWidth = 1;
+
+  if (error === ErrorType.Error) {
+    borderColor = theme.canvas.palette.error.main;
+  } else if (error === ErrorType.Alert) {
+    borderColor = theme.canvas.palette.alert.main;
+    borderWidth = 2;
+  }
+
+  const border = `${borderWidth}px solid ${borderColor}`;
+
+  return {
+    borderLeft: border,
+    borderRight: border,
+
+    '[data-popper-placement="bottom"] &': {
+      borderBottom: border,
+    },
+    '[data-popper-placement="top"] &': {
+      borderTop: border,
+    },
+  };
+};
+
+const Menu = styled('div')<
+  Pick<SelectMenuProps, 'error' | 'theme' | 'visibility'> & {width: number}
+>(
+  {
+    backgroundColor: colors.frenchVanilla100,
+    border: `1px solid ${inputColors.border}`,
+    boxSizing: 'border-box',
+    position: 'relative',
+    transition: `opacity ${menuAnimationDuration}ms`,
+
+    '[data-popper-placement="bottom"] &': {
+      borderRadius: `0 0 ${borderRadius.m} ${borderRadius.m}`,
+      borderTop: 0,
+    },
+    '[data-popper-placement="top"] &': {
+      borderRadius: `${borderRadius.m} ${borderRadius.m} 0 0`,
+      borderBottom: 0,
+    },
+  },
+  ({error, theme}) => ({
+    ...menuBorderStyles(theme, error),
+  }),
+  ({visibility}) => ({
+    opacity: visibility === 'opening' || visibility === 'opened' || visibility === 'close' ? 1 : 0,
+  }),
+  ({width}) => ({
+    width: width,
+  })
+);
+
+const MenuList = styled('ul')<Pick<SelectProps, 'error' | 'theme'>>(
+  {
+    listStyle: 'none',
+    margin: 0,
+    maxHeight: 200,
+    outline: 'none',
+    overflowY: 'auto',
+    padding: 0,
+  },
+  ({error, theme}) => ({
+    ...menuListBorderStyles(theme, error),
+  })
+);
+
+const generatePopperOptions = (
+  props: Pick<SelectMenuProps, 'menuRef' | 'placement' | 'shouldAutoFlip' | 'shouldAutoFocus'>
+) => {
+  const {menuRef, placement, shouldAutoFlip, shouldAutoFocus} = props;
+
+  let fallbackPlacements: Placement[] = [];
+  if (shouldAutoFlip) {
+    fallbackPlacements = placement === 'top' ? ['bottom'] : ['top'];
+  }
+
+  const modifiers = [
+    {
+      name: 'flip',
+      options: {
+        fallbackPlacements,
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: () => {
+          const skidding = 0;
+
+          // Displace menu towards the button to obscure the bottom
+          // edge of the button and to create a smooth visual
+          // connection between the button and the menu
+          const distance = -parseInt(borderRadius.m, 10);
+
+          return [skidding, distance];
+        },
+      },
+    },
+    {
+      name: 'preventOverflow',
+      options: {
+        // Ensure the menu stays aligned with its reference (button),
+        // even if that means the menu is pushed out of view
+        mainAxis: false,
+      },
+    },
+    {
+      // Disable the fallbackModifier as SelectMenu is properly handled by the
+      // flip modifier through shouldAutoFlip prop
+      name: 'fallbackModifier',
+      enabled: false,
+    },
+  ];
+
+  return {
+    modifiers,
+    // TODO: Consider using a more general-purpose focus function here rather
+    // than relying on Popper's onFirstUpdate for better control over how
+    // focus is managed
+    onFirstUpdate: () => {
+      if (shouldAutoFocus && menuRef && menuRef.current) {
+        menuRef.current.focus();
+      }
+    },
+  };
+};
+
+/**
+ * @deprecated ⚠️ `SelectMenu` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export const SelectMenu = ({
+  buttonRef,
+  children,
+  error,
+  menuRef,
+  onClose,
+  placement = 'bottom',
+  shouldAutoFlip = true,
+  shouldAutoFocus = true,
+  visibility = 'closed',
+  ...elemProps
+}: SelectMenuProps) => {
+  const model = usePopupModel({
+    initialVisibility: 'visible',
+    returnFocusRef: buttonRef,
+    onHide: onClose,
+  });
+
+  const [width, setWidth] = useState(0);
+
+  const handleWidthChange = useCallback(() => {
+    if (buttonRef && buttonRef.current && visibility !== 'closed') {
+      const newMenuWidth = buttonRef.current.clientWidth + 2;
+      setWidth(newMenuWidth);
+    }
+  }, [buttonRef, visibility]);
+
+  useLayoutEffect(() => {
+    handleWidthChange();
+  }, [handleWidthChange]);
+
+  // TODO: Figure out a better way to handle width changes in the reference button.
+  // Seems like we should resize the menu when the reference button width changes, not
+  // necessarily when the window resizes. Resizing the menu on window resize addresses
+  // the case when `grow = true` and the user resizes the browser window while the
+  // menu is opened, but doesn't address cases where the reference button size changes
+  // through other means.
+  useEffect(() => {
+    // Update menu width state on resize to ensure menu resizes as window resizes
+    window.addEventListener('resize', handleWidthChange);
+
+    return () => {
+      window.removeEventListener('resize', handleWidthChange);
+    };
+  }, [handleWidthChange]);
+
+  useCloseOnEscape(model);
+  useCloseOnOutsideClick(model);
+  useReturnFocus(model);
+  useTransferOnFullscreenExit(model);
+
+  return (
+    <Popper
+      placement={placement}
+      anchorElement={buttonRef}
+      popperOptions={generatePopperOptions({
+        menuRef,
+        placement,
+        shouldAutoFlip,
+        shouldAutoFocus,
+      })}
+      ref={model.state.stackRef}
+    >
+      <Menu error={error} visibility={visibility} width={width}>
+        <MenuList error={error} ref={menuRef} role="listbox" tabIndex={-1} {...elemProps}>
+          {children}
+        </MenuList>
+      </Menu>
+    </Popper>
+  );
+};
diff --git a/modules/preview-react/select/lib/SelectOption.tsx b/modules/preview-react/select/lib/SelectOption.tsx
new file mode 100644
index 0000000000..46984ea500
--- /dev/null
+++ b/modules/preview-react/select/lib/SelectOption.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import {CSSObject} from '@emotion/styled';
+import {
+  EmotionCanvasTheme,
+  ErrorType,
+  Themeable,
+  pickForegroundColor,
+  styled,
+} from '@workday/canvas-kit-react/common';
+import {colors, commonColors, type} from '@workday/canvas-kit-react/tokens';
+/**
+ * @deprecated ⚠️ `SelectOptionProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export interface SelectOptionProps extends Themeable, React.LiHTMLAttributes<HTMLLIElement> {
+  /**
+   * The type of error associated with the SelectOption (if applicable).
+   */
+  error?: ErrorType;
+  /**
+   * If true, set the SelectOption to the focused state.
+   * @default false
+   */
+  focused?: boolean;
+  /**
+   * The HTML `id` of the SelectOption.
+   */
+  id?: string;
+  /**
+   * If true, set the SelectOption to the interactive state. Non-interactive SelectOptions should not give any visual cues that they are interactive (e.g., remove hover styling).
+   * @default true
+   */
+  interactive?: boolean;
+  /**
+   * The ref to the list item that the styled component renders. Use this to imperatively manipulate the SelectOption (e.g., to scroll to it if it's out of view in the Select menu).
+   */
+  optionRef?: React.Ref<HTMLLIElement>;
+  /**
+   * The value of the SelectOption.
+   */
+  value?: string;
+}
+
+const optionPadding = 6;
+
+const activeStyles = (theme: EmotionCanvasTheme): CSSObject => {
+  const activeBgColor = theme.canvas.palette.primary.main;
+  return {
+    backgroundColor: activeBgColor,
+    color: pickForegroundColor(activeBgColor),
+  };
+};
+
+const Option = styled('li')<SelectOptionProps>(
+  {
+    ...type.levels.subtext.large,
+    cursor: 'default',
+    // Apply listStyle at the list item style to ensure it's styled properly
+    // in Visual Testing States
+    listStyle: 'none',
+    // In case the content of the option is empty/undefined for some reason
+    minHeight: type.levels.subtext.large.lineHeight,
+    textAlign: 'left',
+  },
+  ({'aria-disabled': disabled, focused, interactive, theme}) => {
+    if (disabled) {
+      // If the option is disabled, return disabled styles...
+      return {
+        color: colors.licorice100,
+      };
+    } else if (focused) {
+      // ...else if the option is focused, return focused styles...
+      return {
+        ...activeStyles(theme),
+      };
+    } else {
+      // ...else return hover and selected (via aria-selected) styles
+      const selectedBgColor = theme.canvas.palette.primary.lightest;
+      const selectedStyles = {
+        '&[aria-selected="true"]': {
+          backgroundColor: selectedBgColor,
+          color: pickForegroundColor(selectedBgColor),
+        },
+      };
+      // Only display interactive (hover/active) styles if the option is interactive
+      const interactiveStyles = interactive
+        ? {
+            '&:hover': {
+              backgroundColor: commonColors.hoverBackground,
+            },
+            '&:active, &:active[aria-selected="true"]': {
+              ...activeStyles(theme),
+            },
+          }
+        : {};
+      return {
+        // Place selected styles after interactive styles to have selected styles
+        // override interactive styles (subject to CSS specificity rules)
+        ...interactiveStyles,
+        ...selectedStyles,
+      };
+    }
+  },
+  ({error}) => ({
+    padding: `${optionPadding}px ${
+      error === ErrorType.Alert ? optionPadding - 1 : optionPadding
+    }px`,
+  })
+);
+
+/**
+ * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export const SelectOption = ({
+  children,
+  focused = false,
+  interactive = true,
+  optionRef,
+  value,
+  ...elemProps
+}: SelectOptionProps) => {
+  return (
+    <Option
+      data-value={value}
+      focused={focused}
+      interactive={interactive}
+      ref={optionRef}
+      role="option"
+      {...elemProps}
+    >
+      {children}
+    </Option>
+  );
+};
diff --git a/modules/preview-react/select/lib/scrolling.ts b/modules/preview-react/select/lib/scrolling.ts
new file mode 100644
index 0000000000..43ac0c1303
--- /dev/null
+++ b/modules/preview-react/select/lib/scrolling.ts
@@ -0,0 +1,42 @@
+// Modified from https://gist.github.com/hsablonniere/2581101
+/**
+ * @deprecated ⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void => {
+  const parent = elem.parentElement;
+
+  if (elem && parent) {
+    const parentComputedStyle = window.getComputedStyle(parent, null);
+    const parentBorderTopWidth = parseInt(
+      parentComputedStyle.getPropertyValue('border-top-width'),
+      10
+    );
+
+    // Check if elem is out of view at the top edge of the parent's viewport
+    const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
+
+    // Check if elem is out of view at the bottom edge of the parent's viewport
+    const overBottom =
+      elem.offsetTop + elem.offsetHeight >
+      parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
+
+    if ((overTop || overBottom) && centerIfNeeded) {
+      parent.scrollTop = Math.floor(
+        elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2
+      );
+    }
+
+    if ((overTop || overBottom) && !centerIfNeeded) {
+      if (overBottom) {
+        // elem is out of view at the bottom edge of the parent's viewport;
+        // scroll down just far enough for elem to be visible
+        parent.scrollTop =
+          elem.clientHeight - (parent.clientHeight + parentBorderTopWidth - elem.offsetTop);
+      } else {
+        // elem is out of view at the top edge of the parent's viewport;
+        // scroll up just far enough for elem to be visible
+        parent.scrollTop = elem.offsetTop - parentBorderTopWidth;
+      }
+    }
+  }
+};
diff --git a/modules/preview-react/select/lib/types.ts b/modules/preview-react/select/lib/types.ts
new file mode 100644
index 0000000000..e3dd354ec7
--- /dev/null
+++ b/modules/preview-react/select/lib/types.ts
@@ -0,0 +1,37 @@
+/**
+ * The placement of the menu relative to its corresponding button. This type is a
+ * subset of the PopperJS.Placement type limited to the `bottom` and `top` values.
+ *
+ * We need to use `top` and `bottom` instead of `top-start` and `bottom-start` for
+ * placements because PopperJS incorrectly rounds the `start` and `end` modifiers:
+ * https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/utils/computeOffsets.js#L68-L81
+ * This rounding causes problems with browsers that allow subpixel values for elements
+ * like Firefox and Edge.
+ *
+ * @deprecated ⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export type MenuPlacement = 'bottom' | 'top';
+
+/**
+ * The visibility state of the menu.
+ *
+ * `closed`: The menu is completely closed (not present in the DOM).
+ * `open`: The menu was previously `closed` and has just been instructed to open.
+ *   The menu has been added to the DOM, but it's not yet visible. This state is
+ *   necessary in order to apply an opacity of 0 to the menu before transitioning it
+ *   to an opacity of 1.0 in the opening state.
+ * `opening`: The menu is in the process of opening.
+ * `opened`: The menu is completely open.
+ * `close`: The menu was previously `open` and has just been instructed to close.
+ * `closing`: The menu is in the process of closing.
+ *
+ * Typically, a menu will transition through states in the following order:
+ * `closed` > `open` > `opening` > `opened` > `close` > `closing` > `closed`
+ *
+ * However, it's possible for a user to open a menu while it's in the process of
+ * closing in which case the menu can transition from `closing` > `opening` (and
+ * vice-versa).
+ *
+ * @deprecated ⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export type MenuVisibility = 'closed' | 'open' | 'opening' | 'opened' | 'close' | 'closing';
diff --git a/modules/preview-react/select/lib/utils.ts b/modules/preview-react/select/lib/utils.ts
new file mode 100644
index 0000000000..cc2dee8611
--- /dev/null
+++ b/modules/preview-react/select/lib/utils.ts
@@ -0,0 +1,30 @@
+import {NormalizedOption} from './SelectBase';
+/**
+ * @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export const getIndexByValue = (options: NormalizedOption[], value: string | undefined): number => {
+  if (!options || value === undefined) {
+    return -1;
+  }
+
+  for (let i = 0; i < options.length; i++) {
+    if (options[i].value === value) {
+      return i;
+    }
+  }
+
+  return -1;
+};
+
+// If the value doesn't exist in the options, return index 0
+/**
+ * @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
+ */
+export const getCorrectedIndexByValue = (
+  options: NormalizedOption[],
+  value: string | undefined
+): number => {
+  const indexByValue = getIndexByValue(options, value);
+
+  return indexByValue === -1 ? 0 : indexByValue;
+};
diff --git a/modules/preview-react/select/spec/SSR.spec.tsx b/modules/preview-react/select/spec/SSR.spec.tsx
new file mode 100644
index 0000000000..753e7135ea
--- /dev/null
+++ b/modules/preview-react/select/spec/SSR.spec.tsx
@@ -0,0 +1,18 @@
+/**
+ * @jest-environment node
+ */
+import React from 'react';
+import {renderToString} from 'react-dom/server';
+import {Select} from '../';
+
+const options = [
+  {label: 'E-mail', value: 'email'},
+  {label: 'Phone', value: 'phone'},
+];
+
+describe('Select', () => {
+  it('should render on a server without crashing', () => {
+    const ssrRender = () => renderToString(<Select options={options} />);
+    expect(ssrRender).not.toThrow();
+  });
+});
diff --git a/modules/preview-react/select/spec/Select.spec.tsx b/modules/preview-react/select/spec/Select.spec.tsx
new file mode 100644
index 0000000000..a2556721e2
--- /dev/null
+++ b/modules/preview-react/select/spec/Select.spec.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {fireEvent, render} from '@testing-library/react';
+import {Select} from '../lib/Select';
+
+describe('Select', () => {
+  const cb = jest.fn();
+
+  const selectButtonRole = 'button';
+  const listboxRole = 'listbox';
+  const optionRole = 'option';
+
+  const options = [
+    {label: 'E-mail', value: 'email'},
+    {label: 'Phone', value: 'phone'},
+  ];
+
+  afterEach(() => {
+    cb.mockReset();
+  });
+
+  describe('when rendered with the id prop', () => {
+    it('should render a button with that id', () => {
+      const id = 'selectButton';
+      const {getByRole} = render(<Select id={id} onChange={cb} options={options} />);
+      expect(getByRole(selectButtonRole)).toHaveAttribute('id', id);
+    });
+  });
+
+  describe('when rendered with the disabled prop', () => {
+    it('should render a disabled button', () => {
+      const {getByRole} = render(<Select disabled={true} onChange={cb} options={options} />);
+      expect(getByRole(selectButtonRole)).toHaveProperty('disabled', true);
+    });
+  });
+
+  describe('when rendered with the aria-required prop', () => {
+    it('should apply aria-required to its menu listbox when the menu is activated', () => {
+      const {getByRole} = render(<Select onChange={cb} options={options} aria-required={true} />);
+      fireEvent.click(getByRole(selectButtonRole));
+      expect(getByRole(listboxRole)).toHaveAttribute('aria-required', 'true');
+    });
+  });
+
+  describe('when rendered with the required prop', () => {
+    it('should apply aria-required to its menu listbox when the menu is activated', () => {
+      const {getByRole} = render(<Select onChange={cb} options={options} required={true} />);
+      fireEvent.click(getByRole(selectButtonRole));
+      expect(getByRole(listboxRole)).toHaveAttribute('aria-required', 'true');
+    });
+  });
+
+  // TODO: Replace ref test with verifyComponent after fixing Select to handle
+  // consumer-provided onKeyDown event handler. Currently fails the onKeyDown
+  // callback test in verifyComponent.
+  describe('when rendered with a ref', () => {
+    it('should set the ref to the button element', async () => {
+      const ref: React.RefObject<HTMLButtonElement> = React.createRef();
+      const {findByRole} = render(<Select onChange={cb} options={options} ref={ref} />);
+      expect(await findByRole(selectButtonRole)).toEqual(ref.current);
+    });
+  });
+
+  describe('when an option with a different value than the current value of the select is clicked', () => {
+    it('should call the onChange callback', () => {
+      const {getAllByRole, getByRole} = render(<Select onChange={cb} options={options} />);
+      fireEvent.click(getByRole(selectButtonRole));
+      fireEvent.click(getAllByRole(optionRole)[1]);
+      expect(cb).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/modules/preview-react/select/spec/tsconfig.json b/modules/preview-react/select/spec/tsconfig.json
new file mode 100644
index 0000000000..e7f236e49a
--- /dev/null
+++ b/modules/preview-react/select/spec/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../tsconfig.spec.json"
+}
diff --git a/modules/preview-react/select/stories/Select.mdx b/modules/preview-react/select/stories/Select.mdx
new file mode 100644
index 0000000000..74c07a190b
--- /dev/null
+++ b/modules/preview-react/select/stories/Select.mdx
@@ -0,0 +1,93 @@
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import * as SelectStories from './Select.stories';
+
+import {Default} from './examples/Top Label/Default';
+import {DefaultWithCustomOptions} from './examples/Top Label/DefaultWithCustomOptions';
+import {DefaultWithSimpleOptions} from './examples/Top Label/DefaultWithSimpleOptions';
+import {Scrollable} from './examples/Top Label/Scrollable';
+import {Disabled} from './examples/Top Label/Disabled';
+import {Alert} from './examples/Top Label/Alert';
+import {Error} from './examples/Top Label/Error';
+import {Grow} from './examples/Top Label/Grow';
+import {DefaultLeft} from './examples/Left Label/DefaultLeft';
+import {DefaultWithCustomOptionsLeft} from './examples/Left Label/DefaultWithCustomOptionsLeft';
+import {DefaultWithSimpleOptionsLeft} from './examples/Left Label/DefaultWithSimpleOptionsLeft';
+import {ScrollableLeft} from './examples/Left Label/ScrollableLeft';
+import {DisabledLeft} from './examples/Left Label/DisabledLeft';
+import {AlertLeft} from './examples/Left Label/AlertLeft';
+import {ErrorLeft} from './examples/Left Label/ErrorLeft';
+import {GrowLeft} from './examples/Left Label/GrowLeft';
+
+
+<Meta of={SelectStories} />
+
+# Canvas Kit Select
+
+## Top Label
+
+### Default
+
+<ExampleCodeBlock code={Default} />
+
+### Default with Custom Options Data
+
+<ExampleCodeBlock code={DefaultWithCustomOptions} />
+
+### Default with Simple Options Data
+
+<ExampleCodeBlock code={DefaultWithSimpleOptions} />
+
+### Scrollable
+
+<ExampleCodeBlock code={Scrollable} />
+
+### Disabled
+
+<ExampleCodeBlock code={Disabled} />
+
+### Alert
+
+<ExampleCodeBlock code={Alert} />
+
+### Error
+
+<ExampleCodeBlock code={Error} />
+
+### Grow
+
+<ExampleCodeBlock code={Grow} />
+
+## Left Label
+
+### Default
+
+<ExampleCodeBlock code={DefaultLeft} />
+
+### Default with Custom Options Data
+
+<ExampleCodeBlock code={DefaultWithCustomOptionsLeft} />
+
+### Default with Simple Options Data
+
+<ExampleCodeBlock code={DefaultWithSimpleOptionsLeft} />
+
+### Scrollable
+
+<ExampleCodeBlock code={ScrollableLeft} />
+
+### Disabled
+
+<ExampleCodeBlock code={DisabledLeft} />
+
+### Alert
+
+<ExampleCodeBlock code={AlertLeft} />
+
+### Error
+
+<ExampleCodeBlock code={ErrorLeft} />
+
+### Grow
+
+<ExampleCodeBlock code={GrowLeft} />
+
diff --git a/modules/preview-react/select/stories/Select.stories.ts b/modules/preview-react/select/stories/Select.stories.ts
new file mode 100644
index 0000000000..7b2e0888de
--- /dev/null
+++ b/modules/preview-react/select/stories/Select.stories.ts
@@ -0,0 +1,99 @@
+import {Meta, StoryObj} from '@storybook/react';
+import mdxDoc from './Select.mdx';
+
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {Default as DefaultExample} from './examples/Top Label/Default';
+import {DefaultWithCustomOptions as DefaultWithCustomOptionsExample} from './examples/Top Label/DefaultWithCustomOptions';
+import {DefaultWithSimpleOptions as DefaultWithSimpleOptionsExample} from './examples/Top Label/DefaultWithSimpleOptions';
+import {Scrollable as ScrollableExample} from './examples/Top Label/Scrollable';
+import {Disabled as DisabledExample} from './examples/Top Label/Disabled';
+import {Alert as AlertExample} from './examples/Top Label/Alert';
+import {Error as ErrorExample} from './examples/Top Label/Error';
+import {Grow as GrowExample} from './examples/Top Label/Grow';
+
+// Left Label Examples
+import {DefaultLeft as DefaultLeftExample} from './examples/Left Label/DefaultLeft';
+import {DefaultWithCustomOptionsLeft as DefaultWithCustomOptionsExampleLeft} from './examples/Left Label/DefaultWithCustomOptionsLeft';
+import {DefaultWithSimpleOptionsLeft as DefaultWithSimpleOptionsExampleLeft} from './examples/Left Label/DefaultWithSimpleOptionsLeft';
+import {ScrollableLeft as ScrollableExampleLeft} from './examples/Left Label/ScrollableLeft';
+import {DisabledLeft as DisabledExampleLeft} from './examples/Left Label/DisabledLeft';
+import {AlertLeft as AlertExampleLeft} from './examples/Left Label/AlertLeft';
+import {ErrorLeft as ErrorExampleLeft} from './examples/Left Label/ErrorLeft';
+import {GrowLeft as GrowExampleLeft} from './examples/Left Label/GrowLeft';
+
+export default {
+  title: 'Preview/Select',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: mdxDoc,
+    },
+  },
+} as Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: DefaultExample,
+};
+
+export const DefaultWithSimpleOptions: Story = {
+  render: DefaultWithSimpleOptionsExample,
+};
+
+export const DefaultWithCustomOptions: Story = {
+  render: DefaultWithCustomOptionsExample,
+};
+
+export const Scrollable: Story = {
+  render: ScrollableExample,
+};
+
+export const Disabled: Story = {
+  render: DisabledExample,
+};
+
+export const Alert: Story = {
+  render: AlertExample,
+};
+
+export const Error: Story = {
+  render: ErrorExample,
+};
+
+export const Grow: Story = {
+  render: GrowExample,
+};
+
+export const DefaultLeft: Story = {
+  render: DefaultLeftExample,
+};
+
+export const DefaultWithSimpleOptionsLeft: Story = {
+  render: DefaultWithSimpleOptionsExampleLeft,
+};
+
+export const DefaultWithCustomOptionsLeft: Story = {
+  render: DefaultWithCustomOptionsExampleLeft,
+};
+
+export const ScrollableLeft: Story = {
+  render: ScrollableExampleLeft,
+};
+
+export const DisabledLeft: Story = {
+  render: DisabledExampleLeft,
+};
+
+export const AlertLeft: Story = {
+  render: AlertExampleLeft,
+};
+
+export const ErrorLeft: Story = {
+  render: ErrorExampleLeft,
+};
+
+export const GrowLeft: Story = {
+  render: GrowExampleLeft,
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/AlertLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/AlertLeft.tsx
new file mode 100644
index 0000000000..aa92ff5656
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/AlertLeft.tsx	
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintId, hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const AlertLeft = () => {
+  return (
+    <FormField
+      labelPosition={FormField.LabelPosition.Left}
+      label="Label"
+      inputId="select-alert"
+      error={FormField.ErrorType.Alert}
+      hintText={hintText}
+      hintId={hintId}
+    >
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/DefaultLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DefaultLeft.tsx
new file mode 100644
index 0000000000..42adaf6f4d
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/DefaultLeft.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const DefaultLeft = () => {
+  return (
+    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-default">
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/DefaultWithCustomOptionsLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DefaultWithCustomOptionsLeft.tsx
new file mode 100644
index 0000000000..582e9e36ed
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/DefaultWithCustomOptionsLeft.tsx	
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const DefaultWithCustomOptionsLeft = () => {
+  return (
+    <FormField
+      labelPosition={FormField.LabelPosition.Left}
+      label="Label"
+      inputId="select-default-custom"
+    >
+      {controlComponent(
+        <Select
+          name="icon"
+          options={customOptions}
+          renderOption={customRenderOption}
+          renderSelected={customRenderSelected}
+        />
+      )}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx
new file mode 100644
index 0000000000..c64c9a410d
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx	
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {simpleOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const DefaultWithSimpleOptionsLeft = () => {
+  return (
+    <FormField
+      labelPosition={FormField.LabelPosition.Left}
+      label="Label"
+      inputId="select-default-simple"
+    >
+      {controlComponent(<Select name="state" options={simpleOptions} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/DisabledLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/DisabledLeft.tsx
new file mode 100644
index 0000000000..d63fec11f4
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/DisabledLeft.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const DisabledLeft = () => {
+  return (
+    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-disabled">
+      {controlComponent(<Select name="contact" options={options} disabled={true} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/ErrorLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/ErrorLeft.tsx
new file mode 100644
index 0000000000..6a4d1bd2e9
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/ErrorLeft.tsx	
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintId, hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const ErrorLeft = () => {
+  return (
+    <FormField
+      labelPosition={FormField.LabelPosition.Left}
+      label="Label"
+      inputId="select-error"
+      error={FormField.ErrorType.Error}
+      hintText={hintText}
+      hintId={hintId}
+    >
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/GrowLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/GrowLeft.tsx
new file mode 100644
index 0000000000..24ca4376d3
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/GrowLeft.tsx	
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const GrowLeft = () => {
+  return (
+    <FormField
+      labelPosition={FormField.LabelPosition.Left}
+      label="Label"
+      inputId="select-grow"
+      grow={true}
+    >
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/ScrollableLeft.tsx b/modules/preview-react/select/stories/examples/Left Label/ScrollableLeft.tsx
new file mode 100644
index 0000000000..5837ab50d3
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/ScrollableLeft.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {manyOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const ScrollableLeft = () => {
+  return (
+    <FormField labelPosition={FormField.LabelPosition.Left} label="Label" inputId="select-default">
+      {controlComponent(<Select name="contact" options={manyOptions} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Left Label/index.ts b/modules/preview-react/select/stories/examples/Left Label/index.ts
new file mode 100644
index 0000000000..108704197a
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Left Label/index.ts	
@@ -0,0 +1,8 @@
+export {DefaultLeft} from './DefaultLeft';
+export {DefaultWithCustomOptionsLeft} from './DefaultWithCustomOptionsLeft';
+export {DefaultWithSimpleOptionsLeft} from './DefaultWithSimpleOptionsLeft';
+export {ScrollableLeft} from './ScrollableLeft';
+export {DisabledLeft} from './DisabledLeft';
+export {AlertLeft} from './AlertLeft';
+export {ErrorLeft} from './ErrorLeft';
+export {GrowLeft} from './GrowLeft';
diff --git a/modules/preview-react/select/stories/examples/Top Label/Alert.tsx b/modules/preview-react/select/stories/examples/Top Label/Alert.tsx
new file mode 100644
index 0000000000..fcfe8dd510
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/Alert.tsx	
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintId, hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const Alert = () => {
+  return (
+    <FormField
+      label="Label"
+      inputId="select-alert"
+      error={FormField.ErrorType.Alert}
+      hintText={hintText}
+      hintId={hintId}
+    >
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/Default.tsx b/modules/preview-react/select/stories/examples/Top Label/Default.tsx
new file mode 100644
index 0000000000..6997bb8c79
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/Default.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const Default = () => {
+  return (
+    <FormField label="Label" inputId="select-default">
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/DefaultWithCustomOptions.tsx b/modules/preview-react/select/stories/examples/Top Label/DefaultWithCustomOptions.tsx
new file mode 100644
index 0000000000..be7563091b
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/DefaultWithCustomOptions.tsx	
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const DefaultWithCustomOptions = () => {
+  return (
+    <FormField label="Label" inputId="select-default-custom">
+      {controlComponent(
+        <Select
+          name="icon"
+          options={customOptions}
+          renderOption={customRenderOption}
+          renderSelected={customRenderSelected}
+        />
+      )}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/DefaultWithSimpleOptions.tsx b/modules/preview-react/select/stories/examples/Top Label/DefaultWithSimpleOptions.tsx
new file mode 100644
index 0000000000..a96e4143fa
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/DefaultWithSimpleOptions.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {simpleOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const DefaultWithSimpleOptions = () => {
+  return (
+    <FormField label="Label" inputId="select-default-simple">
+      {controlComponent(<Select name="state" options={simpleOptions} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/Disabled.tsx b/modules/preview-react/select/stories/examples/Top Label/Disabled.tsx
new file mode 100644
index 0000000000..a5246b5c6f
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/Disabled.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const Disabled = () => {
+  return (
+    <FormField label="Label" inputId="select-disabled">
+      {controlComponent(<Select name="contact" options={options} disabled={true} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/Error.tsx b/modules/preview-react/select/stories/examples/Top Label/Error.tsx
new file mode 100644
index 0000000000..79cb31b51b
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/Error.tsx	
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintId, hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const Error = () => {
+  return (
+    <FormField
+      label="Label"
+      inputId="select-error"
+      error={FormField.ErrorType.Error}
+      hintText={hintText}
+      hintId={hintId}
+    >
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/Grow.tsx b/modules/preview-react/select/stories/examples/Top Label/Grow.tsx
new file mode 100644
index 0000000000..c8a5a61a70
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/Grow.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const Grow = () => {
+  return (
+    <FormField label="Label" inputId="select-grow" grow={true}>
+      {controlComponent(<Select name="contact" options={options} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/Scrollable.tsx b/modules/preview-react/select/stories/examples/Top Label/Scrollable.tsx
new file mode 100644
index 0000000000..a4c2f7bb2a
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/Scrollable.tsx	
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {manyOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export const Scrollable = () => {
+  return (
+    <FormField label="Label" inputId="select-default">
+      {controlComponent(<Select name="contact" options={manyOptions} />)}
+    </FormField>
+  );
+};
diff --git a/modules/preview-react/select/stories/examples/Top Label/index.ts b/modules/preview-react/select/stories/examples/Top Label/index.ts
new file mode 100644
index 0000000000..7f3e48442d
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/Top Label/index.ts	
@@ -0,0 +1,8 @@
+export {Default} from './Default';
+export {DefaultWithCustomOptions} from './DefaultWithCustomOptions';
+export {DefaultWithSimpleOptions} from './DefaultWithSimpleOptions';
+export {Scrollable} from './Scrollable';
+export {Disabled} from './Disabled';
+export {Alert} from './Alert';
+export {Error} from './Error';
+export {Grow} from './Grow';
diff --git a/modules/preview-react/select/stories/examples/storiesData.tsx b/modules/preview-react/select/stories/examples/storiesData.tsx
new file mode 100644
index 0000000000..86ee41c5dc
--- /dev/null
+++ b/modules/preview-react/select/stories/examples/storiesData.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {controlComponent} from '../../../../../utils/storybook';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {
+  activityStreamIcon,
+  avatarIcon,
+  uploadCloudIcon,
+  userIcon,
+} from '@workday/canvas-system-icons-web';
+import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {
+  Select,
+  RenderOptionFunction,
+  RenderSelectedFunction,
+} from '@workday/canvas-kit-preview-react/select';
+
+export const hintText = 'Helpful text goes here.';
+export const hintId = 'error-desc-id';
+
+export const options = [
+  {label: 'E-mail', value: 'email-1234'},
+  {label: 'Phone', value: 'phone'},
+  {label: 'Fax (disabled)', value: 'fax', disabled: true},
+  {label: 'Mail', value: 'mail'},
+  {label: 'Mobile Phone', value: 'mobile_phone'},
+  {
+    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
+    value: 'oasis',
+  },
+];
+
+export const simpleOptions = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
+
+export const manyOptions = [
+  {label: 'Atlanta (United States)', value: 'atlanta'},
+  {label: 'Amsterdam (Europe)', value: 'amsterdam'},
+  {label: 'Austin (United States)', value: 'austin'},
+  {label: 'Beaverton (United States)', value: 'beaverton'},
+  {label: 'Belfast (Europe)', value: 'belfast'},
+  {label: 'Berlin (Europe)', value: 'berlin'},
+  {label: 'Boston (United States)', value: 'boston'},
+  {label: 'Boulder (United States)', value: 'boulder'},
+  {label: 'Chicago (United States)', value: 'chicago'},
+  {label: 'Dallas (United States)', value: 'dallas'},
+  {label: 'Denver (United States)', value: 'denver'},
+  {label: 'Dublin (Europe)', value: 'dublin'},
+  {label: 'Irvine (United States)', value: 'irvine'},
+  {label: 'Minneapolis (United States)', value: 'minneapolis'},
+  {label: 'New York (United States)', value: 'new-york'},
+  {label: 'Orlando (United States)', value: 'orlando'},
+  {label: 'Palo Alto (United States)', value: 'palo-alto'},
+  {label: 'Philadelphia (United States)', value: 'philadelphia'},
+  {label: 'Pleasanton (United States)', value: 'pleasanton'},
+  {label: 'Raleigh (United States)', value: 'raleigh'},
+  {label: 'San Francisco (United States)', value: 'san-francisco'},
+  {label: 'San Mateo (United States)', value: 'san-mateo'},
+  {label: 'Stockholm (Europe)', value: 'stockholm'},
+  {
+    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation (Virtual Reality)',
+    value: 'oasis',
+  },
+  {label: 'Toronto (Canada)', value: 'toronto'},
+  {label: 'Victoria (Canada)', value: 'victoria'},
+  {label: 'Vienna (Europe)', value: 'vienna'},
+  {label: 'Warsaw (Europe)', value: 'warsaw'},
+  {label: 'Washington, DC (United States)', value: 'washington-dc'},
+  {label: 'Zurich (Europe)', value: 'zurich'},
+];
+
+export const customOptions = [
+  {value: 'Activity Stream', data: {icon: activityStreamIcon}},
+  {value: 'Avatar', data: {icon: avatarIcon}},
+  {value: 'Upload Cloud', data: {icon: uploadCloudIcon}},
+  {value: 'User', data: {icon: userIcon}},
+];
+
+export const customRenderOption: RenderOptionFunction = option => {
+  const iconColor = option.focused ? typeColors.inverse : colors.blackPepper100;
+  return (
+    <div style={{alignItems: 'center', display: 'flex', padding: '3px 0'}}>
+      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
+      <div style={{marginLeft: 5}}>{option.value}</div>
+    </div>
+  );
+};
+
+export const customRenderSelected: RenderSelectedFunction = option => {
+  const iconColor = colors.blackPepper100;
+  return (
+    <div style={{alignItems: 'center', display: 'flex'}}>
+      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
+      <div style={{marginLeft: 5}}>{option.value}</div>
+    </div>
+  );
+};
diff --git a/modules/preview-react/select/stories/stories_CypressTesting.tsx b/modules/preview-react/select/stories/stories_CypressTesting.tsx
new file mode 100644
index 0000000000..527314b06c
--- /dev/null
+++ b/modules/preview-react/select/stories/stories_CypressTesting.tsx
@@ -0,0 +1,248 @@
+import * as React from 'react';
+import {controlComponent} from '../../../../utils/storybook';
+
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+import {Select} from '../lib/Select';
+
+import {manyOptions, options} from './examples/storiesData';
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default {
+  title: 'Testing/Preview/Select/Cypress',
+  component: Select,
+};
+
+const disabledOptions = [
+  {label: 'Carrier Pigeon', value: 'pigeon', disabled: true},
+  {label: 'E-mail', value: 'email'},
+  {label: 'Phone', value: 'phone'},
+  {label: 'Fax', value: 'fax', disabled: true},
+  {label: 'Mail', value: 'mail'},
+  {label: 'Mobile Phone', value: 'mobile_phone'},
+  {label: 'Telegram', value: 'telegram', disabled: true},
+];
+
+const Container = ({children, style = {}, ...elemProps}) => {
+  return (
+    <div
+      style={{
+        ...style,
+        border: `1px solid ${colors.soap600}`,
+        marginTop: 50,
+        overflow: 'hidden',
+        padding: 20,
+      }}
+      {...elemProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+const SelectModal = () => {
+  return (
+    <Modal>
+      <Modal.Target>Show Modal</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Modal with Select</Modal.Heading>
+          <Modal.Body>
+            <p>The menu for this Select should break out of the Modal.</p>
+            <FormField label="Label" inputId="select-modal">
+              {controlComponent(<Select name="city" options={manyOptions} />)}
+            </FormField>
+            <Flex gap="s">
+              <Modal.CloseButton as={PrimaryButton}>Submit</Modal.CloseButton>
+              <Modal.CloseButton>Cancel</Modal.CloseButton>
+            </Flex>
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};
+
+const BlurTest = () => {
+  const [clicked, setClicked] = React.useState(false);
+
+  const handleButtonBlur = () => {
+    // Setting clicked updates the state of BlurTest which in turn causes
+    // the contained Select to re-render
+    setClicked(false);
+  };
+
+  const handleButtonClick = () => {
+    setClicked(true);
+  };
+
+  return (
+    <>
+      <div style={{height: '100vh'}}>Empty filler (scroll down)</div>
+      <h2>Blur Test</h2>
+      <p>
+        The following test checks against a timing issue where focus could be applied to the Select
+        Menu before it's been properly positioned, causing the browser to scroll to the top of the
+        page when clicking the Select Button to activate its Menu.
+      </p>
+      <h3>Context</h3>
+      <p>
+        The Select component consists of a Button (the collapsed form of the Select) and a Menu (the
+        dropdown menu displayed when you click on the Button or activate it using assistive
+        technology). The Menu has two important characteristics:
+      </p>
+      <ol>
+        <li>DOM focus is applied to the Menu when it's visible.</li>
+        <li>
+          The Menu is portalled to another location in the DOM outside the DOM hierarchy of the
+          Select component (to enable it to break outside of Modals, for example). Because the Menu
+          is located some distance (DOM-wise) away from it's corresponding Button, it needs to be
+          positioned so that it's visually attached to its Button.
+        </li>
+      </ol>
+      <p>
+        Focusing the Menu before it's been properly positioned next to the Button will cause the
+        browser to scroll to the wrong location (where the Menu was <strong>before</strong> it was
+        positioned next to the button -- this is generally the top of the page).
+      </p>
+      <h3>Test</h3>
+      <p>
+        The following test creates a scenario where such a timing issue could potentially occur:
+      </p>
+      <ol>
+        <li>The page is long (requires scrolling).</li>
+        <li>
+          There's a button and a Select near the bottom of the page. The button has a blur handler
+          which triggers a re-render of the Select.
+        </li>
+        <li>You click on the button to give it focus.</li>
+        <li>
+          You then click on the Select. This activates the Menu and immediately triggers the blur
+          handler for the button (which re-renders the Select).
+        </li>
+      </ol>
+      <p>
+        This creates a tricky situation where we could potentially assign focus to the Menu before
+        it's been positioned since we're re-rendering the Menu immediately after it's been
+        activated. If we assign focus too soon, the page will scroll to the top and you'll need to
+        scroll back down to access the Menu you just activated.
+      </p>
+      <p>
+        To run the test, click on the "Click me first!" button, and then click directly on the
+        Select below it (directly on the Select itself, <strong>not</strong> the label).{' '}
+        <strong>No scrolling should occur when the Select is clicked.</strong>
+      </p>
+      <button onBlur={handleButtonBlur} onClick={handleButtonClick} data-testid="blur-test-button">
+        {clicked
+          ? 'Clicked! Now click directly on the Select below (not the label)'
+          : 'Click me first!'}
+      </button>
+      <FormField label="Label (Bottom)" inputId="select-bottom" style={{marginTop: '10px'}}>
+        {controlComponent(<Select name="contact" options={options} />)}
+      </FormField>
+    </>
+  );
+};
+
+export const AccessibilityTest = () => (
+  <div>
+    <Container>
+      <p>
+        This Select has its <strong>aria-required</strong> prop set to true. When its listbox menu
+        is opened, we expect aria-required to be set to "true" for the listbox.
+      </p>
+      <FormField label="Label (aria-required)" inputId="select-aria-required" required={true}>
+        {controlComponent(
+          <Select name="select-aria-required" options={options} aria-required={true} />
+        )}
+      </FormField>
+      <p>
+        This Select has its <strong>required</strong> prop set to true. Again, when its listbox menu
+        is opened, we expect aria-required to be set to "true" for the listbox.
+      </p>
+      <FormField label="Label (required)" inputId="select-required" required={true}>
+        {controlComponent(<Select name="select-required" options={options} required={true} />)}
+      </FormField>
+    </Container>
+  </div>
+);
+
+export const DisabledOptionsTest = () => (
+  <div>
+    <Container>
+      <p>Disabled options may not be assistively focused using the keyboard.</p>
+      <FormField label="Label (Disabled Options)" inputId="select-disabled-options">
+        {controlComponent(<Select name="select-disabled-options" options={disabledOptions} />)}
+      </FormField>
+    </Container>
+  </div>
+);
+
+export const PortalTest = () => (
+  <div>
+    <Container>
+      <p>
+        All gray-bordered containers on this page have their overflow set to hidden. Menus are
+        rendered using portals and should break out of their containers.
+      </p>
+      <FormField label="Label" inputId="select-default-top-label">
+        {controlComponent(<Select name="contact" options={options} />)}
+      </FormField>
+      <p>
+        Menus for Select with grow set to true should resize automatically as the Select grows.
+        Activate this menu and resize the window to see the menu grow to match the width of the
+        Select.
+      </p>
+      <FormField label="Label (Grow)" inputId="select-default-top-label-grow" grow={true}>
+        {controlComponent(<Select name="city" options={manyOptions} grow={true} />)}
+      </FormField>
+    </Container>
+    <Container>
+      <p>
+        Menus should flip upwards automatically if there isn't enough space in the viewport for them
+        to extend downwards. As you scroll down and space becomes available, the Menu will flip back
+        downwards.
+      </p>
+      <FormField label="Label" inputId="select-alert-top-label" error={FormField.ErrorType.Alert}>
+        {controlComponent(<Select name="contact" options={options} />)}
+      </FormField>
+      <FormField
+        label="Label (Grow)"
+        inputId="select-alert-top-label-grow"
+        error={FormField.ErrorType.Alert}
+        grow={true}
+      >
+        {controlComponent(<Select grow={true} name="city" options={manyOptions} />)}
+      </FormField>
+    </Container>
+    <Container>
+      <p>Menus should behave the same with left-labeled FormFields.</p>
+      <FormField
+        label="Label"
+        labelPosition={FormField.LabelPosition.Left}
+        inputId="select-default-left-label"
+      >
+        {controlComponent(<Select name="contact" options={options} />)}
+      </FormField>
+      <FormField
+        label="Label (Grow)"
+        labelPosition={FormField.LabelPosition.Left}
+        inputId="select-default-left-label-grow"
+        grow={true}
+      >
+        {controlComponent(<Select name="city" options={manyOptions} grow={true} />)}
+      </FormField>
+    </Container>
+    <Container>
+      <p>Menus should break out of Modals.</p>
+      <SelectModal />
+    </Container>
+    <Container>
+      <BlurTest />
+    </Container>
+  </div>
+);
diff --git a/modules/preview-react/select/stories/stories_VisualTesting.tsx b/modules/preview-react/select/stories/stories_VisualTesting.tsx
new file mode 100644
index 0000000000..7c93343b5f
--- /dev/null
+++ b/modules/preview-react/select/stories/stories_VisualTesting.tsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import {
+  ComponentStatesTable,
+  permutateProps,
+  StaticStates,
+} from '@workday/canvas-kit-react/testing';
+import {withSnapshotsEnabled, customColorTheme} from '../../../../utils/storybook';
+
+import {Select} from '../lib/Select';
+import {SelectBase} from '../lib/SelectBase';
+import {SelectOption} from '../lib/SelectOption';
+
+import {options} from './examples/storiesData';
+
+const normalizedOptions = options.map(option => {
+  return {
+    data: {},
+    disabled: option.disabled || false,
+    id: option.value,
+    label: option.label || option.value,
+    value: option.value,
+  };
+});
+
+export default withSnapshotsEnabled({
+  title: 'Testing/Preview/Select',
+  component: Select,
+});
+
+export const SelectStates = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={[
+        {label: 'Default', props: {}},
+        {label: 'Alert', props: {error: Select.ErrorType.Alert}},
+        {label: 'Error', props: {error: Select.ErrorType.Error}},
+      ]}
+      columnProps={permutateProps(
+        {
+          className: [
+            {label: 'Default', value: ''},
+            {label: 'Hover', value: 'hover'},
+            {label: 'Focus', value: 'focus'},
+            {label: 'Focus Hover', value: 'focus hover'},
+            {label: 'Active', value: 'active'},
+            {label: 'Active Hover', value: 'active hover'},
+          ],
+          disabled: [
+            {label: '', value: false},
+            {label: 'Disabled', value: true},
+          ],
+        },
+        props => {
+          if (props.disabled && !['', 'hover'].includes(props.className)) {
+            return false;
+          }
+          return true;
+        }
+      )}
+    >
+      {props => (
+        <Select
+          {...props}
+          onChange={() => {}} // eslint-disable-line no-empty-function
+          options={options}
+        />
+      )}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
+export const SelectStatesMenuOn = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={[
+        {label: 'Default', props: {}},
+        {label: 'Alert', props: {error: Select.ErrorType.Alert}},
+        {label: 'Error', props: {error: Select.ErrorType.Error}},
+      ]}
+      columnProps={[
+        {label: 'Default', props: {}},
+        {label: 'Top', props: {menuPlacement: 'top'}},
+      ]}
+    >
+      {props => {
+        const buttonRef = React.createRef<HTMLButtonElement>();
+        return (
+          <div
+            style={{
+              height: 500,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+            }}
+          >
+            <SelectBase
+              {...props}
+              forwardedButtonRef={buttonRef}
+              localButtonRef={buttonRef}
+              onChange={() => {}} // eslint-disable-line no-empty-function
+              options={normalizedOptions}
+              focusedOptionIndex={1}
+              menuVisibility="opened"
+              shouldMenuAutoFlip={false}
+              shouldMenuAutoFocus={false}
+            />
+          </div>
+        );
+      }}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
+export const SelectStatesOption = () => (
+  <div>
+    {[
+      {
+        label: 'Disabled States',
+        columnProps: [
+          {label: 'Default', props: {}},
+          {label: 'Hover', props: {className: 'hover'}},
+        ],
+        rowProps: [{label: 'Disabled', props: {'aria-disabled': true}}],
+      },
+      {
+        label: 'Interaction States',
+        columnProps: [
+          {label: 'Default', props: {}},
+          {label: 'Hover', props: {className: 'hover'}},
+          {label: 'Active', props: {className: 'active'}},
+          {label: 'Active Hover', props: {className: 'active hover'}},
+        ],
+        rowProps: [
+          {label: 'Default', props: {}},
+          {label: 'Assistive-Focus', props: {focused: true}},
+          {label: 'Selected', props: {'aria-selected': true}},
+          {label: 'Assistive-Focus Selected', props: {'aria-selected': true, focused: true}},
+        ],
+      },
+    ].map(statesTable => (
+      <div key={statesTable.label}>
+        <h2>{statesTable.label}</h2>
+        <StaticStates>
+          <ComponentStatesTable
+            rowProps={statesTable.rowProps}
+            columnProps={statesTable.columnProps}
+          >
+            {props => (
+              <ul style={{listStyle: 'none', margin: 0, padding: 0, width: 280}}>
+                <SelectOption {...props}>E-mail</SelectOption>
+              </ul>
+            )}
+          </ComponentStatesTable>
+        </StaticStates>
+      </div>
+    ))}
+  </div>
+);
+
+const themedParameters = {
+  canvasProviderDecorator: {
+    theme: customColorTheme,
+  },
+};
+
+export const SelectThemedStates = () => <SelectStates />;
+export const SelectThemedStatesMenuOn = () => <SelectStatesMenuOn />;
+export const SelectThemedStatesOption = () => <SelectStatesOption />;
+
+SelectThemedStates.parameters = themedParameters;
+SelectThemedStatesMenuOn.parameters = themedParameters;
+SelectThemedStatesOption.parameters = themedParameters;
diff --git a/modules/preview-react/select/stories/tsconfig.json b/modules/preview-react/select/stories/tsconfig.json
new file mode 100644
index 0000000000..4fb6aa9472
--- /dev/null
+++ b/modules/preview-react/select/stories/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../tsconfig.stories.json"
+}