diff --git a/src/components/ui/__stories__/Checkbox.stories.tsx b/src/components/ui/__stories__/Checkbox.stories.tsx
index 75f7c49145b..d045270c920 100644
--- a/src/components/ui/__stories__/Checkbox.stories.tsx
+++ b/src/components/ui/__stories__/Checkbox.stories.tsx
@@ -1,59 +1,109 @@
 import type { Meta, StoryObj } from "@storybook/nextjs"
 
-import CheckboxComponent, { type CheckboxProps } from "../checkbox"
+import Checkbox, { type CheckboxProps } from "../checkbox"
 import { HStack, VStack } from "../flex"
 
 const meta = {
-  title: "Atoms / Form / Checkbox",
-  component: CheckboxComponent,
-} satisfies Meta<typeof CheckboxComponent>
+  title: "UI / Primitives / Checkbox",
+  component: Checkbox,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    docs: {
+      description: {
+        component:
+          "Single binary toggle built on Radix Checkbox. Supports `checked`, `disabled`, `aria-invalid` for error styling, and tri-state via `checked='indeterminate'`. Pair with a `<label>` so clicks on the label toggle the control.",
+      },
+    },
+  },
+} satisfies Meta<typeof Checkbox>
 
 export default meta
 
-const checkboxDataSet: (CheckboxProps & { label: string })[] = [
-  {
-    id: "default",
-    value: "default",
-    label: "default",
-  },
-  {
-    id: "checked",
-    value: "checked",
-    label: "checked",
-    checked: true,
-  },
-  {
-    id: "disabled",
-    value: "disabled",
-    label: "disabled",
-    disabled: true,
-  },
-  {
-    id: "disabled-checked",
-    value: "disabled-checked",
-    label: "disabled-checked",
-    disabled: true,
-    checked: true,
+type Story = StoryObj<typeof meta>
+
+const LabeledCheckbox = ({
+  label,
+  ...props
+}: CheckboxProps & { label: string }) => (
+  <HStack asChild>
+    <label>
+      <Checkbox {...props} />
+      {label}
+    </label>
+  </HStack>
+)
+
+export const Default: Story = {
+  render: () => <LabeledCheckbox id="default" label="Subscribe to updates" />,
+}
+
+export const Checked: Story = {
+  render: () => (
+    <LabeledCheckbox id="checked" label="Already subscribed" defaultChecked />
+  ),
+}
+
+export const Indeterminate: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`checked='indeterminate'` represents a mixed state, typically used as a parent controlling a group where some (but not all) children are checked.",
+      },
+    },
   },
-  {
-    id: "invalid",
-    value: "invalid",
-    label: "invalid",
-    "aria-invalid": true,
+  render: () => (
+    <LabeledCheckbox
+      id="indeterminate"
+      label="Some items selected"
+      checked="indeterminate"
+    />
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <VStack className="items-start gap-3">
+      <LabeledCheckbox id="disabled" label="Disabled" disabled />
+      <LabeledCheckbox
+        id="disabled-checked"
+        label="Disabled and checked"
+        disabled
+        defaultChecked
+      />
+    </VStack>
+  ),
+}
+
+export const Invalid: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Apply `aria-invalid` to surface error styling defined by `commonControlClasses`.",
+      },
+    },
   },
-]
+  render: () => (
+    <LabeledCheckbox id="invalid" label="Required field" aria-invalid="true" />
+  ),
+}
 
-export const Checkbox: StoryObj<typeof meta> = {
+export const AsGroup: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Multiple checkboxes form an unordered group. For mutually exclusive options, use `RadioGroup` instead.",
+      },
+    },
+  },
   render: () => (
-    <VStack className="items-start gap-4">
-      {checkboxDataSet.map(({ label, ...props }) => (
-        <HStack key={props.id} asChild>
-          <label>
-            <CheckboxComponent {...props} />
-            {label}
-          </label>
-        </HStack>
-      ))}
+    <VStack className="items-start gap-3">
+      <LabeledCheckbox id="group-eth" label="Ethereum" defaultChecked />
+      <LabeledCheckbox id="group-arb" label="Arbitrum" />
+      <LabeledCheckbox id="group-base" label="Base" defaultChecked />
+      <LabeledCheckbox id="group-op" label="OP Mainnet" />
     </VStack>
   ),
 }
