diff --git a/packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx b/packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx
index fb5258b..34339ce 100644
--- a/packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx
@@ -1,9 +1,32 @@
 import * as React from 'react';
-import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol';
-import {RenderOptions} from '@tesseract-design/web-option-react';
 import clsx from 'clsx';
 import styles from './style.module.css';
 
+const filterOptions = (children: React.ReactNode): React.ReactNode => {
+  const childrenArray = Array.isArray(children) ? children : [children];
+  return childrenArray.reduce(
+    (optionChildren, child) => {
+      if (!(typeof child === 'object' && child)) {
+        return optionChildren;
+      }
+      if (child.type === 'option') {
+        return [
+          ...optionChildren,
+          child,
+        ];
+      }
+      if (child.type === 'optgroup') {
+        return [
+          ...optionChildren,
+          ...filterOptions(child.props.children) as unknown[],
+        ];
+      }
+      return optionChildren;
+    },
+    [],
+  ) as React.ReactNode;
+};
+
 /*
  * Caveat for slider:
  *
@@ -179,6 +202,10 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
     return null;
   }
 
+  const childrenValues = children
+    ? filterOptions(children)
+    : undefined;
+
   return (
     <>
       {
@@ -221,7 +248,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
               min={minValue}
               max={maxValue}
               type="range"
-              list={children ? tickMarkId : undefined}
+              list={childrenValues ? tickMarkId : undefined}
               className={clsx(
                 styles.slider,
                 'w-full h-full bg-inherit block text-primary ring-secondary/50 rounded-full',
@@ -229,11 +256,11 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
                 'active:text-tertiary active:ring-tertiary/50',
               )}
             />
-            {Array.isArray(children) && (
+            {Array.isArray(childrenValues) && (
               <div className="select-none">
                 <div className="relative w-full h-full">
                   {
-                    children
+                    childrenValues
                       .filter((c) => {
                         const value = Number(c.props.value);
                         return minValue <= value && value <= maxValue;
@@ -255,7 +282,9 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
                               <div
                                 className="bg-current"
                               />
-                              <div>
+                              <div
+                                className={c.props.className}
+                              >
                                 {c.props.children}
                               </div>
                             </div>
diff --git a/packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx b/packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx
index 79b59b6..af5819b 100644
--- a/packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx
@@ -28,19 +28,21 @@ const NumberPage: NextPage = () => {
             min={-100}
             max={100}
           >
-            <option value={-100}>
-              Lowest
-            </option>
-            <option value={25}>
-              日本語
-            </option>
-            <option value={50} />
-            <option value={100}>
-              Highest
-            </option>
-            <option value={200}>
-              Out of bounds
-            </option>
+            <optgroup label="Test Values">
+              <option value={-100}>
+                Lowest
+              </option>
+              <option value={25}>
+                日本語
+              </option>
+              <option value={50} />
+              <option value={100}>
+                Highest
+              </option>
+              <option value={200}>
+                Out of bounds
+              </option>
+            </optgroup>
           </TesseractNumber.Slider>
         </Subsection>
         <Subsection title="Vertical">
@@ -49,19 +51,21 @@ const NumberPage: NextPage = () => {
             max={100}
             orient="vertical"
           >
-            <option value={-100}>
-              Lowest
-            </option>
-            <option value={25}>
-              日本語
-            </option>
-            <option value={50} />
-            <option value={100}>
-              Highest
-            </option>
-            <option value={200}>
-              Out of bounds
-            </option>
+            <optgroup label="Test Values">
+              <option value={-100}>
+                Lowest
+              </option>
+              <option value={25}>
+                日本語
+              </option>
+              <option value={50} />
+              <option value={100}>
+                Highest
+              </option>
+              <option value={200}>
+                Out of bounds
+              </option>
+            </optgroup>
           </TesseractNumber.Slider>
           A
         </Subsection>
diff --git a/packages/web-kitchensink-reactnext/src/pages/categories/option/index.tsx b/packages/web-kitchensink-reactnext/src/pages/categories/option/index.tsx
index fca8afd..b235994 100644
--- a/packages/web-kitchensink-reactnext/src/pages/categories/option/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/pages/categories/option/index.tsx
@@ -2,52 +2,28 @@ import { NextPage } from 'next';
 import * as Option from '@tesseract-design/web-option-react';
 import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol';
 import { DefaultLayout } from '@/components/DefaultLayout';
+import {ReactNode} from 'react';
 
 type Props = {
-  options: SelectControlBase.SelectOption[],
+  options: ReactNode,
 }
 
 const OptionPage: NextPage<Props> = ({
-  options = [
-    {
-      label: 'Fruits',
-      children: [
-        {
-          label: 'Mango',
-          value: 'mango',
-        },
-        {
-          label: 'Strawberry',
-          value: 'strawberry',
-        },
-        {
-          label: 'Avocado',
-          value: 'avocado',
-        },
-        {
-          label: 'Grapes',
-          value: 'grapes',
-        },
-      ],
-    },
-    {
-      label: 'Non-fruits',
-      children: [
-        {
-          label: 'Chocolate',
-          value: 'chocolate',
-        },
-        {
-          label: 'Milk',
-          value: 'milk',
-        },
-        {
-          label: 'Coffee',
-          value: 'coffee',
-        },
-      ],
-    },
-  ],
+  options = (
+    <>
+      <optgroup label="Fruits">
+        <option value="mango">Mango</option>
+        <option value="strawberry">Strawberry</option>
+        <option value="avocado">Avocado</option>
+        <option value="grapes">Grapes</option>
+      </optgroup>
+      <optgroup label="Non-fruits">
+        <option value="chocolate">Chocolate</option>
+        <option value="milk">Milk</option>
+        <option value="coffee">Coffee</option>
+      </optgroup>
+    </>
+  )
 }) => {
   return (
     <DefaultLayout
@@ -73,9 +49,7 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         block
                       >
-                        <option>
-                          Hello
-                        </option>
+                        {options}
                       </Option.DropdownSelect>
                     </div>
                     <div>
@@ -85,16 +59,18 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -102,8 +78,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -111,8 +88,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -121,8 +99,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -130,8 +109,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -140,8 +120,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                   </div>
                   <form>
@@ -222,8 +203,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -233,8 +215,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -242,8 +225,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -252,8 +236,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -262,8 +247,9 @@ const OptionPage: NextPage<Props> = ({
                         label="Select"
                         hint="Type anything here&hellip;"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -273,8 +259,9 @@ const OptionPage: NextPage<Props> = ({
                         size="large"
                         label="Select"
                         hint="Type anything here&hellip;"
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -283,8 +270,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                     <div>
                       <Option.DropdownSelect
@@ -294,8 +282,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.DropdownSelect>
                     </div>
                   </div>
                 </div>
@@ -322,8 +311,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -333,8 +323,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -342,8 +333,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -352,8 +344,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -362,8 +355,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -373,8 +367,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -383,8 +378,9 @@ const OptionPage: NextPage<Props> = ({
                         indicator="A"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -394,8 +390,9 @@ const OptionPage: NextPage<Props> = ({
                         indicator="A"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                   </div>
                 </div>
@@ -412,8 +409,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -424,8 +422,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -434,8 +433,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -445,8 +445,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -456,8 +457,9 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -468,8 +470,9 @@ const OptionPage: NextPage<Props> = ({
                         label="MultilineTextInput"
                         hint="Type anything here&hellip;"
                         indicator="A"
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -479,8 +482,9 @@ const OptionPage: NextPage<Props> = ({
                         indicator="A"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -491,8 +495,9 @@ const OptionPage: NextPage<Props> = ({
                         indicator="A"
                         block
                         disabled
-                        options={options}
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                   </div>
                 </div>
@@ -510,9 +515,10 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -522,9 +528,10 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -532,9 +539,10 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -543,9 +551,10 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -554,9 +563,10 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -566,9 +576,10 @@ const OptionPage: NextPage<Props> = ({
                         hint="Type anything here&hellip;"
                         indicator="A"
                         block
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -577,9 +588,10 @@ const OptionPage: NextPage<Props> = ({
                         indicator="A"
                         block
                         disabled
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                     <div>
                       <Option.MenuSelect
@@ -589,9 +601,10 @@ const OptionPage: NextPage<Props> = ({
                         indicator="A"
                         block
                         disabled
-                        options={options}
                         multiple
-                      />
+                      >
+                        {options}
+                      </Option.MenuSelect>
                     </div>
                   </div>
                 </div>