diff --git a/packages/react/src/components/Switch/__snapshots__/index.story.storyshot b/packages/react/src/components/Switch/__snapshots__/index.story.storyshot
index 6001f4a5d..c03644a94 100644
--- a/packages/react/src/components/Switch/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Switch/__snapshots__/index.story.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Switch Labelled 1`] = `
+exports[`Storyshots Switch Basic 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -22,11 +22,143 @@ exports[`Storyshots Switch Labelled 1`] = `
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c2 {
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--charcoal-text2);
-  margin-left: 4px;
+.c1 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
+  -webkit-transition-property: background-color,box-shadow;
+  transition-property: background-color,box-shadow;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  cursor: inherit;
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+}
+
+.c1:hover {
+  background-color: var(--charcoal-text4-hover);
+}
+
+.c1:active {
+  background-color: var(--charcoal-text4-press);
+}
+
+.c1:focus {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1::after {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+  border-radius: 1024px;
+  background-color: var(--charcoal-text5);
+}
+
+.c1::after:hover {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.c1::after:active {
+  background-color: var(--charcoal-text5-press);
+}
+
+.c1:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c1:checked:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c1:checked:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c1:checked::after {
+  -webkit-transform: translateX(12px);
+  -ms-transform: translateX(12px);
+  transform: translateX(12px);
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+}
+
+<div
+  data-dark={false}
+>
+  <div>
+    <label
+      className="c0"
+    >
+      <input
+        aria-label="label"
+        checked={false}
+        className="c1"
+        disabled={false}
+        name="name"
+        onChange={[Function]}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        role="switch"
+        type="checkbox"
+      />
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Switch Checked 1`] = `
+.c0 {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  outline: 0;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c0:active > input {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c1 {
@@ -117,11 +249,11 @@ exports[`Storyshots Switch Labelled 1`] = `
 >
   <div>
     <label
-      aria-disabled={false}
       className="c0"
     >
       <input
-        checked={false}
+        aria-label="label"
+        checked={true}
         className="c1"
         disabled={false}
         name="name"
@@ -141,17 +273,12 @@ exports[`Storyshots Switch Labelled 1`] = `
         role="switch"
         type="checkbox"
       />
-      <div
-        className="c2"
-      >
-        選択する
-      </div>
     </label>
   </div>
 </div>
 `;
 
-exports[`Storyshots Switch Playground 1`] = `
+exports[`Storyshots Switch Disabled 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -268,12 +395,13 @@ exports[`Storyshots Switch Playground 1`] = `
 >
   <div>
     <label
+      aria-disabled={true}
       className="c0"
     >
       <input
         checked={false}
         className="c1"
-        disabled={false}
+        disabled={true}
         name="name"
         onChange={[Function]}
         onClick={[Function]}
@@ -294,14 +422,14 @@ exports[`Storyshots Switch Playground 1`] = `
       <div
         className="c2"
       >
-        選択する
+        Label
       </div>
     </label>
   </div>
 </div>
 `;
 
-exports[`Storyshots Switch Unlabelled 1`] = `
+exports[`Storyshots Switch Labelled 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -323,6 +451,13 @@ exports[`Storyshots Switch Unlabelled 1`] = `
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c2 {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  margin-left: 4px;
+}
+
 .c1 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -411,11 +546,9 @@ exports[`Storyshots Switch Unlabelled 1`] = `
 >
   <div>
     <label
-      aria-disabled={false}
       className="c0"
     >
       <input
-        aria-label="label"
         checked={false}
         className="c1"
         disabled={false}
@@ -436,6 +569,11 @@ exports[`Storyshots Switch Unlabelled 1`] = `
         role="switch"
         type="checkbox"
       />
+      <div
+        className="c2"
+      >
+        Label
+      </div>
     </label>
   </div>
 </div>
diff --git a/packages/react/src/components/Switch/index.story.tsx b/packages/react/src/components/Switch/index.story.tsx
index d980b143a..ac5b5c3d5 100644
--- a/packages/react/src/components/Switch/index.story.tsx
+++ b/packages/react/src/components/Switch/index.story.tsx
@@ -1,62 +1,86 @@
-import { action } from '@storybook/addon-actions'
 import { useState } from 'react'
-import { Story } from '../../_lib/compat'
 import Switch from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Switch',
   component: Switch,
-}
+  args: {
+    name: 'name',
+    label: 'label',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof Switch>
 
-interface Props {
-  checked: boolean
-  disabled: boolean
+export const Basic: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div>
+        <Switch
+          {...args}
+          name="name"
+          onChange={(v) => {
+            setChecked(v)
+          }}
+          checked={args.checked ?? checked}
+        />
+      </div>
+    )
+  },
 }
 
-export const Playground: Story<Props> = (props: Props) => {
-  const [checked, setChecked] = useState(false)
-  return (
-    <div>
-      <Switch
-        {...props}
-        name="name"
-        onChange={(v) => {
-          setChecked(v)
-          action('onChange')
-        }}
-        checked={checked}
-      >
-        選択する
-      </Switch>
-    </div>
-  )
+export const Checked: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(true)
+    return (
+      <div>
+        <Switch
+          {...args}
+          name="name"
+          onChange={(v) => {
+            setChecked(v)
+          }}
+          checked={args.checked ?? checked}
+        />
+      </div>
+    )
+  },
 }
 
-export const Labelled: Story<Props> = (props: Props) => (
-  <div>
-    <Switch {...props} name="name" onChange={action('onChange')}>
-      選択する
-    </Switch>
-  </div>
-)
-
-Labelled.args = {
-  checked: false,
-  disabled: false,
+export const Labelled: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div>
+        <Switch
+          {...args}
+          checked={args.checked ?? checked}
+          onChange={setChecked}
+        >
+          Label
+        </Switch>
+      </div>
+    )
+  },
 }
 
-export const Unlabelled: Story<Props> = (props: Props) => (
-  <div>
-    <Switch
-      {...props}
-      name="name"
-      label="label"
-      onChange={action('onChange')}
-    />
-  </div>
-)
-
-Unlabelled.args = {
-  checked: false,
-  disabled: false,
+export const Disabled: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div>
+        <Switch
+          {...args}
+          checked={args.checked ?? checked}
+          onChange={setChecked}
+          disabled
+        >
+          Label
+        </Switch>
+      </div>
+    )
+  },
 }