diff --git a/src/components/ui/__stories__/Input.stories.tsx b/src/components/ui/__stories__/Input.stories.tsx
index 4fa955589bb..3d22a4fcf1a 100644
--- a/src/components/ui/__stories__/Input.stories.tsx
+++ b/src/components/ui/__stories__/Input.stories.tsx
@@ -4,34 +4,94 @@ import { VStack } from "../flex"
 import Input from "../input"
 
 const meta = {
-  title: "Atoms / Form / Input",
+  title: "UI / Primitives / Input",
   component: Input,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Single-line text input. Variants: `size: md|sm` and `hasError: true|false`. Pair with a sibling helper text element when validation guidance is needed.",
+      },
+    },
+  },
 } satisfies Meta<typeof Input>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Sizes: Story = {
-  args: {
-    placeholder: "Search",
-  },
+export const Default: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  args: { placeholder: "Search" },
   render: (args) => (
-    <VStack className="w-[154px]">
+    <div className="w-[258px]">
       <Input {...args} />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  args: { placeholder: "Search" },
+  render: (args) => (
+    <VStack className="w-[258px] gap-4">
+      <Input {...args} size="md" />
       <Input {...args} size="sm" />
     </VStack>
   ),
 }
 
-export const ElementVariations: Story = {
-  args: {
-    placeholder: "input text",
-  },
+export const HasError: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  args: { placeholder: "Required" },
+  render: (args) => (
+    <VStack className="w-[258px] gap-4">
+      <Input {...args} hasError={false} />
+      <Input {...args} hasError />
+    </VStack>
+  ),
+}
+
+export const Disabled: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  args: { placeholder: "Cannot edit" },
   render: (args) => (
     <VStack className="w-[258px] gap-4">
-      <Input {...args} autoFocus />
       <Input {...args} disabled />
+      <Input {...args} disabled defaultValue="Pre-filled" />
+    </VStack>
+  ),
+}
+
+export const AutoFocus: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  args: { placeholder: "Focused on mount", autoFocus: true },
+  render: (args) => (
+    <div className="w-[258px]">
+      <Input {...args} />
+    </div>
+  ),
+}
+
+export const WithHelperText: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    docs: {
+      description: {
+        story:
+          "Helper text and error text are rendered as sibling elements. The error tone pairs with `hasError`.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="w-[258px] gap-6">
+      <div className="space-y-1">
+        <Input placeholder="username" />
+        <p className="text-xs text-body-medium">3 to 16 characters.</p>
+      </div>
+      <div className="space-y-1">
+        <Input hasError placeholder="username" />
+        <p className="text-xs text-error">Username is already taken.</p>
+      </div>
     </VStack>
   ),
 }
diff --git a/src/components/ui/__stories__/RadioGroup.stories.tsx b/src/components/ui/__stories__/RadioGroup.stories.tsx
deleted file mode 100644
index f682ee66326..00000000000
--- a/src/components/ui/__stories__/RadioGroup.stories.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs"
-
-import { HStack } from "../flex"
-import {
-  RadioGroup,
-  RadioGroupItem,
-  type RadioGroupItemProps,
-} from "../radio-group"
-
-const meta = {
-  title: "Atoms / Form / Radio",
-  component: RadioGroup,
-} satisfies Meta<typeof RadioGroup>
-
-export default meta
-
-const DEFAULT_CHECKED = "checked"
-
-const radioSet: Array<RadioGroupItemProps & { label: string }> = [
-  {
-    id: "default",
-    value: "default",
-    label: "default",
-  },
-  {
-    id: DEFAULT_CHECKED,
-    value: DEFAULT_CHECKED,
-    label: DEFAULT_CHECKED,
-  },
-  {
-    id: "disabled",
-    value: "disabled",
-    disabled: true,
-    label: "disabled",
-  },
-  {
-    id: "disabled-checked",
-    value: "disabled-checked",
-    disabled: true,
-    checked: true,
-    label: "disabled-checked",
-  },
-  {
-    id: "invalid",
-    value: "invalid",
-    "aria-invalid": true,
-    label: "invalid",
-  },
-]
-
-export const Radio: StoryObj<typeof meta> = {
-  args: {
-    defaultValue: DEFAULT_CHECKED,
-    className: "gap-4",
-  },
-  render: (args) => (
-    <RadioGroup {...args}>
-      {radioSet.map((radio) => (
-        <HStack key={radio.id} asChild>
-          <label>
-            <RadioGroupItem {...radio} />
-            {radio.label}
-          </label>
-        </HStack>
-      ))}
-    </RadioGroup>
-  ),
-}
diff --git a/src/components/ui/__stories__/Switch.stories.tsx b/src/components/ui/__stories__/Switch.stories.tsx
index d75b07aa3cc..9aa07c301ab 100644
--- a/src/components/ui/__stories__/Switch.stories.tsx
+++ b/src/components/ui/__stories__/Switch.stories.tsx
@@ -1,29 +1,118 @@
-import * as React from "react"
-import { Meta, type StoryObj } from "@storybook/nextjs"
+import type { Meta, StoryObj } from "@storybook/nextjs"
 
-import SwitchComponent from "../switch"
+import { HStack, VStack } from "../flex"
+import Switch from "../switch"
 
 const meta = {
-  title: "Atoms / Form / Switch",
-  component: SwitchComponent,
-} satisfies Meta<typeof SwitchComponent>
+  title: "UI / Primitives / Switch",
+  component: Switch,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    docs: {
+      description: {
+        component:
+          "Binary on/off control built on Radix Switch. Shares styling tokens with `Checkbox` and `RadioGroup` via `commonControlClasses`, including `aria-invalid` error styling. For multi-state choices, use `Checkbox` (indeterminate) or `RadioGroup`.",
+      },
+    },
+  },
+} satisfies Meta<typeof Switch>
 
 export default meta
 
