diff --git a/src/components/Select/Select.stories.module.css b/src/components/Select/Select.stories.module.css
deleted file mode 100644
index d1b172e51..000000000
--- a/src/components/Select/Select.stories.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*------------------------------------*\
-    # SELECT STORIES
-\*------------------------------------*/
-
-.function-children__button {
-  padding: var(--eds-size-2);
-
-  border: var(--eds-theme-border-width) solid
-    var(--eds-theme-color-border-neutral-default);
-  border-radius: 0.375rem;
-
-  cursor: pointer;
-
-  background-color: var(--eds-theme-color-background-neutral-default);
-}
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 5b14e88b8..c744a328f 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -5,17 +5,10 @@ import React from 'react';
 import type { OptionsAlignType, VariantType } from './Select';
 import { Select } from './Select';
 import Icon from '../Icon';
-import styles from './Select.stories.module.css';
 
 export default {
   title: 'Components/Select',
   component: Select,
-  subcomponents: {
-    'Select.Button': Select.Button,
-    'Select.Label': Select.Label,
-    'Select.Options': Select.Options,
-    'Select.Option': Select.Option,
-  },
   parameters: {
     badges: ['1.2'],
     layout: 'centered',
@@ -113,10 +106,7 @@ function InteractiveExampleUsingFunctionChildren() {
               as={React.Fragment}
             >
               {() => (
-                <button
-                  aria-expanded={open}
-                  className={styles['function-children__button']}
-                >
+                <button aria-expanded={open} className="fpo">
                   {selectedOption?.label || 'Select'}
                   <Icon
                     className="ml-4"
@@ -447,3 +437,61 @@ export const WithSelectedOption: StoryObj<typeof Select> = {
     />
   ),
 };
+
+/**
+ * You can implement a `Select.Button` with a render prop. This exposes several useful values to
+ * control the appearance of the rendered button. The render prop case is "Headless", in that it has
+ * no styling by default.
+ */
+export const UncontrolledHeadless: StoryObj = {
+  render: () => (
+    <Select
+      aria-label="some label"
+      data-testid="dropdown"
+      defaultValue={exampleOptions[0]}
+      name="select"
+    >
+      <Select.Button>
+        {({ value, open, disabled }) => (
+          <button className="fpo">{value.label} </button>
+        )}
+      </Select.Button>
+      <Select.Options>
+        {exampleOptions.map((option) => (
+          <Select.Option key={option.key} value={option}>
+            {option.label}
+          </Select.Option>
+        ))}
+      </Select.Options>
+    </Select>
+  ),
+};
+
+/**
+ * You can use `Select.ButtonWrapper` to borrow the existing style used for controlled `Select` components.
+ */
+export const StyledUncontrolled: StoryObj = {
+  render: () => (
+    <Select
+      aria-label="some label"
+      data-testid="dropdown"
+      defaultValue={exampleOptions[0]}
+      name="select"
+    >
+      <Select.Button>
+        {({ value, open, disabled }) => (
+          <Select.ButtonWrapper isOpen={open}>
+            {value.label}
+          </Select.ButtonWrapper>
+        )}
+      </Select.Button>
+      <Select.Options>
+        {exampleOptions.map((option) => (
+          <Select.Option key={option.key} value={option}>
+            {option.label}
+          </Select.Option>
+        ))}
+      </Select.Options>
+    </Select>
+  ),
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 7b07b5ca9..a30f6e18f 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -26,8 +26,6 @@ type PropsWithRenderProp<RenderPropArg> = {
   as?: ElementType;
 };
 
-let showNameWarning = true;
-
 type SelectProps = ExtractProps<typeof Listbox> &
   PopoverOptions & {
     /**
@@ -67,6 +65,51 @@ type SelectProps = ExtractProps<typeof Listbox> &
     variant?: VariantType;
   };
 
+type SelectOption = {
+  label: string;
+  [k: string]: string | number | boolean;
+};
+
+type SelectOptionProps = {
+  value: SelectOption;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode | RenderProp<OptionRenderProps>;
+};
+
+type OptionRenderProps = {
+  active: boolean;
+  disabled: boolean;
+  selected: boolean;
+};
+
+type SelectButtonProps = {
+  /**
+   * Optional className for additional styling.
+   */
+  className?: string;
+  /**
+   * Text placed inside the button to describe the field.
+   */
+  children?: ReactNode;
+  /**
+   * Icon override for component. Default is 'expand-more'
+   */
+  icon?: Extract<IconName, 'expand-more'>;
+  /**
+   * Indicates state of the select, used to style the button.
+   */
+  isOpen?: boolean;
+};
+
+type SelectContextType = PopoverContext & {
+  compact?: boolean;
+  optionsAlign?: OptionsAlignType;
+  optionsClassName?: string;
+};
+
+let showNameWarning = true;
+
 function childrenHaveLabelComponent(children?: ReactNode): boolean {
   const childrenArray = React.Children.toArray(children);
   return childrenArray.some((child) => {
@@ -86,12 +129,6 @@ function childrenHaveLabelComponent(children?: ReactNode): boolean {
   });
 }
 
-type SelectContextType = PopoverContext & {
-  compact?: boolean;
-  optionsAlign?: OptionsAlignType;
-  optionsClassName?: string;
-};
-
 const SelectContext = React.createContext<SelectContextType>({});
 
 /**
@@ -99,6 +136,8 @@ const SelectContext = React.createContext<SelectContextType>({});
  *
  * A popover that reveals or hides a list of options from which to select
  *
+ * Supports controlled and uncontrolled behavior, using a render prop in the latter case.
+ *
  */
 export function Select(props: SelectProps) {
   const {
@@ -112,8 +151,6 @@ export function Select(props: SelectProps) {
     optionsClassName,
     placement = 'bottom-start',
     strategy,
-    // Defaulting to null is required to explicitly state that this component is controlled, and prevents warning from Headless
-    value = null,
     variant,
     ...other
   } = props;
@@ -163,7 +200,6 @@ export function Select(props: SelectProps) {
     // passed directly to this component have a corresponding DOM element to receive them.
     // Otherwise we get an error.
     as: 'div' as const,
-    value,
     ...other,
   };
 
@@ -212,8 +248,15 @@ const SelectLabel = (props: { className?: string; children: ReactNode }) => {
   );
 };
 
-const SelectTrigger = function (
-  props: PropsWithRenderProp<{ disabled: boolean; open: boolean }>,
+/**
+ * The trigger for the select component, which is usually a form of `Button` or some targetable/clickable component
+ */
+const SelectButton = function (
+  props: PropsWithRenderProp<{
+    disabled: boolean;
+    open: boolean;
+    value: SelectOption;
+  }>,
 ) {
   const { children, className, ...other } = props;
   const { compact, setReferenceElement } = useContext(SelectContext);
@@ -222,6 +265,7 @@ const SelectTrigger = function (
     className,
     compact && styles['select-button--compact'],
   );
+
   return (
     <Listbox.Button
       // Render as a fragment instead of the default element. We're rendering our own element in
@@ -231,13 +275,18 @@ const SelectTrigger = function (
       ref={setReferenceElement}
       {...other}
     >
-      {typeof children === 'function'
-        ? children
-        : ({ open }) => (
-            <SelectButton className={componentClassName} isOpen={open}>
-              {children}
-            </SelectButton>
-          )}
+      {(renderProps) => {
+        return typeof children === 'function' ? (
+          children(renderProps)
+        ) : (
+          <SelectButtonWrapper
+            className={componentClassName}
+            isOpen={renderProps.open}
+          >
+            {children}
+          </SelectButtonWrapper>
+        );
+      }}
     </Listbox.Button>
   );
 };
@@ -272,27 +321,12 @@ const SelectOptions = function (props: PropsWithRenderProp<{ open: boolean }>) {
   return null;
 };
 
-type SelectOptionProps = {
-  value: any;
-  disabled?: boolean;
-  className?: string;
-  children?:
-    | ReactNode
-    | RenderProp<{ active: boolean; disabled: boolean; selected: boolean }>;
-};
-
 /**
  * Represents one of the available options for selection
  */
 const SelectOption = function (props: SelectOptionProps) {
   const { children, className, ...other } = props;
 
-  type RenderProps = {
-    active: boolean;
-    disabled: boolean;
-    selected: boolean;
-  };
-
   return (
     <Listbox.Option
       // Render as a fragment instead of the default <li>. We're rendering our own <li> in the
@@ -303,7 +337,7 @@ const SelectOption = function (props: SelectOptionProps) {
     >
       {typeof children === 'function'
         ? children
-        : ({ active, disabled, selected }: RenderProps) => {
+        : ({ active, disabled, selected }: OptionRenderProps) => {
             return (
               <PopoverListItem
                 active={active}
@@ -321,29 +355,10 @@ const SelectOption = function (props: SelectOptionProps) {
   );
 };
 
-type SelectButtonProps = {
-  /**
-   * Optional className for additional styling.
-   */
-  className?: string;
-  /**
-   * Text placed inside the button to describe the field.
-   */
-  children?: ReactNode;
-  /**
-   * Icon override for component. Default is 'expand-more'
-   */
-  icon?: Extract<IconName, 'expand-more'>;
-  /**
-   * Indicates state of the select, used to style the button.
-   */
-  isOpen?: boolean;
-};
-
 /**
- * The component functioning as a trigger, which also shows the current selection
+ * The component functioning as a styling for the trigger, selection arrow, and space to show the current value
  */
-export const SelectButton = React.forwardRef<
+export const SelectButtonWrapper = React.forwardRef<
   HTMLButtonElement,
   SelectButtonProps
 >(({ children, className, icon = 'expand-more', isOpen, ...other }, ref) => {
@@ -367,7 +382,8 @@ export const SelectButton = React.forwardRef<
   );
 });
 
-Select.Button = SelectTrigger;
+Select.Button = SelectButton;
+Select.ButtonWrapper = SelectButtonWrapper;
 Select.Label = SelectLabel;
 Select.Option = SelectOption;
 Select.Options = SelectOptions;
diff --git a/src/components/Select/__snapshots__/Select.test.tsx.snap b/src/components/Select/__snapshots__/Select.test.tsx.snap
index 5e43a99ea..452e741cf 100644
--- a/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -156,6 +156,63 @@ exports[`<Select /> NoVisibleLabel story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Select /> StyledUncontrolled story renders snapshot 1`] = `
+<div
+  class="select"
+  data-headlessui-state="open"
+  data-testid="dropdown"
+>
+  <button
+    aria-controls="headlessui-listbox-options-:r1c:"
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    class="select-button"
+    data-headlessui-state="open"
+    id="headlessui-listbox-button-:r1b:"
+    type="button"
+  >
+    <span>
+      Dogs
+    </span>
+    <svg
+      aria-hidden="true"
+      class="icon select-button__icon select-button__icon--reversed"
+      fill="currentColor"
+      height="1.25rem"
+      style="--icon-size: 1.25rem;"
+      viewBox="0 0 24 24"
+      width="1.25rem"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`<Select /> UncontrolledHeadless story renders snapshot 1`] = `
+<div
+  class="select"
+  data-headlessui-state="open"
+  data-testid="dropdown"
+>
+  <button
+    aria-controls="headlessui-listbox-options-:r17:"
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    class="fpo"
+    data-headlessui-state="open"
+    id="headlessui-listbox-button-:r16:"
+    type="button"
+  >
+    Dogs
+     
+  </button>
+</div>
+`;
+
 exports[`<Select /> UsingChildrenProp story renders snapshot 1`] = `
 <div
   class="select w-60"
@@ -215,7 +272,7 @@ exports[`<Select /> UsingFunctionChildrenProp story renders snapshot 1`] = `
     aria-controls="headlessui-listbox-options-:rs:"
     aria-expanded="true"
     aria-haspopup="listbox"
-    class="function-children__button"
+    class="fpo"
     data-headlessui-state="open"
     id="headlessui-listbox-button-:rr:"
     type="button"