diff --git a/packages/react/src/components/MultiSelect/MultiSelectGroup/MultiSelectGroup.story.tsx b/packages/react/src/components/MultiSelect/MultiSelectGroup/MultiSelectGroup.story.tsx
new file mode 100644
index 000000000..03b31db59
--- /dev/null
+++ b/packages/react/src/components/MultiSelect/MultiSelectGroup/MultiSelectGroup.story.tsx
@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from '@storybook/react'
+import styled from 'styled-components'
+import MultiSelect, { MultiSelectGroup } from '..'
+
+const StyledMultiSelectGroup = styled(MultiSelectGroup)`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+`
+
+export default {
+  title: 'MultiSelect/MultiSelectGroup',
+  component: MultiSelectGroup,
+  args: {
+    name: '',
+    label: '',
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    variant: 'default',
+  },
+  argTypes: {
+    name: {
+      control: {
+        type: 'text',
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    readonly: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    invalid: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  render: function Render({
+    name,
+    label,
+    onChange,
+    disabled,
+    readonly,
+    invalid,
+    selected,
+    className,
+  }) {
+    return (
+      <StyledMultiSelectGroup
+        {...{
+          name,
+          label,
+          onChange,
+          disabled,
+          readonly,
+          invalid,
+          selected,
+        }}
+      >
+        {[1, 2, 3, 4].map((idx) => (
+          <MultiSelect
+            value={`選択肢${idx}`}
+            variant="default"
+            key={idx}
+            className={className}
+          >
+            選択肢{idx}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+} as Meta<typeof MultiSelectGroup>
+
+export const Basic: StoryObj<typeof MultiSelectGroup> = {
+  args: {
+    selected: ['選択肢1', '選択肢3'],
+  },
+}
+
+export const Invalid: StoryObj<typeof MultiSelectGroup> = {
+  args: {
+    name: 'defaultName',
+    invalid: true,
+  },
+}
diff --git a/packages/react/src/components/MultiSelect/MultiSelectGroup/__snapshots__/MultiSelectGroup.story.storyshot b/packages/react/src/components/MultiSelect/MultiSelectGroup/__snapshots__/MultiSelectGroup.story.storyshot
new file mode 100644
index 000000000..06a00e568
--- /dev/null
+++ b/packages/react/src/components/MultiSelect/MultiSelectGroup/__snapshots__/MultiSelectGroup.story.storyshot
@@ -0,0 +1,508 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots MultiSelect/MultiSelectGroup Basic 1`] = `
+.c1 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-hover);
+}
+
+.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:active[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-press);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label=""
+    className="c0"
+    data-testid="SelectGroup"
+  >
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={true}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢1"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        1
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢2"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        2
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={true}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢3"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        3
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢4"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        4
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Storyshots MultiSelect/MultiSelectGroup Invalid 1`] = `
+.c1 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-hover);
+}
+
+.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:active[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-press);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox'][aria-disabled='false'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  -webkit-transition: 0.2s box-shadow;
+  transition: 0.2s box-shadow;
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label=""
+    className="c0"
+    data-testid="SelectGroup"
+  >
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢1"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        1
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢2"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        2
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢3"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        3
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢4"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        4
+      </div>
+    </label>
+  </div>
+</div>
+`;
diff --git a/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot b/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot
index 6c91eb26a..afd08541f 100644
--- a/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot
@@ -133,7 +133,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     >
       <input
         aria-invalid={false}
-        checked={true}
+        checked={false}
         className="c2"
         disabled={false}
         name=""
@@ -193,7 +193,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
     >
       <input
         aria-invalid={false}
-        checked={true}
+        checked={false}
         className="c2"
         disabled={false}
         name=""
@@ -251,262 +251,6 @@ exports[`Storyshots MultiSelect Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots MultiSelect Invalid 1`] = `
-.c1 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  gap: 4px;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c2[type='checkbox'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  background-color: var(--charcoal-text3);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c2[type='checkbox']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled='false'] {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-hover);
-}
-
-.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:active[aria-disabled='false'] {
-  background-color: var(--charcoal-text3-press);
-}
-
-.c2[type='checkbox']:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox'][aria-disabled='false'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3 {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 999999px;
-  color: var(--charcoal-text5);
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-}
-
-.c0 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-label=""
-    className="c0"
-    data-testid="SelectGroup"
-  >
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢1"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        1
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢2"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        2
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢3"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        3
-      </div>
-    </label>
-    <label
-      aria-disabled={false}
-      className="c1"
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="c2"
-        disabled={false}
-        name="defaultName"
-        onChange={[Function]}
-        type="checkbox"
-        value="選択肢4"
-      />
-      <div
-        aria-hidden={true}
-        className="c3"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-      <div
-        className="c4"
-      >
-        選択肢
-        4
-      </div>
-    </label>
-  </div>
-</div>
-`;
-
 exports[`Storyshots MultiSelect Overlay 1`] = `
 .c1 {
   display: grid;
@@ -647,7 +391,7 @@ exports[`Storyshots MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -677,7 +421,7 @@ exports[`Storyshots MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -707,7 +451,7 @@ exports[`Storyshots MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -737,7 +481,7 @@ exports[`Storyshots MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -898,7 +642,7 @@ exports[`Storyshots MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -928,7 +672,7 @@ exports[`Storyshots MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -958,7 +702,7 @@ exports[`Storyshots MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -988,7 +732,7 @@ exports[`Storyshots MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
diff --git a/packages/react/src/components/MultiSelect/index.story.tsx b/packages/react/src/components/MultiSelect/index.story.tsx
index 3de025dc1..0b22d154b 100644
--- a/packages/react/src/components/MultiSelect/index.story.tsx
+++ b/packages/react/src/components/MultiSelect/index.story.tsx
@@ -1,42 +1,18 @@
 import { useState } from 'react'
-import { Story } from '../../_lib/compat'
 import styled from 'styled-components'
 import { MultiSelectGroup, default as MultiSelect } from '.'
+import { Meta, StoryObj } from '@storybook/react'
+
+const StyledMultiSelectGroup = styled(MultiSelectGroup)`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+`
 
 export default {
   title: 'MultiSelect',
   component: MultiSelect,
   argTypes: {
-    name: {
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-    },
-    selected: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    readonly: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    invalid: {
-      control: {
-        type: 'boolean',
-      },
-    },
     variant: {
       control: {
         type: 'inline-radio',
@@ -44,173 +20,55 @@ export default {
       },
     },
   },
-}
-
-type Props = {
-  name: string
-  label: string
-  selected: boolean
-  onChange: (selected: string[]) => void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  variant?: 'default' | 'overlay'
-  className?: string
-}
-
-const StyledMultiSelectGroup = styled(MultiSelectGroup)`
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-`
-
-const Template: Story<Props> = ({
-  name,
-  label,
-  selected,
-  onChange,
-  disabled,
-  readonly,
-  invalid,
-  variant,
-  className,
-}) => {
-  return (
-    <StyledMultiSelectGroup
-      {...{
-        name,
-        label,
-        onChange,
-        disabled,
-        readonly,
-        invalid,
-      }}
-      selected={selected ? ['選択肢1', '選択肢3'] : []}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  name: '',
-  label: '',
-  selected: true,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
-  // eslint-disable-next-line no-console
-  onChange: (selected) => console.log(selected),
-}
-
-type PlaygroundProps = {
-  name: string
-  label: string
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  className?: string
-  variant?: 'default' | 'overlay'
-}
-
-export const Playground: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
+  args: {
+    variant: 'default',
+  },
+  render: function Render(args) {
+    return (
+      <StyledMultiSelectGroup
+        name=""
+        label=""
+        onChange={() => {
+          // eslint-disable-next-line no-console
+          console.log('click')
+        }}
+        selected={[]}
+      >
+        {[1, 2, 3, 4].map((idx) => (
+          <MultiSelect {...args} value={`選択肢${idx}`} key={idx}>
+            選択肢{idx}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+} as Meta<typeof MultiSelect>
 
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={props.variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Playground.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
-}
+export const Default: StoryObj<typeof MultiSelect> = {}
 
-export const Invalid: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
+export const Playground: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const [selected, setSelected] = useState<string[]>([])
 
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-      invalid
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={props.variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Invalid.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-  variant: 'default',
+    return (
+      <StyledMultiSelectGroup
+        name=""
+        label=""
+        onChange={setSelected}
+        selected={selected}
+      >
+        {[1, 2, 3, 4].map((idx) => (
+          <MultiSelect {...args} value={`選択肢${idx}`} key={idx}>
+            選択肢{idx}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }
 
-export const Overlay: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
-
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant="overlay"
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Overlay.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
+export const Overlay: StoryObj<typeof MultiSelect> = {
+  args: {
+    variant: 'overlay',
+  },
 }