diff --git a/examples/solid-ts/src/pages/segment-control.tsx b/examples/solid-ts/src/pages/segment-control.tsx
index a13ec88a2f..aceb7924f7 100644
--- a/examples/solid-ts/src/pages/segment-control.tsx
+++ b/examples/solid-ts/src/pages/segment-control.tsx
@@ -1,7 +1,7 @@
 import * as radio from "@zag-js/radio-group"
 import { radioControls, radioData } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/solid"
-import { For, createMemo, createUniqueId } from "solid-js"
+import { Index, createMemo, createUniqueId } from "solid-js"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
@@ -20,18 +20,17 @@ export default function Page() {
       <main class="segmented-control">
         <div {...api().rootProps}>
           <div {...api().indicatorProps} />
-          <For each={radioData}>
+          <Index each={radioData}>
             {(opt) => (
-              <label data-testid={`radio-${opt.id}`} {...api().getRadioProps({ value: opt.id })}>
-                <span data-testid={`label-${opt.id}`} {...api().getRadioLabelProps({ value: opt.id })}>
-                  {opt.label}
+              <label data-testid={`radio-${opt().id}`} {...api().getItemProps({ value: opt().id })}>
+                <span data-testid={`label-${opt().id}`} {...api().getItemTextProps({ value: opt().id })}>
+                  {opt().label}
                 </span>
-                <input data-testid={`input-${opt.id}`} {...api().getRadioHiddenInputProps({ value: opt.id })} />
+                <input data-testid={`input-${opt().id}`} {...api().getItemHiddenInputProps({ value: opt().id })} />
               </label>
             )}
-          </For>
+          </Index>
         </div>
-
         <button onClick={api().clearValue}>reset</button>
       </main>
 
diff --git a/website/data/components/segmented-control.mdx b/website/data/components/segmented-control.mdx
index 139e4fa780..3a0ebe2e58 100644
--- a/website/data/components/segmented-control.mdx
+++ b/website/data/components/segmented-control.mdx
@@ -148,7 +148,7 @@ attribute added to them to select and style them in the DOM.
 
 ### Indicator
 
-Stle the segmented control Indicator through the `indicator` part.
+Style the segmented control Indicator through the `indicator` part.
 
 ```css
 [data-part="indicator"] {
diff --git a/website/data/snippets/solid/segmented-control/usage.mdx b/website/data/snippets/solid/segmented-control/usage.mdx
index 2ca4b45ffe..bf07f62485 100644
--- a/website/data/snippets/solid/segmented-control/usage.mdx
+++ b/website/data/snippets/solid/segmented-control/usage.mdx
@@ -1,7 +1,7 @@
 ```jsx
 import * as radio from "@zag-js/radio-group"
 import { normalizeProps, useMachine } from "@zag-js/solid"
-import { createMemo, createUniqueId } from "solid-js"
+import { Index, createMemo, createUniqueId } from "solid-js"
 
 const items = [
   { label: "React", value: "react" },
@@ -18,14 +18,18 @@ function Radio() {
   return (
     <div {...api().rootProps}>
       <div {...api().indicatorProps} />
-      {items.map((opt) => (
-        <label key={opt.value} {...api().getItemProps({ value: opt.value })}>
-          <span {...api().getItemTextProps({ value: opt.value })}>
-            {opt.label}
-          </span>
-          <input {...api().getItemHiddenInputProps({ value: opt.value })} />
-        </label>
-      ))}
+      <Index each={items}>
+        {(item) => (
+          <label {...api().getItemProps({ value: item().value })}>
+            <span {...api().getItemTextProps({ value: item().value })}>
+              {item().label}
+            </span>
+            <input
+              {...api().getItemHiddenInputProps({ value: item().value })}
+            />
+          </label>
+        )}
+      </Index>
     </div>
   )
 }