diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleCheckbox.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleCheckbox.vue
new file mode 100644
index 0000000000000000000000000000000000000000..13133eddaa16b68904508c331edba8bd4130a7cc
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleCheckbox.vue
@@ -0,0 +1,40 @@
+<docs lang="md">
+<!--zh-CN-->
+### 多选
+
+<!--en-US-->
+### Multiple
+</docs>
+
+<script setup lang="ts">
+import { OToggle, OCheckboxGroup, OCheckbox } from '@opensig/opendesign';
+import { ref } from 'vue';
+const checkboxVal = ref([1]);
+</script>
+
+<template>
+  <section>
+    <OCheckboxGroup v-model="checkboxVal" :style="{ '--checkbox-group-gap': '8px' }">
+      <OCheckbox :value="1">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件1</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="2">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件2</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="3">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件3</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="4">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件4</OToggle>
+        </template>
+      </OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleMinAndMax.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleMinAndMax.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32f7082007e4e1c7147f5d107fabc0eda0b9d945
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleMinAndMax.vue
@@ -0,0 +1,48 @@
+<docs lang="md">
+<!--zh-CN-->
+### 最少选择1个，最多选择3个
+
+<!--en-US-->
+### Number limited
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OToggle, OCheckbox, OCheckboxGroup, OIconAdd } from '@opensig/opendesign';
+
+const checkboxVal = ref([1, 2]);
+</script>
+
+<template>
+  <section>
+    <OCheckboxGroup v-model="checkboxVal" :min="1" :max="3" :style="{ '--checkbox-group-gap': '8px' }">
+      <OCheckbox :value="1">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件1</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="2">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件2</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="3">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件3</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="4">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件4</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="5">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件5</OToggle>
+        </template>
+      </OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleOnly.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleOnly.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f83bfcf1efaabe28089996c7da9ba223e0ec2da2
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleOnly.vue
@@ -0,0 +1,21 @@
+<docs lang="md">
+<!--zh-CN-->
+### 单独使用
+
+<!--en-US-->
+### standalone
+</docs>
+
+<script setup lang="ts">
+import { OToggle } from '@opensig/opendesign';
+import { ref } from 'vue';
+const checked1 = ref(true);
+</script>
+
+<template>
+  <section>
+    <OToggle v-model:checked="checked1">Checked: {{ checked1 }}</OToggle>
+    <OToggle disabled>Disabled</OToggle>
+    <OToggle>3</OToggle>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleRadio.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleRadio.vue
new file mode 100644
index 0000000000000000000000000000000000000000..65a6313dd050f532ccd0fddeeacde9b1ce9feecb
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleRadio.vue
@@ -0,0 +1,40 @@
+<docs lang="md">
+<!--zh-CN-->
+### 单选
+
+<!--en-US-->
+### exclusive
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OToggle, ORadio, ORadioGroup } from '@opensig/opendesign';
+const radioVal = ref(1);
+</script>
+
+<template>
+  <section>
+    <ORadioGroup v-model="radioVal" :style="{ '--radio-group-gap': '8px' }">
+      <ORadio :value="1">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件1</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="2">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件2</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="3">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件3</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="4">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件4</OToggle>
+        </template>
+      </ORadio>
+    </ORadioGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/toggleUsage.ts b/packages/opendesign/src/toggle/__docs__/__case__/toggleUsage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..effa14895cb0eaea8622900910d40b0828f2ef91
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/toggleUsage.ts
@@ -0,0 +1,48 @@
+import { propsToAttrStr } from '../../../_demo/utils';
+import { reactive } from 'vue';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types.ts';
+
+export const docs = {
+  'zh-CN':
+    '选择块是指示当前状态并提供切换操作的表单控件，并支持插槽以实现自定义显示。可设置项包含：  \n  \n' +
+    '- 双向绑定状态`checked`  \n' +
+    '- 非受控状态时是否选中`defaultChecked`  \n' +
+    '- 圆角值`round`  \n' +
+    '- 前缀图标`icon`  \n' +
+    '- 是否禁用`disabled`  \n' +
+    '还可以配合`ORadio`、`ORadioGroup`等组件达到唯一选择的目的',
+  'en-US':
+    'Select block is a form control that indicates the current state and provides toggle operations, supporting slots for custom display. Configurable items include：  \n  \n' +
+    '- Two-way bound state`checked`  \n' +
+    '- Whether selected in uncontrolled state `defaultChecked`  \n' +
+    '- Round corner value `round`  \n' +
+    '- Prefix icon `icon`  \n' +
+    '- Disabled state `disabled`  \n' +
+    'It can also be combined with components like `ORadio`、`ORadioGroup`  to achieve single selection',
+};
+
+export const ctx = reactive({ checked1: true });
+
+export const schema = {
+  checked: {
+    type: 'boolean',
+    default: true,
+  },
+  round: {
+    type: 'string',
+    default: 'pill'
+  },
+  disabled: {
+    type: 'boolean',
+    default: false
+  }
+} satisfies Record<string, DocDemoSchema>;
+
+export const template:DocDemoTemplate<typeof schema> = (_props) => {
+  return `
+<section>
+  <OToggle ${propsToAttrStr(_props)}>Checked: ${_props.checked}</OToggle>
+  <OToggle>3</OToggle>
+</section>  
+  `;
+};
diff --git a/packages/opendesign/src/toggle/__docs__/index.en-US.md b/packages/opendesign/src/toggle/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..ace57f69a39a58d37bb8d779e0b8bae8330d294d
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/index.en-US.md
@@ -0,0 +1,20 @@
+---
+sidebar: OToggle
+---
+
+# toggle
+
+## Usage
+
+<!-- @usage toggleUsage -->
+
+## Cases
+
+<!-- @case ToggleCheckbox -->
+<!-- @case ToggleMinAndMax -->
+<!-- @case ToggleOnly -->
+<!-- @case ToggleRadio -->
+
+## Api
+
+<!-- @api OToggle -->
\ No newline at end of file
diff --git a/packages/opendesign/src/toggle/__docs__/index.zh-CN.md b/packages/opendesign/src/toggle/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..2de82ad3dd525b775b8c91fd9f7264bee2ffe4f4
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/index.zh-CN.md
@@ -0,0 +1,20 @@
+---
+sidebar: OToggle 选择块
+---
+
+# 选择块
+
+## 使用
+
+<!-- @usage toggleUsage -->
+
+## 示例
+
+<!-- @case ToggleCheckbox -->
+<!-- @case ToggleMinAndMax -->
+<!-- @case ToggleOnly -->
+<!-- @case ToggleRadio -->
+
+## Api
+
+<!-- @api OToggle -->
\ No newline at end of file
diff --git a/packages/opendesign/src/toggle/index.ts b/packages/opendesign/src/toggle/index.ts
index 4c1128774c53c3b881d1fd5f12834768082c7995..7765c952e4200cbf775346941e0d8bea4df1b740 100644
--- a/packages/opendesign/src/toggle/index.ts
+++ b/packages/opendesign/src/toggle/index.ts
@@ -4,6 +4,7 @@ import type { App } from 'vue';
 const OToggle = Object.assign(_OButtonToggle, {
   install(app: App) {
     app.component('OButtonToggle', _OButtonToggle);
+    app.component('OToggle', _OButtonToggle);
   },
 });