diff --git a/docs/views/toggle/api/toggle.md b/docs/views/toggle/api/toggle.md
index 1666d9ba5..045b6c9a5 100644
--- a/docs/views/toggle/api/toggle.md
+++ b/docs/views/toggle/api/toggle.md
@@ -12,12 +12,13 @@
 
 >### Props
 
- | 이름 | 타입 | 디폴트 | 설명 | 종류 |
-  |------|--------|------|------|------|
-  | v-model | Boolean | false | <토글>에서 선택된 값 | |
-  | disabled | Boolean | false | <토글> 사용 여부 | |
-  | width | Number | 40 | <토글> width size | |
-  | activeColor | String | '#409EFF' | <토글> 활성화 시 색상 | |
+ | 이름            | 타입 | 디폴트 | 설명 | 종류 |
+ |---------------|------|--------|------|------|
+  | v-model       | Boolean | false | <토글>에서 선택된 값 | |
+  | readonly      | Boolean | false | <토글> 읽기전용 여부 | |
+  | disabled      | Boolean | false | <토글> 사용 여부 | |
+  | width         | Number | 40 | <토글> width size | |
+  | activeColor   | String | '#409EFF' | <토글> 활성화 시 색상 | |
   | inactiveColor | String | '#DCDFE6' | <토글> 비활성화 시 색상 | |
 
 >### Event
diff --git a/docs/views/toggle/example/Default.vue b/docs/views/toggle/example/Default.vue
index d62890579..859e40a14 100644
--- a/docs/views/toggle/example/Default.vue
+++ b/docs/views/toggle/example/Default.vue
@@ -8,6 +8,13 @@
       {{ checkVal1 }}
     </div>
   </div>
+  <div class="case">
+    <p class="case-title">Readonly</p>
+    <ev-toggle
+      v-model="checkVal1"
+      readonly
+    />
+  </div>
   <div class="case">
     <p class="case-title">Disabled</p>
     <ev-toggle
diff --git a/package.json b/package.json
index 69aa7b3ba..10fd0e149 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.1.54",
+  "version": "3.1.55",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
diff --git a/src/components/toggle/Toggle.vue b/src/components/toggle/Toggle.vue
index 6d8429f04..993ce4f30 100644
--- a/src/components/toggle/Toggle.vue
+++ b/src/components/toggle/Toggle.vue
@@ -4,6 +4,7 @@
     :class="{
       checked: modelValue,
       disabled,
+      readonly,
     }"
     :style="{
       width: `${width}px`,
@@ -24,6 +25,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -51,7 +56,7 @@ export default {
       },
     });
     const clickMv = () => {
-      if (!props.disabled) {
+      if (!props.disabled && !props.readonly) {
         mv.value = !mv.value;
       }
     };
@@ -95,12 +100,14 @@ export default {
     left: calc(100% - 17px);
   }
 
-  &.disabled {
+  &.readonly {
     opacity: .6;
+    cursor: default;
+  }
 
-    &:hover {
-      cursor: not-allowed;
-    }
+  &.disabled {
+    opacity: .6;
+    cursor: not-allowed;
   }
 }