From 56b58ec45c6dead503d8bc372221a242e87873f3 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 9 Apr 2024 18:30:50 -0700
Subject: [PATCH 1/7] Update placeholder text color

---
 packages/select/src/MenuButton/MenuButton.styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/select/src/MenuButton/MenuButton.styles.ts b/packages/select/src/MenuButton/MenuButton.styles.ts
index 6643768b17..cb52cf0b21 100644
--- a/packages/select/src/MenuButton/MenuButton.styles.ts
+++ b/packages/select/src/MenuButton/MenuButton.styles.ts
@@ -103,10 +103,10 @@ export const menuButtonFocusStyle: Record<Theme, string> = {
 
 export const menuButtonDeselectedStyles: Record<Theme, string> = {
   [Theme.Light]: css`
-    color: ${palette.gray.dark1};
+    color: ${palette.gray.base};
   `,
   [Theme.Dark]: css`
-    color: ${palette.gray.light1};
+    color: ${palette.gray.dark1};
 
     &:hover,
     &:active,

From e5a5295fd18931580119cb1a258df03a82d6034a Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 9 Apr 2024 18:35:04 -0700
Subject: [PATCH 2/7] Update spacing

---
 packages/select/src/MenuButton/MenuButton.styles.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/select/src/MenuButton/MenuButton.styles.ts b/packages/select/src/MenuButton/MenuButton.styles.ts
index cb52cf0b21..cd7f14dfcf 100644
--- a/packages/select/src/MenuButton/MenuButton.styles.ts
+++ b/packages/select/src/MenuButton/MenuButton.styles.ts
@@ -30,17 +30,17 @@ export const menuButtonStyleOverrides = css`
 export const menuButtonSizeStyle: Record<Size, string> = {
   [Size.Default]: css`
     > *:last-child {
-      padding: 0 12px;
+      padding: 0 ${spacing[300]}px;
     }
   `,
   [Size.Large]: css`
     > *:last-child {
-      padding: 0 12px 0 ${spacing[3]}px;
+      padding: 0 ${spacing[300]}px;
     }
   `,
   [Size.Small]: css`
     > *:last-child {
-      padding: 0 ${spacing[2]}px 0 10px;
+      padding: 0 ${spacing[200]}px;
     }
   `,
   [Size.XSmall]: css`
@@ -48,7 +48,7 @@ export const menuButtonSizeStyle: Record<Size, string> = {
     font-size: ${typeScales.body1.fontSize}px;
     line-height: ${typeScales.body1.lineHeight}px;
     > *:last-child {
-      padding: 0 ${spacing[1]}px 0 10px;
+      padding: 0 ${spacing[200]}px;
     }
   `,
 };

From 0c05c2efebf458b15ea0c315a67c9743df8c892d Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 9 Apr 2024 18:44:23 -0700
Subject: [PATCH 3/7] Remove error icon from inside MenuButton

---
 .../src/MenuButton/MenuButton.styles.ts       |  2 +-
 packages/select/src/MenuButton/MenuButton.tsx | 20 ++-----------------
 .../select/src/MenuButton/MenuButton.types.ts |  1 -
 packages/select/src/Select/Select.tsx         |  1 -
 4 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/packages/select/src/MenuButton/MenuButton.styles.ts b/packages/select/src/MenuButton/MenuButton.styles.ts
index cd7f14dfcf..abb9092e5e 100644
--- a/packages/select/src/MenuButton/MenuButton.styles.ts
+++ b/packages/select/src/MenuButton/MenuButton.styles.ts
@@ -165,7 +165,7 @@ export const menuButtonTextWrapperStyle = css`
   justify-content: space-between;
   align-items: center;
   flex-grow: 1;
-  gap: ${spacing[1]}px;
+  gap: ${spacing[100]}px;
   overflow: hidden;
 `;
 
diff --git a/packages/select/src/MenuButton/MenuButton.tsx b/packages/select/src/MenuButton/MenuButton.tsx
index 1c1df9e5f1..3de0006f7a 100644
--- a/packages/select/src/MenuButton/MenuButton.tsx
+++ b/packages/select/src/MenuButton/MenuButton.tsx
@@ -3,18 +3,16 @@ import React, { useCallback, useContext } from 'react';
 import Button, { Size as ButtonSize, Variant } from '@leafygreen-ui/button';
 import { css, cx } from '@leafygreen-ui/emotion';
 import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
-import WarningIcon from '@leafygreen-ui/icon/dist/Warning';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Theme } from '@leafygreen-ui/lib';
 
 import { LGIDS_SELECT } from '../constants';
 import { State } from '../Select/Select.types';
 import SelectContext from '../SelectContext';
-import { mobileSizeSet, sizeSets } from '../styleSets';
+import { mobileSizeSet } from '../styleSets';
 import { MobileMediaQuery, useForwardedRef } from '../utils';
 
 import {
-  errorColor,
   menuButtonDeselectedStyles,
   menuButtonDisabledThemeStyles,
   menuButtonErrorStyle,
@@ -42,7 +40,6 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
       readOnly,
       onClose,
       onOpen,
-      errorMessage,
       state,
       baseFontSize,
       __INTERNAL__menuButtonSlot__,
@@ -56,8 +53,6 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
 
     const ref = useForwardedRef(forwardedRef, null);
 
-    const sizeSet = sizeSets[size];
-
     const onClick = useCallback(() => {
       if (open) {
         onClose();
@@ -81,8 +76,7 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
           {
             [menuButtonDeselectedStyles[theme]]: deselected,
             [menuButtonDisabledThemeStyles[theme]]: disabled,
-            [menuButtonErrorStyle[theme]]:
-              state === State.Error && !!errorMessage,
+            [menuButtonErrorStyle[theme]]: state === State.Error,
             [css`
               letter-spacing: initial;
             `]: size === ButtonSize.XSmall,
@@ -130,16 +124,6 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
           >
             {text}
           </div>
-          {state === State.Error && errorMessage && (
-            <WarningIcon
-              aria-hidden
-              className={css`
-                color: ${errorColor[theme]};
-              `}
-              size={sizeSet.warningIcon}
-              title="Error"
-            />
-          )}
         </div>
         {children}
       </Component>
diff --git a/packages/select/src/MenuButton/MenuButton.types.ts b/packages/select/src/MenuButton/MenuButton.types.ts
index ba6ff29454..422537b54e 100644
--- a/packages/select/src/MenuButton/MenuButton.types.ts
+++ b/packages/select/src/MenuButton/MenuButton.types.ts
@@ -13,7 +13,6 @@ export interface MenuButtonBaseProps
   readOnly?: boolean;
   onClose: () => void;
   onOpen: () => void;
-  errorMessage?: string;
   state?: State;
   baseFontSize?: BaseFontSize;
   __INTERNAL__menuButtonSlot__?: React.ForwardRefExoticComponent<
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
index 19d7d8ca09..867a367225 100644
--- a/packages/select/src/Select/Select.tsx
+++ b/packages/select/src/Select/Select.tsx
@@ -592,7 +592,6 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
               aria-describedby={descriptionId}
               aria-invalid={state === State.Error}
               aria-disabled={disabled}
-              errorMessage={errorMessage}
               state={state}
               baseFontSize={baseFontSize}
               __INTERNAL__menuButtonSlot__={__INTERNAL__menuButtonSlot__}

From 7e7d713352b83276fed95313e79fcfa1a8820c70 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 9 Apr 2024 19:18:13 -0700
Subject: [PATCH 4/7] Add error icon and default error message below select

---
 packages/select/README.md                   |  2 +-
 packages/select/src/Select/Select.spec.tsx  |  8 ---
 packages/select/src/Select/Select.styles.ts | 19 +++++++-
 packages/select/src/Select/Select.tsx       | 54 ++++++++++++---------
 4 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/packages/select/README.md b/packages/select/README.md
index 97354ac7c3..0c1f582bc2 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -69,7 +69,7 @@ import { Option, OptionGroup, Select, Size } from '@leafygreen-ui/select';
 | `portalClassName`    | `string`                                      | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                     |             |
 | `popoverZIndex`      | `number`                                      | Sets the z-index CSS property for the popover.                                                                                                                                                                                                  |             |
 | `state`              | `'none'`, `'error'`                           | Determines the state of the `<select>`                                                                                                                                                                                                          | `'none'`    |
-| `errorMessage`       | `string`                                      | Text that shows when the `state` is set to `error`.                                                                                                                                                                                             |             |
+| `errorMessage`       | `string`                                      | Text that shows when the `state` is set to `error`.                                                                                                                                                                                             | `'This input needs your attention'`            |
 | `baseFontSize`       | `'13'`, `'16'`                                | Determines the base font size if sizeVariant is set to `default`                                                                                                                                                                                | `'13'`      |
 | `dropdownWidthBasis` | `'option'` \| `'trigger'`                     | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option.                                                                 | `trigger`   |
 
diff --git a/packages/select/src/Select/Select.spec.tsx b/packages/select/src/Select/Select.spec.tsx
index f5831e698b..96dae8021d 100644
--- a/packages/select/src/Select/Select.spec.tsx
+++ b/packages/select/src/Select/Select.spec.tsx
@@ -936,14 +936,6 @@ describe('packages/select', () => {
       expect(isError).toBeTruthy();
       expect(getErrorMessage()).toBeInTheDocument();
     });
-
-    test('error message is not present if "errorMessage" is empty', () => {
-      const { isError, getErrorMessage } = renderSelect({
-        state: State.Error,
-      });
-      expect(isError).toBeTruthy();
-      expect(getErrorMessage()).not.toBeInTheDocument();
-    });
   });
 
   describe('when the "state" is "none"', () => {
diff --git a/packages/select/src/Select/Select.styles.ts b/packages/select/src/Select/Select.styles.ts
index aab2d28621..458ea33a12 100644
--- a/packages/select/src/Select/Select.styles.ts
+++ b/packages/select/src/Select/Select.styles.ts
@@ -1,4 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
   fontFamilies,
@@ -25,6 +26,22 @@ export const largeLabelStyles = css`
   line-height: ${typeScales.large.lineHeight}px;
 `;
 
+export const errorContainerStyles = css`
+  padding-top: ${spacing[100]}px;
+  display: flex;
+  align-items: center;
+  gap: ${spacing[100]}px;
+`;
+
+export const hideErrorContainerStyles = css`
+  opacity: 0;
+`;
+
+export const errorIconThemeStyles: Record<Theme, string> = {
+  [Theme.Light]: palette.red.base,
+  [Theme.Dark]: palette.red.light1,
+};
+
 export const errorTextStyle = ({
   darkMode,
   sizeSet,
@@ -35,8 +52,6 @@ export const errorTextStyle = ({
   font-family: ${fontFamilies.default};
   color: ${darkMode ? palette.red.light1 : palette.red.base};
   font-size: ${sizeSet.text}px;
-  margin-top: ${spacing[1]}px;
-  padding-left: 2px;
   transition: color ${transitionDuration.faster}ms ease-in-out;
   transition-delay: ${transitionDuration.faster}ms;
 `;
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
index 867a367225..38d5d223a6 100644
--- a/packages/select/src/Select/Select.tsx
+++ b/packages/select/src/Select/Select.tsx
@@ -16,6 +16,7 @@ import {
   useIdAllocator,
   useViewportSize,
 } from '@leafygreen-ui/hooks';
+import Icon from '@leafygreen-ui/icon';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
@@ -41,7 +42,10 @@ import {
 } from '../utils';
 
 import {
+  errorContainerStyles,
+  errorIconThemeStyles,
   errorTextStyle,
+  hideErrorContainerStyles,
   labelDescriptionContainerStyle,
   largeLabelStyles,
   wrapperStyle,
@@ -63,7 +67,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       allowDeselect = true,
       usePortal = true,
       placeholder = 'Select',
-      errorMessage = '',
+      errorMessage = 'This input needs your attention',
       state = State.None,
       dropdownWidthBasis = DropdownWidthBasis.Trigger,
       baseFontSize = BaseFontSize.Body1,
@@ -106,7 +110,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       );
     }
 
-    const { darkMode } = useDarkMode(darkModeProp);
+    const { darkMode, theme } = useDarkMode(darkModeProp);
 
     const descriptionId = `${id}-description`;
     const menuId = `${id}-menu`;
@@ -615,27 +619,33 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
             </MenuButton>
           </SelectContext.Provider>
           {state === State.Error && errorMessage && (
-            <span
-              data-lgid={LGIDS_SELECT.errorMessage}
-              className={cx(
-                errorTextStyle({ darkMode, sizeSet }),
-                css`
-                  ${MobileMediaQuery} {
-                    font-size: ${mobileSizeSet.description.text}px;
-                    line-height: ${mobileSizeSet.description.lineHeight}px;
-                  }
-                `,
-                {
-                  [css`
-                    // Hide error text when menu is open,
-                    // so it doesn't peek around the menu corner
-                    color: transparent;
-                  `]: open,
-                },
-              )}
+            <div
+              className={cx(errorContainerStyles, {
+                // Hide error text when menu is open
+                [hideErrorContainerStyles]: open,
+              })}
             >
-              {errorMessage}
-            </span>
+              <Icon
+                title="Error"
+                glyph="Warning"
+                fill={errorIconThemeStyles[theme]}
+                aria-hidden
+              />
+              <span
+                data-lgid={LGIDS_SELECT.errorMessage}
+                className={cx(
+                  errorTextStyle({ darkMode, sizeSet }),
+                  css`
+                    ${MobileMediaQuery} {
+                      font-size: ${mobileSizeSet.description.text}px;
+                      line-height: ${mobileSizeSet.description.lineHeight}px;
+                    }
+                  `,
+                )}
+              >
+                {errorMessage}
+              </span>
+            </div>
           )}
         </div>
       </LeafyGreenProvider>

From 5486879b8772e2dc708b043e3d40202f5e2f4fc9 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Wed, 10 Apr 2024 12:10:32 -0700
Subject: [PATCH 5/7] StateFeedback with errorMessage and successMessage

---
 packages/select/README.md                     | 55 ++++++------
 .../src/MenuButton/MenuButton.styles.ts       | 39 ++++++++-
 packages/select/src/MenuButton/MenuButton.tsx |  4 +-
 packages/select/src/Select/Select.styles.ts   | 41 +--------
 packages/select/src/Select/Select.tsx         | 49 +++--------
 packages/select/src/Select/Select.types.ts    | 10 ++-
 .../src/StateFeedback/StateFeedback.styles.ts | 65 +++++++++++++++
 .../src/StateFeedback/StateFeedback.tsx       | 83 +++++++++++++++++++
 .../src/StateFeedback/StateFeedback.types.ts  |  9 ++
 packages/select/src/StateFeedback/index.ts    |  1 +
 10 files changed, 248 insertions(+), 108 deletions(-)
 create mode 100644 packages/select/src/StateFeedback/StateFeedback.styles.ts
 create mode 100644 packages/select/src/StateFeedback/StateFeedback.tsx
 create mode 100644 packages/select/src/StateFeedback/StateFeedback.types.ts
 create mode 100644 packages/select/src/StateFeedback/index.ts

diff --git a/packages/select/README.md b/packages/select/README.md
index 0c1f582bc2..aa23326af2 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -44,34 +44,35 @@ import { Option, OptionGroup, Select, Size } from '@leafygreen-ui/select';
 
 ## Select Properties
 
-| Prop                 | Type                                          | Description                                                                                                                                                                                                                                     | Default     |
-| -------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `children`           | `node`                                        | `<Option />` and `<OptionGroup />` elements.                                                                                                                                                                                                    |             |
-| `className`          | `string`                                      | Adds a className to the outermost element.                                                                                                                                                                                                      |             |
-| `darkMode`           | `boolean`                                     | Determines whether or not the component will appear in dark mode.                                                                                                                                                                               | `false`     |
-| `size`               | `'xsmall'`, `'small'`, `'default'`, `'large'` | Sets the size of the component's elements.                                                                                                                                                                                                      | `'default'` |
-| `id`                 | `string`                                      | id associated with the Select component.                                                                                                                                                                                                        |             |
-| `name`               | `string`                                      | The name that will be used when submitted as part of a form.                                                                                                                                                                                    |             |
-| `label`              | `string`                                      | Text shown in bold above the input element.                                                                                                                                                                                                     |             |
+| Prop                 | Type                                          | Description                                                                                                                                                                                                                                     | Default                             |
+| -------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------- | -------- |
+| `children`           | `node`                                        | `<Option />` and `<OptionGroup />` elements.                                                                                                                                                                                                    |                                     |
+| `className`          | `string`                                      | Adds a className to the outermost element.                                                                                                                                                                                                      |                                     |
+| `darkMode`           | `boolean`                                     | Determines whether or not the component will appear in dark mode.                                                                                                                                                                               | `false`                             |
+| `size`               | `'xsmall'`, `'small'`, `'default'`, `'large'` | Sets the size of the component's elements.                                                                                                                                                                                                      | `'default'`                         |
+| `id`                 | `string`                                      | id associated with the Select component.                                                                                                                                                                                                        |                                     |
+| `name`               | `string`                                      | The name that will be used when submitted as part of a form.                                                                                                                                                                                    |                                     |
+| `label`              | `string`                                      | Text shown in bold above the input element.                                                                                                                                                                                                     |                                     |
 | `aria-labelledby`    | `string`                                      | Must be provided if and only if neither `label` nor `aria-label` is not provided.                                                                                                                                                               |
-| `aria-label`         | `string`                                      | Must be provided if and only if neither `label` nor `aria-labelledby` is not provided.                                                                                                                                                          |             |
-| `description`        | `React.ReactNode`                             | Text that gives more detail about the requirements for the input.                                                                                                                                                                               |             |
-| `placeholder`        | `string`                                      | The placeholder text shown in the input element when an option is not selected.                                                                                                                                                                 | `'Select'`  |
-| `disabled`           | `boolean`                                     | Disables the component from being edited.                                                                                                                                                                                                       | `false`     |
-| `value`              | `string`                                      | Sets the `<Option />` that will appear selected and makes the component a controlled component.                                                                                                                                                 | `''`        |
-| `defaultValue`       | `string`                                      | Sets the `<Option />` that will appear selected on page load when the component is uncontrolled.                                                                                                                                                | `''`        |
-| `onChange`           | `function`                                    | A function that gets called when the selected value changes. Receives the value string as the first argument.                                                                                                                                   | `() => {}`  |
-| `readOnly`           | `boolean`                                     | Disables the console warning when the component is controlled and no `onChange` prop is provided.                                                                                                                                               | `false`     |
-| `allowDeselect`      | `boolean`                                     | Enables or disables the option for a user to select a null default value.                                                                                                                                                                       | `true`      |
-| `usePortal`          | `boolean`                                     | Determines if Select dropdown will be rendered inside a portal.                                                                                                                                                                                 | `true`      |
-| `portalContainer`    | `HTMLElement` \| `null`                       | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`. |             |
-| `scrollContainer`    | `HTMLElement` \| `null`                       | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                            |             |
-| `portalClassName`    | `string`                                      | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                     |             |
-| `popoverZIndex`      | `number`                                      | Sets the z-index CSS property for the popover.                                                                                                                                                                                                  |             |
-| `state`              | `'none'`, `'error'`                           | Determines the state of the `<select>`                                                                                                                                                                                                          | `'none'`    |
-| `errorMessage`       | `string`                                      | Text that shows when the `state` is set to `error`.                                                                                                                                                                                             | `'This input needs your attention'`            |
-| `baseFontSize`       | `'13'`, `'16'`                                | Determines the base font size if sizeVariant is set to `default`                                                                                                                                                                                | `'13'`      |
-| `dropdownWidthBasis` | `'option'` \| `'trigger'`                     | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option.                                                                 | `trigger`   |
+| `aria-label`         | `string`                                      | Must be provided if and only if neither `label` nor `aria-labelledby` is not provided.                                                                                                                                                          |                                     |
+| `description`        | `React.ReactNode`                             | Text that gives more detail about the requirements for the input.                                                                                                                                                                               |                                     |
+| `placeholder`        | `string`                                      | The placeholder text shown in the input element when an option is not selected.                                                                                                                                                                 | `'Select'`                          |
+| `disabled`           | `boolean`                                     | Disables the component from being edited.                                                                                                                                                                                                       | `false`                             |
+| `value`              | `string`                                      | Sets the `<Option />` that will appear selected and makes the component a controlled component.                                                                                                                                                 | `''`                                |
+| `defaultValue`       | `string`                                      | Sets the `<Option />` that will appear selected on page load when the component is uncontrolled.                                                                                                                                                | `''`                                |
+| `onChange`           | `function`                                    | A function that gets called when the selected value changes. Receives the value string as the first argument.                                                                                                                                   | `() => {}`                          |
+| `readOnly`           | `boolean`                                     | Disables the console warning when the component is controlled and no `onChange` prop is provided.                                                                                                                                               | `false`                             |
+| `allowDeselect`      | `boolean`                                     | Enables or disables the option for a user to select a null default value.                                                                                                                                                                       | `true`                              |
+| `usePortal`          | `boolean`                                     | Determines if Select dropdown will be rendered inside a portal.                                                                                                                                                                                 | `true`                              |
+| `portalContainer`    | `HTMLElement` \| `null`                       | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`. |                                     |
+| `scrollContainer`    | `HTMLElement` \| `null`                       | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                            |                                     |
+| `portalClassName`    | `string`                                      | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                     |                                     |
+| `popoverZIndex`      | `number`                                      | Sets the z-index CSS property for the popover.                                                                                                                                                                                                  |                                     |
+| `state`              | `'error'`                                     | `'none'`                                                                                                                                                                                                                                        | `'valid'`                           | Determines the state of the `<select>` | `'none'` |
+| `errorMessage`       | `string`                                      | Text that shows when the `state` is set to `error`.                                                                                                                                                                                             | `'This input needs your attention'` |
+| `successMessage`     | `string`                                      | Text that shows when the `state` is set to `valid`.                                                                                                                                                                                             | `'Success'`                         |
+| `baseFontSize`       | `'13'`, `'16'`                                | Determines the base font size if sizeVariant is set to `default`                                                                                                                                                                                | `'13'`                              |
+| `dropdownWidthBasis` | `'option'` \| `'trigger'`                     | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option.                                                                 | `trigger`                           |
 
 # Option
 
diff --git a/packages/select/src/MenuButton/MenuButton.styles.ts b/packages/select/src/MenuButton/MenuButton.styles.ts
index abb9092e5e..0e07099c8b 100644
--- a/packages/select/src/MenuButton/MenuButton.styles.ts
+++ b/packages/select/src/MenuButton/MenuButton.styles.ts
@@ -132,8 +132,14 @@ export const menuButtonDisabledThemeStyles: Record<Theme, string> = {
     css`
       &[aria-disabled='true'] {
         background-color: ${palette.gray.light2};
+        border-color: ${palette.gray.light1};
         color: ${palette.gray.base};
 
+        &:hover,
+        &:active {
+          box-shadow: inherit;
+        }
+
         > *:last-child {
           > svg {
             color: ${palette.gray.base};
@@ -147,8 +153,13 @@ export const menuButtonDisabledThemeStyles: Record<Theme, string> = {
     css`
       &[aria-disabled='true'] {
         background-color: ${palette.gray.dark3};
-        color: ${palette.gray.dark1};
         border-color: ${palette.gray.dark2};
+        color: ${palette.gray.dark1};
+
+        &:hover,
+        &:active {
+          box-shadow: inherit;
+        }
 
         > *:last-child {
           > svg {
@@ -201,3 +212,29 @@ export const menuButtonErrorStyle: Record<Theme, string> = {
     }
   `,
 };
+
+export const validColor: Record<Theme, string> = {
+  [Theme.Light]: palette.green.dark1,
+  [Theme.Dark]: palette.green.base,
+};
+
+export const menuButtonValidStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    border-color: ${errorColor[Theme.Light]};
+    background-color: ${palette.white};
+
+    &:hover,
+    &:active {
+      box-shadow: ${hoverRing.light.green};
+    }
+  `,
+  [Theme.Dark]: css`
+    border-color: ${errorColor[Theme.Dark]};
+
+    &:hover,
+    &:active {
+      border-color: ${errorColor[Theme.Dark]};
+      box-shadow: ${hoverRing.dark.green};
+    }
+  `,
+};
diff --git a/packages/select/src/MenuButton/MenuButton.tsx b/packages/select/src/MenuButton/MenuButton.tsx
index 3de0006f7a..f83be8880e 100644
--- a/packages/select/src/MenuButton/MenuButton.tsx
+++ b/packages/select/src/MenuButton/MenuButton.tsx
@@ -23,6 +23,7 @@ import {
   menuButtonTextClassName,
   menuButtonTextStyle,
   menuButtonTextWrapperStyle,
+  menuButtonValidStyle,
 } from './MenuButton.styles';
 import { MenuButtonProps } from './MenuButton.types';
 
@@ -75,8 +76,9 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
           menuButtonFocusStyle[theme],
           {
             [menuButtonDeselectedStyles[theme]]: deselected,
-            [menuButtonDisabledThemeStyles[theme]]: disabled,
             [menuButtonErrorStyle[theme]]: state === State.Error,
+            [menuButtonValidStyle[theme]]: state === State.Valid,
+            [menuButtonDisabledThemeStyles[theme]]: disabled,
             [css`
               letter-spacing: initial;
             `]: size === ButtonSize.XSmall,
diff --git a/packages/select/src/Select/Select.styles.ts b/packages/select/src/Select/Select.styles.ts
index 458ea33a12..53f711c4bd 100644
--- a/packages/select/src/Select/Select.styles.ts
+++ b/packages/select/src/Select/Select.styles.ts
@@ -1,14 +1,5 @@
 import { css } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import {
-  fontFamilies,
-  spacing,
-  transitionDuration,
-  typeScales,
-} from '@leafygreen-ui/tokens';
-
-import { SizeSet } from '../styleSets';
+import { spacing, typeScales } from '@leafygreen-ui/tokens';
 
 export const labelDescriptionContainerStyle = css`
   display: flex;
@@ -25,33 +16,3 @@ export const largeLabelStyles = css`
   font-size: ${typeScales.large.fontSize}px;
   line-height: ${typeScales.large.lineHeight}px;
 `;
-
-export const errorContainerStyles = css`
-  padding-top: ${spacing[100]}px;
-  display: flex;
-  align-items: center;
-  gap: ${spacing[100]}px;
-`;
-
-export const hideErrorContainerStyles = css`
-  opacity: 0;
-`;
-
-export const errorIconThemeStyles: Record<Theme, string> = {
-  [Theme.Light]: palette.red.base,
-  [Theme.Dark]: palette.red.light1,
-};
-
-export const errorTextStyle = ({
-  darkMode,
-  sizeSet,
-}: {
-  darkMode: boolean;
-  sizeSet: SizeSet;
-}) => css`
-  font-family: ${fontFamilies.default};
-  color: ${darkMode ? palette.red.light1 : palette.red.base};
-  font-size: ${sizeSet.text}px;
-  transition: color ${transitionDuration.faster}ms ease-in-out;
-  transition-delay: ${transitionDuration.faster}ms;
-`;
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
index 38d5d223a6..16aa6d39de 100644
--- a/packages/select/src/Select/Select.tsx
+++ b/packages/select/src/Select/Select.tsx
@@ -16,7 +16,6 @@ import {
   useIdAllocator,
   useViewportSize,
 } from '@leafygreen-ui/hooks';
-import Icon from '@leafygreen-ui/icon';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
@@ -29,7 +28,8 @@ import ListMenu from '../ListMenu';
 import MenuButton from '../MenuButton';
 import { InternalOption, OptionElement } from '../Option';
 import SelectContext from '../SelectContext';
-import { mobileSizeSet, sizeSets } from '../styleSets';
+import { StateFeedback } from '../StateFeedback';
+import { mobileSizeSet } from '../styleSets';
 import {
   convertToInternalElements,
   getOptionValue,
@@ -42,10 +42,6 @@ import {
 } from '../utils';
 
 import {
-  errorContainerStyles,
-  errorIconThemeStyles,
-  errorTextStyle,
-  hideErrorContainerStyles,
   labelDescriptionContainerStyle,
   largeLabelStyles,
   wrapperStyle,
@@ -68,6 +64,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       usePortal = true,
       placeholder = 'Select',
       errorMessage = 'This input needs your attention',
+      successMessage = 'Success',
       state = State.None,
       dropdownWidthBasis = DropdownWidthBasis.Trigger,
       baseFontSize = BaseFontSize.Body1,
@@ -110,7 +107,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       );
     }
 
-    const { darkMode, theme } = useDarkMode(darkModeProp);
+    const { darkMode } = useDarkMode(darkModeProp);
 
     const descriptionId = `${id}-description`;
     const menuId = `${id}-menu`;
@@ -122,8 +119,6 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
     const menuButtonId = useIdAllocator({ prefix: 'select' });
     const listMenuRef = useStateRef<HTMLUListElement | null>(null);
 
-    const sizeSet = sizeSets[size];
-
     const providerData = useMemo(() => {
       return { size, open, disabled };
     }, [size, open, disabled]);
@@ -618,35 +613,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
               </ListMenu>
             </MenuButton>
           </SelectContext.Provider>
-          {state === State.Error && errorMessage && (
-            <div
-              className={cx(errorContainerStyles, {
-                // Hide error text when menu is open
-                [hideErrorContainerStyles]: open,
-              })}
-            >
-              <Icon
-                title="Error"
-                glyph="Warning"
-                fill={errorIconThemeStyles[theme]}
-                aria-hidden
-              />
-              <span
-                data-lgid={LGIDS_SELECT.errorMessage}
-                className={cx(
-                  errorTextStyle({ darkMode, sizeSet }),
-                  css`
-                    ${MobileMediaQuery} {
-                      font-size: ${mobileSizeSet.description.text}px;
-                      line-height: ${mobileSizeSet.description.lineHeight}px;
-                    }
-                  `,
-                )}
-              >
-                {errorMessage}
-              </span>
-            </div>
-          )}
+          <StateFeedback
+            state={state}
+            errorMessage={errorMessage}
+            successMessage={successMessage}
+            hideFeedback={open}
+            disabled={disabled}
+          />
         </div>
       </LeafyGreenProvider>
     );
diff --git a/packages/select/src/Select/Select.types.ts b/packages/select/src/Select/Select.types.ts
index 0c24031c01..633b3c8494 100644
--- a/packages/select/src/Select/Select.types.ts
+++ b/packages/select/src/Select/Select.types.ts
@@ -19,8 +19,9 @@ export const Size = {
 export type Size = (typeof Size)[keyof typeof Size];
 
 export const State = {
-  None: 'none',
   Error: 'error',
+  None: 'none',
+  Valid: 'valid',
 } as const;
 export type State = (typeof State)[keyof typeof State];
 
@@ -88,9 +89,16 @@ export interface BaseSelectProps
 
   /**
    * Error message rendered when the `state` prop is set to `error`.
+   * @default 'This input needs your attention'
    */
   errorMessage?: string;
 
+  /**
+   * Success message rendered when the `state` prop is set to `valid`.
+   * @default 'Success'
+   */
+  successMessage?: string;
+
   /**
    * Determines whether the component should be rendered in an error state.
    */
diff --git a/packages/select/src/StateFeedback/StateFeedback.styles.ts b/packages/select/src/StateFeedback/StateFeedback.styles.ts
new file mode 100644
index 0000000000..e5307bff7d
--- /dev/null
+++ b/packages/select/src/StateFeedback/StateFeedback.styles.ts
@@ -0,0 +1,65 @@
+import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import {
+  BaseFontSize,
+  spacing,
+  transitionDuration,
+  typeScales,
+} from '@leafygreen-ui/tokens';
+
+import { mobileSizeSet } from '../styleSets';
+import { MobileMediaQuery } from '../utils';
+
+export const containerStyles = css`
+  padding-top: ${spacing[100]}px;
+  display: flex;
+  align-items: center;
+  gap: ${spacing[100]}px;
+`;
+
+export const hideContainerStyle = css`
+  opacity: 0;
+`;
+
+export const errorIconThemeStyle: Record<Theme, string> = {
+  [Theme.Light]: palette.red.base,
+  [Theme.Dark]: palette.red.light1,
+};
+
+export const errorTransitionStyles = css`
+  transition: color ${transitionDuration.faster}ms ease-in-out;
+  transition-delay: ${transitionDuration.faster}ms;
+`;
+
+export const errorTextMobileStyles = css`
+  ${MobileMediaQuery} {
+    font-size: ${mobileSizeSet.description.text}px;
+    line-height: ${mobileSizeSet.description.lineHeight}px;
+  }
+`;
+
+export const validIconThemeStyle: Record<Theme, string> = {
+  [Theme.Light]: palette.green.dark1,
+  [Theme.Dark]: palette.green.base,
+};
+
+export const validMessageThemeStyle: Record<Theme, string> = {
+  [Theme.Light]: css`
+    color: ${palette.green.dark1};
+  `,
+  [Theme.Dark]: css`
+    color: ${palette.green.base};
+  `,
+};
+
+export const validMessageTypeScaleStyles: Record<BaseFontSize, string> = {
+  [BaseFontSize.Body1]: css`
+    font-size: ${typeScales.body1.fontSize}px;
+    line-height: ${typeScales.body1.lineHeight}px;
+  `,
+  [BaseFontSize.Body2]: css`
+    font-size: ${typeScales.body2.fontSize}px;
+    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
+  `,
+};
diff --git a/packages/select/src/StateFeedback/StateFeedback.tsx b/packages/select/src/StateFeedback/StateFeedback.tsx
new file mode 100644
index 0000000000..f8b34fd79d
--- /dev/null
+++ b/packages/select/src/StateFeedback/StateFeedback.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import Icon from '@leafygreen-ui/icon';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Error, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
+
+import { LGIDS_SELECT } from '../constants';
+import { State } from '../Select/Select.types';
+
+import {
+  containerStyles,
+  errorIconThemeStyle,
+  errorTextMobileStyles,
+  hideContainerStyle,
+  validIconThemeStyle,
+  validMessageThemeStyle,
+  validMessageTypeScaleStyles,
+} from './StateFeedback.styles';
+import { StateFeedbackProps } from './StateFeedback.types';
+
+export const StateFeedback = ({
+  state,
+  errorMessage,
+  successMessage,
+  hideFeedback,
+  disabled,
+}: StateFeedbackProps) => {
+  const { theme } = useDarkMode();
+  const baseFontSize = useUpdatedBaseFontSize();
+
+  const isErrorState = state === State.Error;
+  const isValidState = state === State.Valid;
+  const showStateFeedback = (isErrorState || isValidState) && !disabled;
+
+  const iconProps = {
+    glyph: isErrorState ? 'Warning' : 'Checkmark',
+    fill: isErrorState
+      ? errorIconThemeStyle[theme]
+      : validIconThemeStyle[theme],
+    title: isErrorState ? 'Error' : 'Valid',
+  };
+
+  return (
+    <div
+      className={cx(containerStyles, {
+        [hideContainerStyle]: hideFeedback,
+      })}
+      aria-live="polite"
+      aria-relevant="all"
+    >
+      {showStateFeedback && (
+        <>
+          <Icon
+            glyph={iconProps.glyph}
+            fill={iconProps.fill}
+            title={iconProps.title}
+            aria-hidden
+          />
+          {isErrorState ? (
+            <Error
+              className={errorTextMobileStyles}
+              data-lgid={LGIDS_SELECT.errorMessage}
+            >
+              {errorMessage}
+            </Error>
+          ) : (
+            <div
+              className={cx(
+                validMessageThemeStyle[theme],
+                validMessageTypeScaleStyles[baseFontSize],
+              )}
+            >
+              {successMessage}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+StateFeedback.displayName = 'StateFeedback';
diff --git a/packages/select/src/StateFeedback/StateFeedback.types.ts b/packages/select/src/StateFeedback/StateFeedback.types.ts
new file mode 100644
index 0000000000..7fe351e1c8
--- /dev/null
+++ b/packages/select/src/StateFeedback/StateFeedback.types.ts
@@ -0,0 +1,9 @@
+import { State } from '../Select/Select.types';
+
+export interface StateFeedbackProps {
+  disabled: boolean;
+  errorMessage: string;
+  hideFeedback: boolean;
+  state: State;
+  successMessage: string;
+}
diff --git a/packages/select/src/StateFeedback/index.ts b/packages/select/src/StateFeedback/index.ts
new file mode 100644
index 0000000000..5bec51dea9
--- /dev/null
+++ b/packages/select/src/StateFeedback/index.ts
@@ -0,0 +1 @@
+export { StateFeedback } from './StateFeedback';

From b55a843e0f2d72ec14bd8754240e1375dd6dfe08 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Wed, 10 Apr 2024 12:10:38 -0700
Subject: [PATCH 6/7] Select changeset

---
 .changeset/modern-spies-behave.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 .changeset/modern-spies-behave.md

diff --git a/.changeset/modern-spies-behave.md b/.changeset/modern-spies-behave.md
new file mode 100644
index 0000000000..42cdc11f5e
--- /dev/null
+++ b/.changeset/modern-spies-behave.md
@@ -0,0 +1,16 @@
+---
+'@leafygreen-ui/select': major
+---
+
+[LG-4138](https://jira.mongodb.org/browse/LG-4138)
+
+1. Updated styling:
+  - updated spacing for `'xsmall'`, `'small'`, and `'large'` size variants
+  - updated placeholder text color
+  - removed validation icon from inside the input
+
+2. Added default `errorMessage` of `'This input needs your attention'`
+
+3. Added `valid` state variant and `successMessage` prop
+  - `successMessage` will render a default of `'Success'` and can be customized
+  - `successMessage` will only render when `state=valid`

From 8125a8d32ee3d18a4eb42ffd9834805052c2231a Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Wed, 24 Apr 2024 07:03:06 -0700
Subject: [PATCH 7/7] Refactor

---
 packages/select/package.json                  |   1 +
 .../src/MenuButton/MenuButton.styles.ts       | 131 +++++-------------
 packages/select/src/MenuButton/MenuButton.tsx |  10 +-
 packages/select/src/Select/Select.tsx         |  18 +--
 packages/select/src/Select/Select.types.ts    |  13 +-
 .../src/StateFeedback/StateFeedback.styles.ts |  65 ---------
 .../src/StateFeedback/StateFeedback.tsx       |  83 -----------
 .../src/StateFeedback/StateFeedback.types.ts  |   9 --
 packages/select/src/StateFeedback/index.ts    |   1 -
 .../src/utils/getTestUtils/getTestUtils.ts    |   3 +-
 packages/select/tsconfig.json                 |   3 +
 yarn.lock                                     |   6 +-
 12 files changed, 65 insertions(+), 278 deletions(-)
 delete mode 100644 packages/select/src/StateFeedback/StateFeedback.styles.ts
 delete mode 100644 packages/select/src/StateFeedback/StateFeedback.tsx
 delete mode 100644 packages/select/src/StateFeedback/StateFeedback.types.ts
 delete mode 100644 packages/select/src/StateFeedback/index.ts

diff --git a/packages/select/package.json b/packages/select/package.json
index fce7c780bd..3994a745b1 100644
--- a/packages/select/package.json
+++ b/packages/select/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@leafygreen-ui/button": "^21.2.0",
     "@leafygreen-ui/emotion": "^4.0.8",
+    "@leafygreen-ui/form-field": "^1.1.1",
     "@leafygreen-ui/hooks": "^8.1.3",
     "@leafygreen-ui/icon": "^12.1.0",
     "@leafygreen-ui/input-option": "^1.1.3",
diff --git a/packages/select/src/MenuButton/MenuButton.styles.ts b/packages/select/src/MenuButton/MenuButton.styles.ts
index 0e07099c8b..d868ffd7c4 100644
--- a/packages/select/src/MenuButton/MenuButton.styles.ts
+++ b/packages/select/src/MenuButton/MenuButton.styles.ts
@@ -1,7 +1,8 @@
-import { css, cx } from '@leafygreen-ui/emotion';
+import { css } from '@leafygreen-ui/emotion';
 import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
+  color,
   focusRing,
   fontWeights,
   hoverRing,
@@ -10,6 +11,8 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
+import { State } from '../Select/Select.types';
+
 export const menuButtonTextClassName = createUniqueClassName('select-menu');
 
 export const menuButtonStyleOverrides = css`
@@ -55,23 +58,23 @@ export const menuButtonSizeStyle: Record<Size, string> = {
 
 export const menuButtonModeOverrides: Record<Theme, string> = {
   [Theme.Light]: css`
-    background-color: ${palette.white};
+    background-color: ${color.light.background.primary.default};
     // Override button default color
     > *:last-child {
       > svg {
-        color: ${palette.gray.dark2};
+        color: ${color.light.icon.primary.default};
       }
     }
   `,
   [Theme.Dark]: css`
-    border-color: ${palette.gray.base};
+    border-color: ${color.dark.border.primary.default};
     background-color: ${palette.gray.dark4};
-    color: ${palette.gray.light3};
+    color: ${color.dark.text.primary.default};
 
     // Override button default color
     > *:last-child {
       > svg {
-        color: ${palette.gray.light1};
+        color: ${color.dark.icon.primary.default};
       }
     }
 
@@ -79,7 +82,7 @@ export const menuButtonModeOverrides: Record<Theme, string> = {
     &:active,
     &:focus {
       background-color: ${palette.gray.dark4};
-      color: ${palette.gray.light3};
+      color: ${color.dark.text.primary.hover};
     }
   `,
 };
@@ -116,7 +119,7 @@ export const menuButtonDeselectedStyles: Record<Theme, string> = {
   `,
 };
 
-export const menuButtonDisabledStyles = css`
+export const getMenuButtonDisabledThemeStyles = (theme: Theme) => css`
   cursor: not-allowed;
   pointer-events: unset;
   box-shadow: unset;
@@ -124,52 +127,24 @@ export const menuButtonDisabledStyles = css`
   &:active {
     pointer-events: none;
   }
-`;
 
-export const menuButtonDisabledThemeStyles: Record<Theme, string> = {
-  [Theme.Light]: cx(
-    menuButtonDisabledStyles,
-    css`
-      &[aria-disabled='true'] {
-        background-color: ${palette.gray.light2};
-        border-color: ${palette.gray.light1};
-        color: ${palette.gray.base};
-
-        &:hover,
-        &:active {
-          box-shadow: inherit;
-        }
-
-        > *:last-child {
-          > svg {
-            color: ${palette.gray.base};
-          }
-        }
-      }
-    `,
-  ),
-  [Theme.Dark]: cx(
-    menuButtonDisabledStyles,
-    css`
-      &[aria-disabled='true'] {
-        background-color: ${palette.gray.dark3};
-        border-color: ${palette.gray.dark2};
-        color: ${palette.gray.dark1};
-
-        &:hover,
-        &:active {
-          box-shadow: inherit;
-        }
-
-        > *:last-child {
-          > svg {
-            color: ${palette.gray.dark1};
-          }
-        }
+  &[aria-disabled='true'] {
+    background-color: ${color[theme].background.disabled.default};
+    border-color: ${color[theme].border.disabled.default};
+    color: ${color[theme].text.disabled.default};
+
+    &:hover,
+    &:active {
+      box-shadow: inherit;
+    }
+
+    > *:last-child {
+      > svg {
+        color: ${color[theme].icon.disabled.default};
       }
-    `,
-  ),
-};
+    }
+  }
+`;
 
 export const menuButtonTextWrapperStyle = css`
   display: flex;
@@ -187,54 +162,24 @@ export const menuButtonTextStyle = css`
   max-width: 100%;
 `;
 
-export const errorColor: Record<Theme, string> = {
-  [Theme.Light]: palette.red.base,
-  [Theme.Dark]: palette.red.light1,
-};
-
-export const menuButtonErrorStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    border-color: ${errorColor[Theme.Light]};
-    background-color: ${palette.white};
+export const getMenuButtonStateStyles = (theme: Theme) => ({
+  [State.Error]: css`
+    border-color: ${color[theme].border.error.default};
 
     &:hover,
     &:active {
-      box-shadow: ${hoverRing.light.red};
+      border-color: ${color[theme].border.error.hover};
+      box-shadow: ${hoverRing[theme].red};
     }
   `,
-  [Theme.Dark]: css`
-    border-color: ${errorColor[Theme.Dark]};
+  [State.None]: css``,
+  [State.Valid]: css`
+    border-color: ${color[theme].border.success.default};
 
     &:hover,
     &:active {
-      border-color: ${errorColor[Theme.Dark]};
-      box-shadow: ${hoverRing.dark.red};
+      border-color: ${color[theme].border.success.hover};
+      box-shadow: ${hoverRing[theme].green};
     }
   `,
-};
-
-export const validColor: Record<Theme, string> = {
-  [Theme.Light]: palette.green.dark1,
-  [Theme.Dark]: palette.green.base,
-};
-
-export const menuButtonValidStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    border-color: ${errorColor[Theme.Light]};
-    background-color: ${palette.white};
-
-    &:hover,
-    &:active {
-      box-shadow: ${hoverRing.light.green};
-    }
-  `,
-  [Theme.Dark]: css`
-    border-color: ${errorColor[Theme.Dark]};
-
-    &:hover,
-    &:active {
-      border-color: ${errorColor[Theme.Dark]};
-      box-shadow: ${hoverRing.dark.green};
-    }
-  `,
-};
+});
diff --git a/packages/select/src/MenuButton/MenuButton.tsx b/packages/select/src/MenuButton/MenuButton.tsx
index f83be8880e..967734ca03 100644
--- a/packages/select/src/MenuButton/MenuButton.tsx
+++ b/packages/select/src/MenuButton/MenuButton.tsx
@@ -13,9 +13,9 @@ import { mobileSizeSet } from '../styleSets';
 import { MobileMediaQuery, useForwardedRef } from '../utils';
 
 import {
+  getMenuButtonDisabledThemeStyles,
+  getMenuButtonStateStyles,
   menuButtonDeselectedStyles,
-  menuButtonDisabledThemeStyles,
-  menuButtonErrorStyle,
   menuButtonFocusStyle,
   menuButtonModeOverrides,
   menuButtonSizeStyle,
@@ -23,7 +23,6 @@ import {
   menuButtonTextClassName,
   menuButtonTextStyle,
   menuButtonTextWrapperStyle,
-  menuButtonValidStyle,
 } from './MenuButton.styles';
 import { MenuButtonProps } from './MenuButton.types';
 
@@ -75,10 +74,9 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
           menuButtonSizeStyle[size],
           menuButtonFocusStyle[theme],
           {
+            [getMenuButtonStateStyles(theme)[state || State.None]]: !!state,
             [menuButtonDeselectedStyles[theme]]: deselected,
-            [menuButtonErrorStyle[theme]]: state === State.Error,
-            [menuButtonValidStyle[theme]]: state === State.Valid,
-            [menuButtonDisabledThemeStyles[theme]]: disabled,
+            [getMenuButtonDisabledThemeStyles(theme)]: disabled,
             [css`
               letter-spacing: initial;
             `]: size === ButtonSize.XSmall,
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
index 16aa6d39de..3cbfdab800 100644
--- a/packages/select/src/Select/Select.tsx
+++ b/packages/select/src/Select/Select.tsx
@@ -10,6 +10,7 @@ import React, {
 import PropTypes from 'prop-types';
 
 import { css, cx } from '@leafygreen-ui/emotion';
+import { DEFAULT_MESSAGES, FormFieldFeedback } from '@leafygreen-ui/form-field';
 import {
   useEventListener,
   useForwardedRef,
@@ -28,7 +29,6 @@ import ListMenu from '../ListMenu';
 import MenuButton from '../MenuButton';
 import { InternalOption, OptionElement } from '../Option';
 import SelectContext from '../SelectContext';
-import { StateFeedback } from '../StateFeedback';
 import { mobileSizeSet } from '../styleSets';
 import {
   convertToInternalElements,
@@ -63,8 +63,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       allowDeselect = true,
       usePortal = true,
       placeholder = 'Select',
-      errorMessage = 'This input needs your attention',
-      successMessage = 'Success',
+      errorMessage = DEFAULT_MESSAGES.error,
+      successMessage = DEFAULT_MESSAGES.success,
       state = State.None,
       dropdownWidthBasis = DropdownWidthBasis.Trigger,
       baseFontSize = BaseFontSize.Body1,
@@ -613,12 +613,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
               </ListMenu>
             </MenuButton>
           </SelectContext.Provider>
-          <StateFeedback
-            state={state}
+          <FormFieldFeedback
+            disabled={disabled}
             errorMessage={errorMessage}
-            successMessage={successMessage}
             hideFeedback={open}
-            disabled={disabled}
+            size={size}
+            state={state}
+            successMessage={successMessage}
           />
         </div>
       </LeafyGreenProvider>
@@ -643,7 +644,8 @@ Select.propTypes = {
   defaultValue: PropTypes.string,
   onChange: PropTypes.func,
   readOnly: PropTypes.bool,
-  errorMessage: PropTypes.string,
+  errorMessage: PropTypes.node,
+  successMessage: PropTypes.node,
   state: PropTypes.oneOf(Object.values(State)),
   allowDeselect: PropTypes.bool,
   baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
diff --git a/packages/select/src/Select/Select.types.ts b/packages/select/src/Select/Select.types.ts
index 633b3c8494..6e4df59df2 100644
--- a/packages/select/src/Select/Select.types.ts
+++ b/packages/select/src/Select/Select.types.ts
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { ButtonProps } from '@leafygreen-ui/button';
+import { FormFieldState } from '@leafygreen-ui/form-field';
 import {
   DarkModeProps,
   Either,
@@ -18,11 +19,7 @@ export const Size = {
 } as const;
 export type Size = (typeof Size)[keyof typeof Size];
 
-export const State = {
-  Error: 'error',
-  None: 'none',
-  Valid: 'valid',
-} as const;
+export const State = FormFieldState;
 export type State = (typeof State)[keyof typeof State];
 
 export const DropdownWidthBasis = {
@@ -89,15 +86,13 @@ export interface BaseSelectProps
 
   /**
    * Error message rendered when the `state` prop is set to `error`.
-   * @default 'This input needs your attention'
    */
-  errorMessage?: string;
+  errorMessage?: React.ReactNode;
 
   /**
    * Success message rendered when the `state` prop is set to `valid`.
-   * @default 'Success'
    */
-  successMessage?: string;
+  successMessage?: React.ReactNode;
 
   /**
    * Determines whether the component should be rendered in an error state.
diff --git a/packages/select/src/StateFeedback/StateFeedback.styles.ts b/packages/select/src/StateFeedback/StateFeedback.styles.ts
deleted file mode 100644
index e5307bff7d..0000000000
--- a/packages/select/src/StateFeedback/StateFeedback.styles.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { css } from '@leafygreen-ui/emotion';
-import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import {
-  BaseFontSize,
-  spacing,
-  transitionDuration,
-  typeScales,
-} from '@leafygreen-ui/tokens';
-
-import { mobileSizeSet } from '../styleSets';
-import { MobileMediaQuery } from '../utils';
-
-export const containerStyles = css`
-  padding-top: ${spacing[100]}px;
-  display: flex;
-  align-items: center;
-  gap: ${spacing[100]}px;
-`;
-
-export const hideContainerStyle = css`
-  opacity: 0;
-`;
-
-export const errorIconThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: palette.red.base,
-  [Theme.Dark]: palette.red.light1,
-};
-
-export const errorTransitionStyles = css`
-  transition: color ${transitionDuration.faster}ms ease-in-out;
-  transition-delay: ${transitionDuration.faster}ms;
-`;
-
-export const errorTextMobileStyles = css`
-  ${MobileMediaQuery} {
-    font-size: ${mobileSizeSet.description.text}px;
-    line-height: ${mobileSizeSet.description.lineHeight}px;
-  }
-`;
-
-export const validIconThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: palette.green.dark1,
-  [Theme.Dark]: palette.green.base,
-};
-
-export const validMessageThemeStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.green.dark1};
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.green.base};
-  `,
-};
-
-export const validMessageTypeScaleStyles: Record<BaseFontSize, string> = {
-  [BaseFontSize.Body1]: css`
-    font-size: ${typeScales.body1.fontSize}px;
-    line-height: ${typeScales.body1.lineHeight}px;
-  `,
-  [BaseFontSize.Body2]: css`
-    font-size: ${typeScales.body2.fontSize}px;
-    line-height: 20px; // Hardcoding because it does not match body2 lineHeight
-  `,
-};
diff --git a/packages/select/src/StateFeedback/StateFeedback.tsx b/packages/select/src/StateFeedback/StateFeedback.tsx
deleted file mode 100644
index f8b34fd79d..0000000000
--- a/packages/select/src/StateFeedback/StateFeedback.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-
-import { cx } from '@leafygreen-ui/emotion';
-import Icon from '@leafygreen-ui/icon';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { Error, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
-
-import { LGIDS_SELECT } from '../constants';
-import { State } from '../Select/Select.types';
-
-import {
-  containerStyles,
-  errorIconThemeStyle,
-  errorTextMobileStyles,
-  hideContainerStyle,
-  validIconThemeStyle,
-  validMessageThemeStyle,
-  validMessageTypeScaleStyles,
-} from './StateFeedback.styles';
-import { StateFeedbackProps } from './StateFeedback.types';
-
-export const StateFeedback = ({
-  state,
-  errorMessage,
-  successMessage,
-  hideFeedback,
-  disabled,
-}: StateFeedbackProps) => {
-  const { theme } = useDarkMode();
-  const baseFontSize = useUpdatedBaseFontSize();
-
-  const isErrorState = state === State.Error;
-  const isValidState = state === State.Valid;
-  const showStateFeedback = (isErrorState || isValidState) && !disabled;
-
-  const iconProps = {
-    glyph: isErrorState ? 'Warning' : 'Checkmark',
-    fill: isErrorState
-      ? errorIconThemeStyle[theme]
-      : validIconThemeStyle[theme],
-    title: isErrorState ? 'Error' : 'Valid',
-  };
-
-  return (
-    <div
-      className={cx(containerStyles, {
-        [hideContainerStyle]: hideFeedback,
-      })}
-      aria-live="polite"
-      aria-relevant="all"
-    >
-      {showStateFeedback && (
-        <>
-          <Icon
-            glyph={iconProps.glyph}
-            fill={iconProps.fill}
-            title={iconProps.title}
-            aria-hidden
-          />
-          {isErrorState ? (
-            <Error
-              className={errorTextMobileStyles}
-              data-lgid={LGIDS_SELECT.errorMessage}
-            >
-              {errorMessage}
-            </Error>
-          ) : (
-            <div
-              className={cx(
-                validMessageThemeStyle[theme],
-                validMessageTypeScaleStyles[baseFontSize],
-              )}
-            >
-              {successMessage}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
-
-StateFeedback.displayName = 'StateFeedback';
diff --git a/packages/select/src/StateFeedback/StateFeedback.types.ts b/packages/select/src/StateFeedback/StateFeedback.types.ts
deleted file mode 100644
index 7fe351e1c8..0000000000
--- a/packages/select/src/StateFeedback/StateFeedback.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { State } from '../Select/Select.types';
-
-export interface StateFeedbackProps {
-  disabled: boolean;
-  errorMessage: string;
-  hideFeedback: boolean;
-  state: State;
-  successMessage: string;
-}
diff --git a/packages/select/src/StateFeedback/index.ts b/packages/select/src/StateFeedback/index.ts
deleted file mode 100644
index 5bec51dea9..0000000000
--- a/packages/select/src/StateFeedback/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { StateFeedback } from './StateFeedback';
diff --git a/packages/select/src/utils/getTestUtils/getTestUtils.ts b/packages/select/src/utils/getTestUtils/getTestUtils.ts
index af66c0877a..93c05b6177 100644
--- a/packages/select/src/utils/getTestUtils/getTestUtils.ts
+++ b/packages/select/src/utils/getTestUtils/getTestUtils.ts
@@ -1,5 +1,6 @@
 import { getByLgId, queryBySelector } from '@lg-tools/test-harnesses';
 
+import { LGIDS_FORM_FIELD } from '@leafygreen-ui/form-field';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 import { LGIDS_TYPOGRAPHY } from '@leafygreen-ui/typography';
 
@@ -49,7 +50,7 @@ export const getTestUtils = (
    */
   const getErrorMessage = queryBySelector<HTMLElement>(
     element,
-    `[data-lgid=${LGIDS_SELECT.errorMessage}]`,
+    `[data-lgid=${LGIDS_FORM_FIELD.errorMessage}]`,
   );
 
   /**
diff --git a/packages/select/tsconfig.json b/packages/select/tsconfig.json
index 1ea0710258..09d0116646 100644
--- a/packages/select/tsconfig.json
+++ b/packages/select/tsconfig.json
@@ -28,6 +28,9 @@
     {
       "path": "../emotion"
     },
+    {
+      "path": "../form-field"
+    },
     {
       "path": "../hooks"
     },
diff --git a/yarn.lock b/yarn.lock
index a547003125..a798f010f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7432,9 +7432,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001585, caniuse-lite@^1.0.30001587:
-  version "1.0.30001600"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz#93a3ee17a35aa6a9f0c6ef1b2ab49507d1ab9079"
-  integrity sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==
+  version "1.0.30001612"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz#d34248b4ec1f117b70b24ad9ee04c90e0b8a14ae"
+  integrity sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"