-export const Switch: StoryObj = {
+type Story = StoryObj<typeof meta>
+
+export const Off: Story = {
+  render: () => <Switch id="off" />,
+}
+
+export const On: Story = {
+  render: () => <Switch id="on" defaultChecked />,
+}
+
+export const Disabled: Story = {
   render: () => (
-    <div className="grid grid-cols-2 items-center gap-x-1 lg:grid-cols-4">
-      <span>default:</span>
-      <SwitchComponent id="default" />
+    <HStack className="gap-6">
+      <Switch id="disabled-off" disabled />
+      <Switch id="disabled-on" disabled defaultChecked />
+    </HStack>
+  ),
+}
 
-      <span>checked:</span>
-      <SwitchComponent id="checked" checked />
+export const Invalid: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Apply `aria-invalid` for error styling shared with `Checkbox` and `RadioGroup`.",
+      },
+    },
+  },
+  render: () => <Switch id="invalid" aria-invalid="true" />,
+}
 
-      <span>disabled:</span>
-      <SwitchComponent id="disabled" disabled />
+export const WithLabel: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Wrap `Switch` in a `<label>` so clicks on the label text toggle the control. The `htmlFor` attribute is not needed when nesting the control inside the label.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="items-start gap-3">
+      <HStack asChild>
+        <label>
+          <Switch id="notif-email" />
+          Email notifications
+        </label>
+      </HStack>
+      <HStack asChild>
+        <label>
+          <Switch id="notif-push" defaultChecked />
+          Push notifications
+        </label>
+      </HStack>
+    </VStack>
+  ),
+}
 
-      <span>disabled and checked:</span>
-      <SwitchComponent id="disabled-checked" disabled defaultChecked />
-    </div>
+export const SettingsList: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Realistic settings panel grouping multiple labeled switches. Title and helper text are rendered as siblings.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="w-[320px] items-stretch gap-4">
+      <h3 className="font-semibold">Privacy</h3>
+      <VStack className="gap-3">
+        <HStack className="justify-between" asChild>
+          <label>
+            <span>
+              <span className="block">Analytics</span>
+              <span className="block text-xs text-body-medium">
+                Anonymous usage data
+              </span>
+            </span>
+            <Switch id="settings-analytics" defaultChecked />
+          </label>
+        </HStack>
+        <HStack className="justify-between" asChild>
+          <label>
+            <span>
+              <span className="block">Marketing</span>
+              <span className="block text-xs text-body-medium">
+                Product update emails
+              </span>
+            </span>
+            <Switch id="settings-marketing" />
+          </label>
+        </HStack>
+      </VStack>
+    </VStack>
   ),
 }
diff --git a/src/components/ui/__stories__/Textarea.stories.tsx b/src/components/ui/__stories__/Textarea.stories.tsx
new file mode 100644
index 00000000000..83f187a5931
--- /dev/null
+++ b/src/components/ui/__stories__/Textarea.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/nextjs"
+
+import { VStack } from "../flex"
+import { Textarea } from "../textarea"
+
+const meta = {
+  title: "UI / Primitives / Textarea",
+  component: Textarea,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    docs: {
+      description: {
+        component:
+          "Multi-line text input. Mirrors `Input` variants: `size: md|sm` and `hasError: true|false`. Pair with a sibling helper text element to communicate validation or guidance.",
+      },
+    },
+  },
+} satisfies Meta<typeof Textarea>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: "Tell us what you think",
+  },
+  render: (args) => (
+    <div className="w-[320px]">
+      <Textarea {...args} />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  args: {
+    placeholder: "Type here",
+  },
+  render: (args) => (
+    <VStack className="w-[320px] gap-4">
+      <Textarea {...args} size="md" />
+      <Textarea {...args} size="sm" />
+    </VStack>
+  ),
+}
+
+export const HasError: Story = {
+  args: {
+    placeholder: "Type here",
+  },
+  render: (args) => (
+    <VStack className="w-[320px] gap-4">
+      <Textarea {...args} hasError={false} />
+      <Textarea {...args} hasError />
+    </VStack>
+  ),
+}
+
+export const WithoutPlaceholder: Story = {
+  render: () => (
+    <div className="w-[320px]">
+      <Textarea defaultValue="Pre-filled content. No placeholder needed when a default value is provided." />
+    </div>
+  ),
+}
+
+export const WithHelperText: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`Textarea` does not bundle helper text; pair it with a sibling element. Use a neutral tone for guidance and the error tone when paired with `hasError`.",
+      },
+    },
+  },
+  render: () => (
+    <VStack className="w-[320px] gap-6">
+      <div className="space-y-1">
+        <Textarea placeholder="Describe the issue" />
+        <p className="text-xs text-body-medium">
+          Include steps to reproduce. Markdown is supported.
+        </p>
+      </div>
+      <div className="space-y-1">
+        <Textarea hasError placeholder="Required" />
+        <p className="text-xs text-error">This field is required.</p>
+      </div>
+    </VStack>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[320px]">
+      <Textarea
+        disabled
+        defaultValue="Disabled textarea content cannot be edited."
+      />
+    </div>
+  ),
+}