diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
index 4d389392..5ae13bf8 100644
--- a/spec/__snapshots__/Storyshots.test.js.snap
+++ b/spec/__snapshots__/Storyshots.test.js.snap
@@ -10316,7 +10316,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Checkbox 1`] =
     >
       <span
         className="css-1f43avz-a11yText-A11yText"
-        id="react-select-14-live-region"
+        id="react-select-15-live-region"
       />
       <span
         aria-atomic="false"
@@ -10334,13 +10334,13 @@ exports[`Storyshots Components/Selects/Single Custom Option With Checkbox 1`] =
         >
           <div
             className=" css-858797-placeholder"
-            id="react-select-14-placeholder"
+            id="react-select-15-placeholder"
           >
             Select...
           </div>
           <input
             aria-autocomplete="list"
-            aria-describedby="react-select-14-placeholder"
+            aria-describedby="react-select-15-placeholder"
             aria-expanded={false}
             aria-haspopup={true}
             aria-readonly={true}
@@ -10411,7 +10411,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Description 1`]
     >
       <span
         className="css-1f43avz-a11yText-A11yText"
-        id="react-select-13-live-region"
+        id="react-select-14-live-region"
       />
       <span
         aria-atomic="false"
@@ -10429,13 +10429,13 @@ exports[`Storyshots Components/Selects/Single Custom Option With Description 1`]
         >
           <div
             className=" css-858797-placeholder"
-            id="react-select-13-placeholder"
+            id="react-select-14-placeholder"
           >
             Select...
           </div>
           <input
             aria-autocomplete="list"
-            aria-describedby="react-select-13-placeholder"
+            aria-describedby="react-select-14-placeholder"
             aria-expanded={false}
             aria-haspopup={true}
             aria-readonly={true}
@@ -10506,7 +10506,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Indeterminate C
     >
       <span
         className="css-1f43avz-a11yText-A11yText"
-        id="react-select-15-live-region"
+        id="react-select-16-live-region"
       />
       <span
         aria-atomic="false"
@@ -10524,13 +10524,13 @@ exports[`Storyshots Components/Selects/Single Custom Option With Indeterminate C
         >
           <div
             className=" css-858797-placeholder"
-            id="react-select-15-placeholder"
+            id="react-select-16-placeholder"
           >
             Select...
           </div>
           <input
             aria-autocomplete="list"
-            aria-describedby="react-select-15-placeholder"
+            aria-describedby="react-select-16-placeholder"
             aria-expanded={false}
             aria-haspopup={true}
             aria-readonly={true}
@@ -10601,7 +10601,7 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
     >
       <span
         className="css-1f43avz-a11yText-A11yText"
-        id="react-select-16-live-region"
+        id="react-select-17-live-region"
       />
       <span
         aria-atomic="false"
@@ -10619,13 +10619,13 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
         >
           <div
             className=" css-858797-placeholder"
-            id="react-select-16-placeholder"
+            id="react-select-17-placeholder"
           >
             Select...
           </div>
           <input
             aria-autocomplete="list"
-            aria-describedby="react-select-16-placeholder"
+            aria-describedby="react-select-17-placeholder"
             aria-expanded={false}
             aria-haspopup={true}
             aria-readonly={true}
@@ -10768,6 +10768,101 @@ exports[`Storyshots Components/Selects/Single Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Selects/Single Grouped Options 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="FormGroup"
+  >
+    <label
+      className="InputLabel"
+      htmlFor="grouped-options-select"
+    >
+      Grouped options
+    </label>
+    <div
+      className="SingleSelect css-b62m3t-container"
+      onKeyDown={[Function]}
+    >
+      <span
+        className="css-1f43avz-a11yText-A11yText"
+        id="react-select-13-live-region"
+      />
+      <span
+        aria-atomic="false"
+        aria-live="polite"
+        aria-relevant="additions text"
+        className="css-1f43avz-a11yText-A11yText"
+      />
+      <div
+        className=" css-cijnja-control"
+        onMouseDown={[Function]}
+        onTouchEnd={[Function]}
+      >
+        <div
+          className=" css-319lph-ValueContainer"
+        >
+          <div
+            className=" css-858797-placeholder"
+            id="react-select-13-placeholder"
+          >
+            Select...
+          </div>
+          <input
+            aria-autocomplete="list"
+            aria-describedby="react-select-13-placeholder"
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-readonly={true}
+            className="css-mohuvp-dummyInput-DummyInput"
+            disabled={false}
+            id="grouped-options-select"
+            inputMode="none"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            role="combobox"
+            tabIndex={0}
+            value=""
+          />
+        </div>
+        <div
+          className=" css-1hb7zxy-IndicatorsContainer"
+        >
+          <span
+            className=" css-43ykx9-indicatorSeparator"
+          />
+          <div
+            aria-hidden="true"
+            className=" css-7sl878-indicatorContainer"
+            onMouseDown={[Function]}
+            onTouchEnd={[Function]}
+          >
+            <svg
+              aria-hidden="true"
+              className="css-tj5bde-Svg"
+              focusable="false"
+              height={20}
+              viewBox="0 0 20 20"
+              width={20}
+            >
+              <path
+                d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/Selects/Single In Modal 1`] = `
 <div
   style={
diff --git a/src/Select/SingleSelect.stories.jsx b/src/Select/SingleSelect.stories.jsx
index 692f7a74..785d9e32 100644
--- a/src/Select/SingleSelect.stories.jsx
+++ b/src/Select/SingleSelect.stories.jsx
@@ -28,12 +28,10 @@ export default {
 };
 
 const options = [
-  { label: 'White', value: 1 },
-  { label: 'Black / African American', value: 2 },
-  { label: 'American Indian / Alaska Native', value: 3 },
-  { label: 'Asian', value: 4 },
-  { label: 'Native Hawaiian / Pacific Islander', value: 5 },
-  { label: 'Hispanic / Latinx', value: 6 },
+  { label: '1-on-1 interview', value: 1 },
+  { label: 'Focus group', value: 2 },
+  { label: 'Multi-day study', value: 3 },
+  { label: 'Unmoderated task', value: 4 },
 ];
 
 export const Default = () => (
@@ -112,6 +110,34 @@ export const InModal = () => (
   </Modal>
   );
 
+export const GroupedOptions = () => {
+  const groupedOptions = [
+    {
+      label: 'Study type',
+      options,
+    },
+    {
+      label: 'Audience type',
+      options: [
+        { label: 'Consumers', value: 5 },
+        { label: 'Professionals', value: 6 },
+      ],
+    },
+  ];
+  return (
+    <FormGroup
+      label="Grouped options"
+      labelHtmlFor="grouped-options-select"
+    >
+      <SingleSelect
+        inputId="grouped-options-select"
+        options={groupedOptions}
+        onChange={onChange}
+      />
+    </FormGroup>
+  );
+};
+
 export const CustomOptionWithDescription = () => {
   const optionsWithDescriptions = [
     {