diff --git a/packages/docs/checkbox.md b/packages/docs/checkbox.md
new file mode 100644
index 0000000000000000000000000000000000000000..506cc084b3b87a2e17a0ae7932776762d513b13f
--- /dev/null
+++ b/packages/docs/checkbox.md
@@ -0,0 +1,47 @@
+# Checkbox 多选框
+
+## props
+
+| name                 | type                      | 默认值 | 说明        |
+| :------------------- | :------------------------ | :----- | ----------- |
+| value                | string \| number          | -      | 多选框 vale |
+| model-value(v-model) | Array<string \| number \> | [ ]    | 双向绑定值  |
+| disabled             | boolean                   | false  | 是否禁用    |
+
+## event
+
+| name   | 参数                                                  | 说明           |
+| :----- | :---------------------------------------------------- | :------------- |
+| change | {value: Array<string \| number \>, checked: boolean}; | 状态切换后触发 |
+
+## expose
+
+## slot
+
+| name     | 说明         |
+| :------- | :----------- |
+| checkbox | 自定义多选框 |
+
+# CheckboxGroup 多选框组
+
+## props
+
+| name                 | type                      | 默认值 | 说明       |
+| :------------------- | :------------------------ | :----- | ---------- |
+| model-value(v-model) | Array<string \| number \> | -      | 双向绑定值 |
+| disabled             | boolean                   | false  | 是否禁用   |
+| direction            | CheckboxGroupDirectionT   | false  | 排列方向   |
+
+```ts
+type CheckGroupDirectionT = 'horizontal' | 'vertical';
+```
+
+## event
+
+| name   | 参数                             | 说明           |
+| :----- | :------------------------------- | :------------- |
+| change | value: Array<string \| number \> | 状态切换后触发 |
+
+## expose
+
+## slot
diff --git a/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53055c70bdd544f48bc73d02ef40249a6c02d6e3
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/OCheckboxGroup.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { provide, toRefs } from 'vue';
+import { checkboxGroupInjectKey } from './provide';
+import type { CheckboxGroupDirectionT } from './types';
+
+interface CheckboxGroupPropT {
+  modelValue?: Array<string | number>;
+  disabled?: boolean;
+  /**
+   * 多选框组方向: 'horizontal' | 'vertical'
+   */
+  direction?: CheckboxGroupDirectionT;
+}
+
+const props = withDefaults(defineProps<CheckboxGroupPropT>(), {
+  modelValue: () => [],
+  disabled: false,
+  direction: 'horizontal',
+});
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', val: Array<string | number>): void;
+  (e: 'change', val: Array<string | number>): void;
+}>();
+
+const { modelValue, disabled } = toRefs(props);
+
+const onChange = (val: Array<string | number>) => {
+  emits('update:modelValue', val);
+  emits('change', val);
+};
+
+provide(checkboxGroupInjectKey, { modelValue, disabled, onChange });
+</script>
+
+<template>
+  <div class="o-checkbox-group" :class="[`is-${props.direction}`]">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/checkbox-group/index.ts b/packages/opendesign/src/components/checkbox-group/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f58caacfb43ef8e0be42c029d447757df06fd25
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/index.ts
@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+
+import _OCheckboxGroup from './OCheckboxGroup.vue';
+
+export * from './types';
+
+const OCheckboxGroup = Object.assign(_OCheckboxGroup, {
+  install(app: App) {
+    app.component(_OCheckboxGroup.name, _OCheckboxGroup);
+  },
+});
+
+export { OCheckboxGroup };
diff --git a/packages/opendesign/src/components/checkbox-group/provide.ts b/packages/opendesign/src/components/checkbox-group/provide.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dc5e158b45d9d7908265ea866fd475404a93e533
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/provide.ts
@@ -0,0 +1,7 @@
+import { InjectionKey, Ref } from 'vue';
+
+export const checkboxGroupInjectKey: InjectionKey<{
+  modelValue: Ref<Array<string | number>>;
+  disabled: Ref<boolean>;
+  onChange: (val: Array<string | number>) => void;
+}> = Symbol('provide-checkbox-group');
diff --git a/packages/opendesign/src/components/checkbox-group/style/index.scss b/packages/opendesign/src/components/checkbox-group/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..882feea482ee26bb770c5f26b24b7692eeb2632f
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/style/index.scss
@@ -0,0 +1,18 @@
+@import './var.scss';
+
+.o-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  &.is-horizontal {
+    .o-checkbox + .o-checkbox {
+      margin-left: var(--checkbox-group-gap);
+    }
+  }
+
+  &.is-vertical {
+    flex-direction: column;
+    .o-checkbox + .o-checkbox {
+      margin-top: var(--checkbox-group-gap);
+    }
+  }
+}
diff --git a/packages/opendesign/src/components/checkbox-group/style/index.ts b/packages/opendesign/src/components/checkbox-group/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/checkbox-group/style/var.scss b/packages/opendesign/src/components/checkbox-group/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2b50918dde3ad77007ae9ed916551507eaf80525
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/style/var.scss
@@ -0,0 +1,3 @@
+.o-checkbox-group {
+  --checkbox-group-gap: var(--o-gap-2);
+}
diff --git a/packages/opendesign/src/components/checkbox-group/types.ts b/packages/opendesign/src/components/checkbox-group/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1419292d38aaaa504a2129f120d7920982e352df
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox-group/types.ts
@@ -0,0 +1 @@
+export type CheckboxGroupDirectionT = 'horizontal' | 'vertical';
diff --git a/packages/opendesign/src/components/checkbox/OCheckbox.vue b/packages/opendesign/src/components/checkbox/OCheckbox.vue
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..02043c0011ea73a335214e0286a197e34af1d09c 100644
--- a/packages/opendesign/src/components/checkbox/OCheckbox.vue
+++ b/packages/opendesign/src/components/checkbox/OCheckbox.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
+import { checkboxGroupInjectKey } from '../checkbox-group/provide';
+import { IconDone } from '../icons';
+
+interface CheckboxPropT {
+  value: string | number;
+  modelValue?: Array<string | number>;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<CheckboxPropT>(), {
+  modelValue: () => [],
+  disabled: false,
+});
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', val: Array<string | number>): void;
+  (e: 'change', rlt: { value: Array<string | number>; checked: boolean }): void;
+}>();
+
+const checkboxGroupInjection = inject(checkboxGroupInjectKey, null);
+
+// 是否禁用
+const isDisabled = computed(() => checkboxGroupInjection?.disabled.value || props.disabled);
+
+// 是否选中
+const isChecked = computed(() =>
+  checkboxGroupInjection ? checkboxGroupInjection.modelValue.value.includes(props.value) : props.modelValue?.includes(props.value)
+);
+
+const onClick = (ev: Event) => {
+  ev.stopPropagation();
+};
+
+const onChange = (ev: Event) => {
+  const { checked } = ev.target as HTMLInputElement;
+  let newVal: Array<string | number> = [];
+  const set = checkboxGroupInjection ? new Set([...checkboxGroupInjection.modelValue.value]) : new Set([...props.modelValue]);
+  if (checked) {
+    set.add(props.value);
+  } else {
+    set.delete(props.value);
+  }
+  newVal = Array.from(set);
+  checkboxGroupInjection?.onChange(newVal);
+  emits('update:modelValue', newVal);
+};
+
+watch(
+  () => isChecked.value,
+  () => {
+    emits('change', { value: checkboxGroupInjection ? checkboxGroupInjection.modelValue.value : props.modelValue, checked: isChecked.value });
+  }
+);
+</script>
+
+<template>
+  <label class="o-checkbox" :class="{ 'is-checked': isChecked, 'is-disabled': isDisabled }">
+    <input type="checkbox" :disabled="isDisabled" :checked="isChecked" @click="onClick" @change="onChange" />
+    <slot v-if="$slots.checkbox" name="checkbox" :checked="isChecked" :disabled="isDisabled"></slot>
+    <template v-else>
+      <span class="o-checkbox-icon">
+        <IconDone v-if="isChecked" />
+      </span>
+      <span class="o-checkbox-label">
+        <slot></slot>
+      </span>
+    </template>
+  </label>
+</template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bf808f6d1be5caedfeb988e63c9707c5fb5f81b
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxBasic.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCheckbox } from '../index';
+const checkboxVal = ref(['1']);
+</script>
+
+<template>
+  <section>
+    <OCheckbox v-model="checkboxVal" value="1">选项1</OCheckbox>
+    <OCheckbox v-model="checkboxVal" value="2">选项2</OCheckbox>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc4b94faa93d4ed864dba01ad84eb1518eb07d8d
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxDisabled.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCheckbox } from '../index';
+const checkboxVal = ref(['1']);
+</script>
+
+<template>
+  <section>
+    <OCheckbox v-model="checkboxVal" value="1" disabled>选项1</OCheckbox>
+    <OCheckbox v-model="checkboxVal" value="2" disabled>选项2</OCheckbox>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..563fe2249c797d6f27e5a98f265769bf314a3fc2
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxGroup.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCheckbox } from '../index';
+import { OCheckboxGroup } from '../../checkbox-group';
+const checkboxVal1 = ref([1]);
+const checkboxVal2 = ref(['a']);
+const handleChange = (val: Array<string | number>) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <section>
+    <OCheckboxGroup v-model="checkboxVal1">
+      <OCheckbox :value="1">选项1</OCheckbox>
+      <OCheckbox :value="2">选项2</OCheckbox>
+      <OCheckbox :value="3">选项3</OCheckbox>
+    </OCheckboxGroup>
+  </section>
+
+  <section>
+    <OCheckboxGroup v-model="checkboxVal2" direction="vertical" @change="handleChange">
+      <OCheckbox value="a">选项A</OCheckbox>
+      <OCheckbox value="b">选项B</OCheckbox>
+      <OCheckbox value="c">选项C</OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue b/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8597f785880c840fa2eb107925533b319b4c04fc
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/__demo__/CheckboxSlots.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCheckbox } from '../index';
+const checkboxVal = ref(['1']);
+</script>
+
+<template>
+  <section>
+    <OCheckbox v-model="checkboxVal" value="1">
+      <template #checkbox="{ checked }">
+        {{ `自定义checkbox1 ${checked}` }}
+      </template>
+    </OCheckbox>
+    <OCheckbox v-model="checkboxVal" value="2">
+      <template #checkbox="{ checked }">
+        {{ `自定义checkbox2 ${checked}` }}
+      </template>
+    </OCheckbox>
+  </section>
+</template>
diff --git a/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue b/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2dd11fa8a02d7cd0ab061d7e8565ef3b7b8a0327
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/__demo__/IndexCheckbox.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import '../style';
+import '../../checkbox-group/style';
+import CheckboxBasic from './CheckboxBasic.vue';
+import CheckboxDisabled from './CheckboxDisabled.vue';
+import CheckboxSlots from './CheckboxSlots.vue';
+import CheckboxGroup from './CheckboxGroup.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <h4>基础用法</h4>
+    <CheckboxBasic />
+    <h4>禁用状态</h4>
+    <CheckboxDisabled />
+    <h4>插槽</h4>
+    <CheckboxSlots />
+    <h4>多选框组</h4>
+    <CheckboxGroup />
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/checkbox/index.ts b/packages/opendesign/src/components/checkbox/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3c566cc96777ecfc540f90c6ee505507773a668
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/index.ts
@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+
+import _OCheckbox from './OCheckbox.vue';
+
+const OCheckbox = Object.assign(_OCheckbox, {
+  install(app: App) {
+    app.component(_OCheckbox.name, _OCheckbox);
+  },
+});
+
+export { OCheckbox };
diff --git a/packages/opendesign/src/components/checkbox/style/index.scss b/packages/opendesign/src/components/checkbox/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9881bc7c7b21a433448a0da19c858fd04f276a5b
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/style/index.scss
@@ -0,0 +1,64 @@
+@import './var.scss';
+
+.o-checkbox {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: var(--checkbox-text-size);
+  line-height: var(--checkbox-text-height);
+  color: var(--checkbox-color);
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    position: absolute;
+    outline: none;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+  }
+
+  .o-checkbox-icon {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--o-color-border1);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--o-color-text1_inverse);
+  }
+
+  .o-checkbox-label {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    .o-checkbox-icon {
+      border-color: var(--checkbox-icon-checked);
+    }
+  }
+
+  &.is-checked {
+    .o-checkbox-icon {
+      background-color: var(--checkbox-icon-checked);
+      border-color: var(--checkbox-icon-checked);
+    }
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--checkbox-color_disabled);
+    .o-checkbox-icon {
+      border-color: var(--o-color-border2);
+    }
+  }
+
+  &.is-checked.is-disabled {
+    .o-checkbox-icon {
+      background-color: var(--checkbox-icon-checked_disabled);
+      border-color: var(--checkbox-icon-checked_disabled);
+    }
+  }
+}
diff --git a/packages/opendesign/src/components/checkbox/style/index.ts b/packages/opendesign/src/components/checkbox/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67aac616fc2524b146b7b078fd3b67c1bd3b4a6e
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/checkbox/style/var.scss b/packages/opendesign/src/components/checkbox/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..515c26498aeebb71dd82148a5a8e9f24d089ea3b
--- /dev/null
+++ b/packages/opendesign/src/components/checkbox/style/var.scss
@@ -0,0 +1,10 @@
+.o-checkbox {
+  --checkbox-color: var(--o-color-text1);
+  --checkbox-color_disabled: var(--o-color-text4);
+
+  --checkbox-text-size: var(--o-font_size-text);
+  --checkbox-text-height: var(--o-line_height-text);
+
+  --checkbox-icon-checked: var(--o-color-primary1);
+  --checkbox-icon-checked_disabled: var(--o-color-primary4);
+}
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index 08d57631c5b26b0ef00e4a8b3dd65b776879f57b..f8f0cab6539b55bf33b50640ca3a784d2a773e0e 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -8,4 +8,8 @@ export * from './switch';
 
 export * from './radio';
 
-export * from './radio-group';
\ No newline at end of file
+export * from './radio-group';
+
+export * from './checkbox';
+
+export * from './checkbox-group';
\ No newline at end of file
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 0b9c26c23f69ffed2e2e32e5c2627f38a98813f7..ce56d602f56dc6ad45e1bcdb8387b8a986448da7 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -63,6 +63,12 @@ export const routes = [
     label: '单选',
     component: () => import('@demo/radio/__demo__/IndexRadio.vue'),
   },
+  {
+    path: '/checkbox',
+    name: 'Checkbox',
+    label: '多选',
+    component: () => import('@demo/checkbox/__demo__/IndexCheckbox.vue'),
+  },
 ];
 
 export const router = createRouter({