diff --git a/docs/components/example/index.json b/docs/components/example/index.json
index 47f702cd1..622c143fd 100644
--- a/docs/components/example/index.json
+++ b/docs/components/example/index.json
@@ -113,8 +113,8 @@
   "segmented-control-long-label-fixed-width": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabelFixedWidth() {\n  return (\n    <SegmentedControl defaultValue=\"price\">\n      <Segment value=\"price\">가격 높은 순</Segment>\n      <Segment value=\"discount\">할인율 높은 순</Segment>\n      <Segment value=\"popularity\">인기 많은 순</Segment>\n    </SegmentedControl>\n  );\n}",
   "segmented-control-long-label": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabel() {\n  return (\n    <SegmentedControl defaultValue=\"price\">\n      <Segment value=\"price\">가격 높은 순</Segment>\n      <Segment value=\"discount\">할인율 높은 순</Segment>\n      <Segment value=\"popularity\">인기 많은 순</Segment>\n    </SegmentedControl>\n  );\n}",
   "segmented-control-preview": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n  return (\n    <SegmentedControl defaultValue=\"Hot\">\n      <Segment value=\"Hot\">Hot</Segment>\n      <Segment value=\"New\">New</Segment>\n    </SegmentedControl>\n  );\n}",
-  "select-box-check-preview": "import { SelectBoxCheck } from \"seed-design/ui/select-box-check\";\n\nexport default function SelectBoxRadioGroupPreview() {\n  return <SelectBoxCheck label=\"Culpa\" />;\n}",
-  "select-box-radio-group-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box-radio-group\";\n\nexport default function SelectBoxRadioGroupPreview() {\n  return (\n    <SelectBoxRadioGroup className=\"flex flex-col gap-2 w-full\">\n      <SelectBoxRadio value=\"culpa\" label=\"Culpa\" />\n      <SelectBoxRadio\n        value=\"voluptate\"\n        label=\"Voluptate\"\n        description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n      />\n      <SelectBoxRadio value=\"eiusmod\" label=\"Eiusmod\" />\n    </SelectBoxRadioGroup>\n  );\n}",
+  "select-box-check-group-preview": "import { SelectBoxCheck, SelectBoxCheckGroup } from \"@/registry/ui/select-box-check-group\";\n\nexport default function SelectBoxCheckGroupPreview() {\n  return (\n    <SelectBoxCheckGroup>\n      <SelectBoxCheck value=\"culpa\" label=\"Culpa\" defaultChecked />\n      <SelectBoxCheck\n        value=\"voluptate\"\n        label=\"Voluptate\"\n        description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n      />\n      <SelectBoxCheck value=\"eiusmod\" label=\"Eiusmod\" />\n    </SelectBoxCheckGroup>\n  );\n}",
+  "select-box-radio-group-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box-radio-group\";\n\nexport default function SelectBoxRadioGroupPreview() {\n  return (\n    <SelectBoxRadioGroup className=\"flex flex-col gap-2 w-full\" defaultValue=\"culpa\">\n      <SelectBoxRadio value=\"culpa\" label=\"Culpa\" />\n      <SelectBoxRadio\n        value=\"voluptate\"\n        label=\"Voluptate\"\n        description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n      />\n      <SelectBoxRadio value=\"eiusmod\" label=\"Eiusmod\" />\n    </SelectBoxRadioGroup>\n  );\n}",
   "skeleton-wave-activity": "import type { ActivityComponentType } from \"@stackflow/react/future\";\nimport type * as React from \"react\";\n\nimport Layout from \"@/components/stackflow/ActivityLayout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\nimport {\n  useSkeletonDuration,\n  useIsRealLoading,\n  useSkeletonLoading,\n  useSkeletonTimingFunction,\n  useSkeletonInitTransitionDuration,\n  useSkeletonGradient,\n} from \"@/stores/skeleton\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    SkeletonWave: unknown;\n  }\n}\n\nconst Fallback = () => {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      <Skeleton width=\"100%\" height=\"300px\" borderRadius=\"square\" />\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"4px\" }}>\n        <Skeleton width=\"50px\" height=\"50px\" borderRadius=\"circle\" />\n        <Skeleton width=\"100%\" height=\"20px\" borderRadius=\"rounded\" />\n        <Skeleton width=\"200px\" height=\"20px\" borderRadius=\"rounded\" />\n      </div>\n    </div>\n  );\n};\n\nconst SkeletonWaveActivity: ActivityComponentType<\"SkeletonWave\"> = () => {\n  const isLoading = useSkeletonLoading();\n  const isRealLoading = useIsRealLoading();\n  const animationDuration = useSkeletonDuration();\n  const animationTiming = useSkeletonTimingFunction();\n  const initTransitionDuration = useSkeletonInitTransitionDuration();\n  const gradient = useSkeletonGradient();\n\n  return (\n    <Layout>\n      <div\n        style={\n          {\n            padding: \"16px\",\n            \"--skeleton-gradient\": gradient,\n            \"--skeleton-init-transition-duration\": initTransitionDuration,\n            \"--skeleton-animation-duration\": animationDuration,\n            \"--skeleton-animation-timing-function\": animationTiming,\n          } as React.CSSProperties\n        }\n      >\n        {isLoading ? isRealLoading && <Fallback /> : <div>content</div>}\n      </div>\n    </Layout>\n  );\n};\n\nexport default SkeletonWaveActivity;\n\nSkeletonWaveActivity.displayName = \"SkeletonWaveActivity\";",
   "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n      <Switch disabled />\n      <Switch checked disabled />\n    </div>\n  );\n}",
   "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <Switch size=\"medium\" checked={isChecked} onCheckedChange={setIsChecked} />\n  );\n}",
diff --git a/docs/components/example/select-box-check-group-preview.tsx b/docs/components/example/select-box-check-group-preview.tsx
new file mode 100644
index 000000000..c6ce210a4
--- /dev/null
+++ b/docs/components/example/select-box-check-group-preview.tsx
@@ -0,0 +1,15 @@
+import { SelectBoxCheck, SelectBoxCheckGroup } from "@/registry/ui/select-box-check-group";
+
+export default function SelectBoxCheckGroupPreview() {
+  return (
+    <SelectBoxCheckGroup>
+      <SelectBoxCheck value="culpa" label="Culpa" defaultChecked />
+      <SelectBoxCheck
+        value="voluptate"
+        label="Voluptate"
+        description="Elit cupidatat dolore fugiat enim veniam culpa."
+      />
+      <SelectBoxCheck value="eiusmod" label="Eiusmod" />
+    </SelectBoxCheckGroup>
+  );
+}
diff --git a/docs/components/example/select-box-check-preview.tsx b/docs/components/example/select-box-check-preview.tsx
deleted file mode 100644
index ad09e3f0d..000000000
--- a/docs/components/example/select-box-check-preview.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SelectBoxCheck } from "seed-design/ui/select-box-check";
-
-export default function SelectBoxRadioGroupPreview() {
-  return <SelectBoxCheck label="Culpa" />;
-}
diff --git a/docs/components/example/select-box-radio-group-preview.tsx b/docs/components/example/select-box-radio-group-preview.tsx
index 570e80d9c..40faeef73 100644
--- a/docs/components/example/select-box-radio-group-preview.tsx
+++ b/docs/components/example/select-box-radio-group-preview.tsx
@@ -2,7 +2,7 @@ import { SelectBoxRadioGroup, SelectBoxRadio } from "seed-design/ui/select-box-r
 
 export default function SelectBoxRadioGroupPreview() {
   return (
-    <SelectBoxRadioGroup className="flex flex-col gap-2 w-full">
+    <SelectBoxRadioGroup className="flex flex-col gap-2 w-full" defaultValue="culpa">
       <SelectBoxRadio value="culpa" label="Culpa" />
       <SelectBoxRadio
         value="voluptate"
diff --git a/docs/content/docs/react/components/select-boxes/select-box-check-group.mdx b/docs/content/docs/react/components/select-boxes/select-box-check-group.mdx
new file mode 100644
index 000000000..3b36bb8b2
--- /dev/null
+++ b/docs/content/docs/react/components/select-boxes/select-box-check-group.mdx
@@ -0,0 +1,22 @@
+---
+title: Select Box Check Group
+---
+
+<ComponentExample name="select-box-check-group-preview" />
+
+## 설치
+
+<Installation name="select-box-check-group" />
+
+## Props
+
+### `SelectBoxCheckGroup`
+
+`SelectBoxCheckGroup`은 받는 prop이 없어요. `SelectBoxCheck` 간 간격을 설정하는 목적으로만 사용돼요.
+
+### `SelectBoxCheck`
+
+<AutoTypeTable
+  path="./registry/ui/select-box-check-group.tsx"
+  name="SelectBoxCheckProps"
+/>
diff --git a/docs/content/docs/react/components/select-boxes/select-box-check.mdx b/docs/content/docs/react/components/select-boxes/select-box-check.mdx
deleted file mode 100644
index b881d97db..000000000
--- a/docs/content/docs/react/components/select-boxes/select-box-check.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Select Box Check
----
-
-<ComponentExample name="select-box-check-preview" />
-
-## 설치
-
-<Installation name="select-box-check" />
-
-## Props
-
-<AutoTypeTable
-  path="./registry/ui/select-box-check.tsx"
-  name="SelectBoxCheckProps"
-/>
diff --git a/docs/public/__registry__/ui/index.json b/docs/public/__registry__/ui/index.json
index 664836e9e..6bf29c2f4 100644
--- a/docs/public/__registry__/ui/index.json
+++ b/docs/public/__registry__/ui/index.json
@@ -140,13 +140,13 @@
     ]
   },
   {
-    "name": "select-box-check",
+    "name": "select-box-check-group",
     "dependencies": [
       "@seed-design/react-checkbox",
       "@daangn/react-monochrome-icon"
     ],
     "files": [
-      "ui:select-box-check.tsx"
+      "ui:select-box-check-group.tsx"
     ]
   },
   {
diff --git a/docs/public/__registry__/ui/select-box-check-group.json b/docs/public/__registry__/ui/select-box-check-group.json
new file mode 100644
index 000000000..ecd7d0bc8
--- /dev/null
+++ b/docs/public/__registry__/ui/select-box-check-group.json
@@ -0,0 +1,14 @@
+{
+  "name": "select-box-check-group",
+  "dependencies": [
+    "@seed-design/react-checkbox",
+    "@daangn/react-monochrome-icon"
+  ],
+  "registries": [
+    {
+      "name": "select-box-check-group.tsx",
+      "type": "ui",
+      "content": "\"use client\";\n\nimport {\n  type UseCheckboxProps,\n  useCheckbox,\n} from \"@seed-design/react-checkbox\";\nimport {\n  checkbox,\n  type CheckboxVariantProps,\n} from \"@seed-design/recipe/checkbox\";\nimport {\n  type SelectBoxVariantProps,\n  selectBox,\n} from \"@seed-design/recipe/selectBox\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/checkbox.css\";\nimport \"@seed-design/stylesheet/selectBox.css\";\nimport {\n  IconCheckmarkFatFill,\n  IconMinusFatFill,\n} from \"@daangn/react-monochrome-icon\";\n\nexport const SelectBoxCheckGroup = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...otherProps }, ref) => {\n  const classNames = selectBox();\n\n  return (\n    <div ref={ref} {...otherProps} className={clsx(classNames.root, className)}>\n      {children}\n    </div>\n  );\n});\nSelectBoxCheckGroup.displayName = \"SelectBoxCheckGroup\";\n\nexport interface SelectBoxCheckProps\n  extends SelectBoxVariantProps,\n    Pick<CheckboxVariantProps, \"indeterminate\">,\n    Omit<UseCheckboxProps, \"disabled\" | \"invalid\"> {\n  label: string;\n  description?: string;\n}\n\ntype ReactSelectBoxCheck = Assign<\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, \"children\">,\n  SelectBoxCheckProps\n>;\n\nexport const SelectBoxCheck = React.forwardRef<\n  HTMLInputElement,\n  ReactSelectBoxCheck\n>(({ className, label, description, indeterminate, ...otherProps }, ref) => {\n  const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n    useCheckbox(otherProps);\n\n  const checkClassNames = checkbox({\n    size: \"large\",\n    variant: \"square\",\n    indeterminate,\n  });\n  const selectBoxClassNames = selectBox();\n\n  return (\n    <label\n      className={clsx(selectBoxClassNames.box, className)}\n      {...rootProps}\n      {...restProps}\n    >\n      <input ref={ref} {...hiddenInputProps} style={visuallyHidden} />\n      <div className={selectBoxClassNames.content}>\n        <span className={selectBoxClassNames.label}>{label}</span>\n        {description && (\n          <span className={selectBoxClassNames.description}>{description}</span>\n        )}\n      </div>\n      <div\n        {...controlProps}\n        className={clsx(selectBoxClassNames.control, checkClassNames.control)}\n      >\n        {!indeterminate ? (\n          <IconCheckmarkFatFill\n            aria-hidden\n            {...stateProps}\n            className={checkClassNames.icon}\n          />\n        ) : (\n          <IconMinusFatFill\n            aria-hidden\n            {...stateProps}\n            className={checkClassNames.icon}\n          />\n        )}\n      </div>\n    </label>\n  );\n});\nSelectBoxCheck.displayName = \"SelectBoxCheck\";\n"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/__registry__/ui/select-box-check.json b/docs/public/__registry__/ui/select-box-check.json
deleted file mode 100644
index d4d1011b7..000000000
--- a/docs/public/__registry__/ui/select-box-check.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "name": "select-box-check",
-  "dependencies": [
-    "@seed-design/react-checkbox",
-    "@daangn/react-monochrome-icon"
-  ],
-  "registries": [
-    {
-      "name": "select-box-check.tsx",
-      "type": "ui",
-      "content": "\"use client\";\n\nimport {\n  type UseCheckboxProps,\n  useCheckbox,\n} from \"@seed-design/react-checkbox\";\nimport {\n  checkbox,\n  type CheckboxVariantProps,\n} from \"@seed-design/recipe/checkbox\";\nimport {\n  type SelectBoxVariantProps,\n  selectBox,\n} from \"@seed-design/recipe/selectBox\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/checkbox.css\";\nimport \"@seed-design/stylesheet/selectBox.css\";\nimport {\n  IconCheckmarkFatFill,\n  IconMinusFatFill,\n} from \"@daangn/react-monochrome-icon\";\n\nexport interface SelectBoxCheckProps\n  extends SelectBoxVariantProps,\n    Pick<CheckboxVariantProps, \"indeterminate\">,\n    Omit<UseCheckboxProps, \"disabled\" | \"invalid\"> {\n  label: string;\n  description?: string;\n}\n\ntype ReactSelectBoxCheck = Assign<\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, \"children\">,\n  SelectBoxCheckProps\n>;\n\nexport const SelectBoxCheck = React.forwardRef<\n  HTMLInputElement,\n  ReactSelectBoxCheck\n>(({ className, label, description, indeterminate, ...otherProps }, ref) => {\n  const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n    useCheckbox(otherProps);\n\n  const checkClassNames = checkbox({\n    size: \"large\",\n    variant: \"square\",\n    indeterminate,\n  });\n  const selectBoxClassNames = selectBox();\n\n  return (\n    <label\n      className={clsx(selectBoxClassNames.root, className)}\n      {...rootProps}\n      {...restProps}\n    >\n      <input ref={ref} {...hiddenInputProps} style={visuallyHidden} />\n      <div className={selectBoxClassNames.content}>\n        <span className={selectBoxClassNames.label}>{label}</span>\n        {description && (\n          <span className={selectBoxClassNames.description}>{description}</span>\n        )}\n      </div>\n      <div\n        {...controlProps}\n        className={clsx(selectBoxClassNames.control, checkClassNames.control)}\n      >\n        {!indeterminate ? (\n          <IconCheckmarkFatFill\n            aria-hidden\n            {...stateProps}\n            className={checkClassNames.icon}\n          />\n        ) : (\n          <IconMinusFatFill\n            aria-hidden\n            {...stateProps}\n            className={checkClassNames.icon}\n          />\n        )}\n      </div>\n    </label>\n  );\n});\nSelectBoxCheck.displayName = \"SelectBoxCheck\";\n"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/docs/public/__registry__/ui/select-box-radio-group.json b/docs/public/__registry__/ui/select-box-radio-group.json
index 4110e9246..a01769ce3 100644
--- a/docs/public/__registry__/ui/select-box-radio-group.json
+++ b/docs/public/__registry__/ui/select-box-radio-group.json
@@ -7,7 +7,7 @@
     {
       "name": "select-box-radio-group.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport {\n  useRadioGroup,\n  type UseRadioGroupProps,\n  type RadioItemProps,\n} from \"@seed-design/react-radio-group\";\nimport { radio } from \"@seed-design/recipe/radio\";\nimport {\n  type SelectBoxVariantProps,\n  selectBox,\n} from \"@seed-design/recipe/selectBox\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/radio.css\";\nimport \"@seed-design/stylesheet/selectBox.css\";\n\nconst SelectBoxRadioGroupContext = React.createContext<{\n  api: ReturnType<typeof useRadioGroup>;\n} | null>(null);\n\nconst useSelectBoxContext = () => {\n  const context = React.useContext(SelectBoxRadioGroupContext);\n  if (!context)\n    throw new Error(\n      \"SelectBoxRadio cannot be rendered outside the SelectBoxRadioGroup\",\n    );\n\n  return context;\n};\n\nexport interface SelectBoxRadioGroupProps\n  extends Omit<UseRadioGroupProps, \"disabled\"> {}\n\ntype ReactSelectBoxRadioGroupProps = Assign<\n  React.HTMLAttributes<HTMLDivElement>,\n  SelectBoxRadioGroupProps\n>;\n\nexport const SelectBoxRadioGroup = React.forwardRef<\n  HTMLDivElement,\n  ReactSelectBoxRadioGroupProps\n>(({ className, children, ...otherProps }, ref) => {\n  const api = useRadioGroup(otherProps);\n  const {\n    rootProps: { \"aria-labelledby\": _, ...rootProps },\n    restProps,\n  } = api;\n\n  return (\n    <div ref={ref} {...rootProps} {...restProps} className={className}>\n      {/* <div {...labelProps}>\n        {label}\n      </div> */}\n      <SelectBoxRadioGroupContext.Provider value={{ api }}>\n        {children}\n      </SelectBoxRadioGroupContext.Provider>\n    </div>\n  );\n});\nSelectBoxRadioGroup.displayName = \"SelectBoxRadioGroup\";\n\nexport interface SelectBoxRadioProps\n  extends SelectBoxVariantProps,\n    Omit<RadioItemProps, \"disabled\" | \"invalid\"> {\n  label: string;\n  description?: string;\n}\n\ntype ReactSelectBoxRadio = Assign<\n  Omit<React.HTMLAttributes<HTMLInputElement>, \"children\">,\n  SelectBoxRadioProps\n>;\n\nexport const SelectBoxRadio = React.forwardRef<\n  HTMLInputElement,\n  ReactSelectBoxRadio\n>(({ className, label, description, ...otherProps }, ref) => {\n  const { api } = useSelectBoxContext();\n  const { getItemProps } = api;\n  const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n    getItemProps(otherProps);\n\n  const radioClassNames = radio({ size: \"large\" });\n  const selectBoxClassNames = selectBox();\n\n  return (\n    <label\n      className={clsx(selectBoxClassNames.root, className)}\n      {...rootProps}\n      {...restProps}\n    >\n      <input ref={ref} {...hiddenInputProps} style={visuallyHidden} />\n      <div className={selectBoxClassNames.content}>\n        <span className={selectBoxClassNames.label}>{label}</span>\n        {description && (\n          <span className={selectBoxClassNames.description}>{description}</span>\n        )}\n      </div>\n      <div\n        {...controlProps}\n        className={clsx(selectBoxClassNames.control, radioClassNames.root)}\n      >\n        <div {...stateProps} className={radioClassNames.icon} />\n      </div>\n    </label>\n  );\n});\nSelectBoxRadio.displayName = \"SelectBoxRadio\";\n"
+      "content": "\"use client\";\n\nimport {\n  useRadioGroup,\n  type UseRadioGroupProps,\n  type RadioItemProps,\n} from \"@seed-design/react-radio-group\";\nimport { radio } from \"@seed-design/recipe/radio\";\nimport {\n  type SelectBoxVariantProps,\n  selectBox,\n} from \"@seed-design/recipe/selectBox\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/radio.css\";\nimport \"@seed-design/stylesheet/selectBox.css\";\n\nconst SelectBoxRadioGroupContext = React.createContext<{\n  api: ReturnType<typeof useRadioGroup>;\n} | null>(null);\n\nconst useSelectBoxContext = () => {\n  const context = React.useContext(SelectBoxRadioGroupContext);\n  if (!context)\n    throw new Error(\n      \"SelectBoxRadio cannot be rendered outside the SelectBoxRadioGroup\",\n    );\n\n  return context;\n};\n\nexport interface SelectBoxRadioGroupProps\n  extends Omit<UseRadioGroupProps, \"disabled\"> {}\n\ntype ReactSelectBoxRadioGroupProps = Assign<\n  React.HTMLAttributes<HTMLDivElement>,\n  SelectBoxRadioGroupProps\n>;\n\nexport const SelectBoxRadioGroup = React.forwardRef<\n  HTMLDivElement,\n  ReactSelectBoxRadioGroupProps\n>(({ className, children, ...otherProps }, ref) => {\n  const api = useRadioGroup(otherProps);\n  const {\n    rootProps: { \"aria-labelledby\": _, ...rootProps },\n    restProps,\n  } = api;\n\n  const classNames = selectBox();\n\n  return (\n    <div\n      ref={ref}\n      {...rootProps}\n      {...restProps}\n      className={clsx(classNames.root, className)}\n    >\n      {/* <div {...labelProps}>\n        {label}\n      </div> */}\n      <SelectBoxRadioGroupContext.Provider value={{ api }}>\n        {children}\n      </SelectBoxRadioGroupContext.Provider>\n    </div>\n  );\n});\nSelectBoxRadioGroup.displayName = \"SelectBoxRadioGroup\";\n\nexport interface SelectBoxRadioProps\n  extends SelectBoxVariantProps,\n    Omit<RadioItemProps, \"disabled\" | \"invalid\"> {\n  label: string;\n  description?: string;\n}\n\ntype ReactSelectBoxRadio = Assign<\n  Omit<React.HTMLAttributes<HTMLInputElement>, \"children\">,\n  SelectBoxRadioProps\n>;\n\nexport const SelectBoxRadio = React.forwardRef<\n  HTMLInputElement,\n  ReactSelectBoxRadio\n>(({ className, label, description, ...otherProps }, ref) => {\n  const { api } = useSelectBoxContext();\n  const { getItemProps } = api;\n  const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n    getItemProps(otherProps);\n\n  const radioClassNames = radio({ size: \"large\" });\n  const selectBoxClassNames = selectBox();\n\n  return (\n    <label\n      className={clsx(selectBoxClassNames.box, className)}\n      {...rootProps}\n      {...restProps}\n    >\n      <input ref={ref} {...hiddenInputProps} style={visuallyHidden} />\n      <div className={selectBoxClassNames.content}>\n        <span className={selectBoxClassNames.label}>{label}</span>\n        {description && (\n          <span className={selectBoxClassNames.description}>{description}</span>\n        )}\n      </div>\n      <div\n        {...controlProps}\n        className={clsx(selectBoxClassNames.control, radioClassNames.root)}\n      >\n        <div {...stateProps} className={radioClassNames.icon} />\n      </div>\n    </label>\n  );\n});\nSelectBoxRadio.displayName = \"SelectBoxRadio\";\n"
     }
   ]
 }
\ No newline at end of file
diff --git a/docs/registry/registry-ui.ts b/docs/registry/registry-ui.ts
index b3c8389c6..25ce56a16 100644
--- a/docs/registry/registry-ui.ts
+++ b/docs/registry/registry-ui.ts
@@ -90,12 +90,12 @@ export const registryUI: RegistryUI = [
     files: ["ui:expand-button.tsx"],
   },
   {
-    name: "select-box-check",
+    name: "select-box-check-group",
     dependencies: [
       "@seed-design/react-checkbox",
       "@daangn/react-monochrome-icon",
     ],
-    files: ["ui:select-box-check.tsx"],
+    files: ["ui:select-box-check-group.tsx"],
   },
   {
     name: "select-box-radio-group",
diff --git a/docs/registry/ui/select-box-check.tsx b/docs/registry/ui/select-box-check-group.tsx
similarity index 83%
rename from docs/registry/ui/select-box-check.tsx
rename to docs/registry/ui/select-box-check-group.tsx
index 99773521e..7bd2cf8c0 100644
--- a/docs/registry/ui/select-box-check.tsx
+++ b/docs/registry/ui/select-box-check-group.tsx
@@ -25,6 +25,20 @@ import {
   IconMinusFatFill,
 } from "@daangn/react-monochrome-icon";
 
+export const SelectBoxCheckGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...otherProps }, ref) => {
+  const classNames = selectBox();
+
+  return (
+    <div ref={ref} {...otherProps} className={clsx(classNames.root, className)}>
+      {children}
+    </div>
+  );
+});
+SelectBoxCheckGroup.displayName = "SelectBoxCheckGroup";
+
 export interface SelectBoxCheckProps
   extends SelectBoxVariantProps,
     Pick<CheckboxVariantProps, "indeterminate">,
@@ -54,7 +68,7 @@ export const SelectBoxCheck = React.forwardRef<
 
   return (
     <label
-      className={clsx(selectBoxClassNames.root, className)}
+      className={clsx(selectBoxClassNames.box, className)}
       {...rootProps}
       {...restProps}
     >
diff --git a/docs/registry/ui/select-box-radio-group.tsx b/docs/registry/ui/select-box-radio-group.tsx
index ec8ca3d08..751837b56 100644
--- a/docs/registry/ui/select-box-radio-group.tsx
+++ b/docs/registry/ui/select-box-radio-group.tsx
@@ -51,8 +51,15 @@ export const SelectBoxRadioGroup = React.forwardRef<
     restProps,
   } = api;
 
+  const classNames = selectBox();
+
   return (
-    <div ref={ref} {...rootProps} {...restProps} className={className}>
+    <div
+      ref={ref}
+      {...rootProps}
+      {...restProps}
+      className={clsx(classNames.root, className)}
+    >
       {/* <div {...labelProps}>
         {label}
       </div> */}
@@ -90,7 +97,7 @@ export const SelectBoxRadio = React.forwardRef<
 
   return (
     <label
-      className={clsx(selectBoxClassNames.root, className)}
+      className={clsx(selectBoxClassNames.box, className)}
       {...rootProps}
       {...restProps}
     >
diff --git a/docs/stories/SelectBoxCheck.stories.tsx b/docs/stories/SelectBoxCheck.stories.tsx
deleted file mode 100644
index 901f751e3..000000000
--- a/docs/stories/SelectBoxCheck.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { SelectBoxCheck } from "seed-design/ui/select-box-check";
-import { selectBoxVariantMap } from "@seed-design/recipe/selectBox";
-
-import { SeedThemeDecorator } from "./components/decorator";
-import { VariantTable } from "./components/variant-table";
-
-const meta = {
-  component: SelectBoxCheck,
-  decorators: [SeedThemeDecorator],
-} satisfies Meta<typeof SelectBoxCheck>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const CommonStoryTemplate: Story = {
-  args: {
-    defaultChecked: true,
-    label: "nostrud",
-  },
-  render: function Render(args) {
-    return <VariantTable Component={SelectBoxCheck} variantMap={selectBoxVariantMap} {...args} />;
-  },
-};
-
-export const LightTheme = CommonStoryTemplate;
-
-export const DarkTheme = CommonStoryTemplate;
-
-export const FontScalingExtraSmall = CommonStoryTemplate;
-
-export const FontScalingExtraExtraExtraLarge = CommonStoryTemplate;
diff --git a/docs/stories/SelectBoxCheckGroup.stories.tsx b/docs/stories/SelectBoxCheckGroup.stories.tsx
new file mode 100644
index 000000000..dfcbaada2
--- /dev/null
+++ b/docs/stories/SelectBoxCheckGroup.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SelectBoxCheck, SelectBoxCheckGroup } from "seed-design/ui/select-box-check-group";
+import { selectBoxVariantMap } from "@seed-design/recipe/selectBox";
+
+import { SeedThemeDecorator } from "./components/decorator";
+import { VariantTable } from "./components/variant-table";
+
+const Component = () => {
+  return (
+    <SelectBoxCheckGroup>
+      <SelectBoxCheck key="dolor" value="dolor" label="dolor" description="dolor" defaultChecked />
+      <SelectBoxCheck
+        key="magna"
+        value="magna"
+        label="magna"
+        description="magna"
+        defaultChecked
+        indeterminate
+      />
+      <SelectBoxCheck key="sint" value="sint" label="sint" description="sint" />
+    </SelectBoxCheckGroup>
+  );
+};
+
+const meta = {
+  component: SelectBoxCheckGroup,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof SelectBoxCheckGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const CommonStoryTemplate: Story = {
+  args: {
+    defaultValue: "dolor",
+  },
+  render: function Render(args) {
+    return <VariantTable Component={Component} variantMap={selectBoxVariantMap} {...args} />;
+  },
+};
+
+export const LightTheme = CommonStoryTemplate;
+
+export const DarkTheme = CommonStoryTemplate;
+
+export const FontScalingExtraSmall = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge = CommonStoryTemplate;
diff --git a/docs/stories/SelectBoxRadioGroup.stories.tsx b/docs/stories/SelectBoxRadioGroup.stories.tsx
index 4b12b7366..68faa4739 100644
--- a/docs/stories/SelectBoxRadioGroup.stories.tsx
+++ b/docs/stories/SelectBoxRadioGroup.stories.tsx
@@ -12,16 +12,7 @@ const Component = () => {
   const [value, setValue] = useState(values[0]);
 
   return (
-    <SelectBoxRadioGroup
-      style={{
-        width: "100%",
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-      }}
-      value={value}
-      onValueChange={setValue}
-    >
+    <SelectBoxRadioGroup value={value} onValueChange={setValue}>
       {values.map((value) => (
         <SelectBoxRadio key={value} value={value} label={value} description={value} />
       ))}
diff --git a/packages/recipe-generator/preset/src/select-box.recipe.ts b/packages/recipe-generator/preset/src/select-box.recipe.ts
index 6551dac20..85a31aa49 100644
--- a/packages/recipe-generator/preset/src/select-box.recipe.ts
+++ b/packages/recipe-generator/preset/src/select-box.recipe.ts
@@ -4,9 +4,16 @@ import { pseudo, active, checked } from "./pseudo";
 
 const selectBox = defineRecipe({
   name: "selectBox",
-  slots: ["root", "content", "control", "label", "description"],
+  slots: ["root", "box", "content", "control", "label", "description"],
   base: {
     root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: vars.base.enabled.root.gap,
+
+      width: "100%",
+    },
+    box: {
       // XXX: css reset 생기면 불필요할 가능성
       cursor: "pointer",
       borderStyle: "solid",
@@ -15,27 +22,26 @@ const selectBox = defineRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      gap: vars.base.enabled.root.gap,
-      width: "100%",
+      gap: vars.base.enabled.box.gap,
 
-      paddingInline: vars.base.enabled.root.paddingX,
-      paddingBlock: vars.base.enabled.root.paddingY,
+      paddingInline: vars.base.enabled.box.paddingX,
+      paddingBlock: vars.base.enabled.box.paddingY,
 
-      borderWidth: vars.base.enabled.root.strokeWidth,
-      borderColor: vars.base.enabled.root.strokeColor,
+      borderWidth: vars.base.enabled.box.strokeWidth,
+      borderColor: vars.base.enabled.box.strokeColor,
 
-      borderRadius: vars.base.enabled.root.cornerRadius,
+      borderRadius: vars.base.enabled.box.cornerRadius,
 
       [pseudo(active)]: {
-        backgroundColor: vars.base.pressed.root.color,
+        backgroundColor: vars.base.pressed.box.color,
       },
 
       [pseudo(checked)]: {
-        backgroundColor: vars.base.selected.root.color,
+        backgroundColor: vars.base.selected.box.color,
       },
 
       [pseudo(checked, active)]: {
-        backgroundColor: vars.base.selectedPressed.root.color,
+        backgroundColor: vars.base.selectedPressed.box.color,
       },
     },
     content: {
@@ -46,6 +52,8 @@ const selectBox = defineRecipe({
     },
     control: {
       flex: "none",
+
+      marginBlock: vars.base.enabled.control.marginY,
     },
     label: {
       color: vars.base.enabled.label.color,
diff --git a/packages/recipe/lib/selectBox.d.ts b/packages/recipe/lib/selectBox.d.ts
index 7b33f921c..1cc387e42 100644
--- a/packages/recipe/lib/selectBox.d.ts
+++ b/packages/recipe/lib/selectBox.d.ts
@@ -8,7 +8,7 @@ type SelectBoxVariantMap = {
 
 export type SelectBoxVariantProps = Partial<SelectBoxVariant>;
 
-export type SelectBoxSlotName = "root" | "content" | "control" | "label" | "description";
+export type SelectBoxSlotName = "root" | "box" | "content" | "control" | "label" | "description";
 
 export const selectBoxVariantMap: SelectBoxVariantMap;
 
diff --git a/packages/recipe/lib/selectBox.mjs b/packages/recipe/lib/selectBox.mjs
index c81422727..56cad7957 100644
--- a/packages/recipe/lib/selectBox.mjs
+++ b/packages/recipe/lib/selectBox.mjs
@@ -5,6 +5,10 @@ const selectBoxSlotNames = [
     "root",
     "selectBox__root"
   ],
+  [
+    "box",
+    "selectBox__box"
+  ],
   [
     "content",
     "selectBox__content"
diff --git "a/packages/rootage/artifacts/components/\bselect-box.yaml" "b/packages/rootage/artifacts/components/\bselect-box.yaml"
index e8bd7344d..7d30372d0 100644
--- "a/packages/rootage/artifacts/components/\bselect-box.yaml"
+++ "b/packages/rootage/artifacts/components/\bselect-box.yaml"
@@ -7,6 +7,8 @@ data:
   base:
     enabled:
       root:
+        gap: $unit.x3
+      box:
         paddingX: $unit.x4
         paddingY: 19px
         gap: $unit.x2_5
@@ -25,13 +27,15 @@ data:
         fontWeight: $font-weight.regular
         fontSize: $font-size.t4
         lineHeight: $line-height.t4
+      control:
+        marginY: 0
     pressed:
-      root:
+      box:
         color: $color.bg.layer-default-pressed
     selected:
-      root:
+      box:
         color: $color.bg.neutral-weak
         strokeColor: $color.stroke.control
     selected,pressed:
-      root:
+      box:
         color: $color.bg.neutral-weak-pressed
diff --git a/packages/stylesheet/selectBox.css b/packages/stylesheet/selectBox.css
index 8732a2c85..5f8ce4d6a 100644
--- a/packages/stylesheet/selectBox.css
+++ b/packages/stylesheet/selectBox.css
@@ -1,4 +1,10 @@
 .selectBox__root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--seed-v3-unit-x3);
+    width: 100%;
+}
+.selectBox__box {
     cursor: pointer;
     border-style: solid;
     box-sizing: border-box;
@@ -6,20 +12,19 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--seed-v3-unit-x2_5);
-    width: 100%;
     padding-inline: var(--seed-v3-unit-x4);
     padding-block: 19px;
     border-width: 1px;
     border-color: var(--seed-v3-color-stroke-neutral);
     border-radius: var(--seed-v3-radius-x3);
 }
-.selectBox__root:is(:active, [data-active]) {
+.selectBox__box:is(:active, [data-active]) {
     background-color: var(--seed-v3-color-bg-layer-default-pressed);
 }
-.selectBox__root:is(:checked, [data-checked]) {
+.selectBox__box:is(:checked, [data-checked]) {
     background-color: var(--seed-v3-color-bg-neutral-weak);
 }
-.selectBox__root:is(:checked, [data-checked]):is(:active, [data-active]) {
+.selectBox__box:is(:checked, [data-checked]):is(:active, [data-active]) {
     background-color: var(--seed-v3-color-bg-neutral-weak-pressed);
 }
 .selectBox__content {
@@ -29,6 +34,7 @@
 }
 .selectBox__control {
     flex: none;
+    margin-block: 0;
 }
 .selectBox__label {
     color: var(--seed-v3-color-fg-neutral);
diff --git a/packages/vars/src/component/select-box.vars.ts b/packages/vars/src/component/select-box.vars.ts
index ee32f2695..72b367e07 100644
--- a/packages/vars/src/component/select-box.vars.ts
+++ b/packages/vars/src/component/select-box.vars.ts
@@ -2,6 +2,9 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
+        "gap": "var(--seed-v3-unit-x3)"
+      },
+      "box": {
         "paddingX": "var(--seed-v3-unit-x4)",
         "paddingY": "19px",
         "gap": "var(--seed-v3-unit-x2_5)",
@@ -23,21 +26,24 @@ export const vars = {
         "fontWeight": "var(--seed-v3-font-weight-regular)",
         "fontSize": "var(--seed-v3-font-size-t4)",
         "lineHeight": "var(--seed-v3-line-height-t4)"
+      },
+      "control": {
+        "marginY": "0"
       }
     },
     "pressed": {
-      "root": {
+      "box": {
         "color": "var(--seed-v3-color-bg-layer-default-pressed)"
       }
     },
     "selected": {
-      "root": {
+      "box": {
         "color": "var(--seed-v3-color-bg-neutral-weak)",
         "strokeColor": "var(--seed-v3-color-stroke-control)"
       }
     },
     "selectedPressed": {
-      "root": {
+      "box": {
         "color": "var(--seed-v3-color-bg-neutral-weak-pressed)"
       }
     }