diff --git a/package.json b/package.json
index 739b2a5c..8d948607 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "description": "style lib",
   "author": "☘",
   "license": "MIT",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "main": "./dist/index.css",
   "scripts": {
     "dev": "astro dev --host",
diff --git a/src/components/header/index.astro b/src/components/header/index.astro
index 852a8c90..3f0027c2 100644
--- a/src/components/header/index.astro
+++ b/src/components/header/index.astro
@@ -42,12 +42,13 @@ const { href } = Astro.props;
           * 为了兼容 Safari浏览器里 `<svg>` 不能同时拥有 `box-shadow` 和 `drop-shadow`
           * 所以额外用了 `<i>` 来包裹 `<svg>`
           */}
-        <i>
+        <i class={`${prefix}-switch-mover`}>
             <Icon name="general/outline/sun"/>
         </i>
-        <i>
+        <i class={`${prefix}-switch-mover`}>
             <Icon name="general/outline/moon"/>
         </i>
+        <label class={`${prefix}-switch-slot`} for="header-theme-switch"></label>
     </Switch>
 </header>
 
diff --git a/src/components/header/theme-switch.styl b/src/components/header/theme-switch.styl
index f1131637..382ebd3a 100644
--- a/src/components/header/theme-switch.styl
+++ b/src/components/header/theme-switch.styl
@@ -14,29 +14,27 @@
     // 关闭按钮颜色 
     --color-switch var(--gold-3)
 
-#header-theme-switch+label
-    
     i
         background unset
     svg
         width 100%
         height 100%
         
-    i:first-child
+    i:first-of-type
         // 打开按钮 字体颜色
         color _rgb(var(--orange-10))
         opacity 1
         svg
             filter drop-shadow(0 0 2px _rgb(var(--gold-6)))
-    i:last-child
+    i:last-of-type
         // 关闭按钮 字体颜色
         color _rgb(var(--blue-10))
         opacity 0
         svg
             filter drop-shadow(0 0 2px _rgb(var(--blue-6)))
 
-#header-theme-switch:checked+label
-    i:first-child
+#header-theme-switch:checked~i
+    &:first-of-type
         opacity 0
-    i:last-child
+    &:last-of-type
         opacity 1
diff --git a/src/components/switch/index.astro b/src/components/switch/index.astro
index b68f6f29..ea97f8d8 100644
--- a/src/components/switch/index.astro
+++ b/src/components/switch/index.astro
@@ -3,7 +3,7 @@ import prefix from "src/scripts/prefix";
 import dataset from "src/scripts/server/dataset";
 const props = Astro.props;
 interface Props {
-    id: string;
+    id?: string;
     title?: string;
     name?: string;
     checked?: boolean;
@@ -12,16 +12,9 @@ interface Props {
     style?: Record<string, any> | string;
     dataset?: Record<string, any>;
 }
-
-if (!props.id) {
-    throw new Error("`swicth`必须传入`id`");
-    /**
-     * 其实可以不传入，那样导致label[for]无法绑定开关，从而导致开关无法展示hover效果
-     * 
-     * 所以对于本文档的这个astro组件，为了完全的展示样式，必须要传入
-     * 
-     * （实际上支持label不传for是后来加的，懒得调整组件和pug示例代码了所以一刀切了）
-     */
+let slots = "";
+if (Astro.slots.has("default")) {
+    slots = await Astro.slots.render("default");
 }
 ---
 
@@ -37,10 +30,14 @@ if (!props.id) {
         name={props.name || props.id}
         checked={props.checked}
         disabled={props.disabled}
+        title={props.title || props.id || props.name}
     />
-    <label
-        class={`${prefix}-switch-mover`}
-        for={props.id}
-        title={props.title || props.id}><slot /></label
-    >
+    {
+        slots ? (
+            <Fragment set:html={slots} />
+        ) : (
+            <i class={`${prefix}-switch-mover`}></i>
+            <span class={`${prefix}-switch-slot`}></span>
+        )
+    }
 </span>
diff --git a/src/components/switch/oxalis.astro b/src/components/switch/oxalis.astro
index 1a7a7b5b..0303e442 100644
--- a/src/components/switch/oxalis.astro
+++ b/src/components/switch/oxalis.astro
@@ -1,15 +1,15 @@
 ---
 import Switch from "./index.astro";
+import prefix from "src/scripts/prefix";
 const props = Astro.props;
 interface Props {
-    id: string
+    id: string;
 }
 ---
 
 <Switch
     id={props.id}
     class="oxalis-switch"
-    checked
     style={{
         ["--size-switch"]: "48px",
         ["--padding-switch"]: "4px",
@@ -18,10 +18,11 @@ interface Props {
         ["--color-switch"]: "var(--gold-3)",
     }}
 >
-    <span class="oxalis-switch-mover">☘</span>
+    <span class={`${prefix}-switch-mover oxalis-switch-mover`}>☘</span>
+    <label class={`${prefix}-switch-slot`} for={props.id}></label>
 </Switch>
+
 <style lang="stylus">
-    .oxalis-switch>:global(input:checked+label)
-        :global(.oxalis-switch-mover)
-            transform rotate(360deg)
+    .oxalis-switch>:global(input:checked)+.oxalis-switch-mover
+        transform rotate(360deg)
 </style>
diff --git a/src/lib/components/switch.styl b/src/lib/components/switch.styl
index 9e68518c..8c0c8f0d 100644
--- a/src/lib/components/switch.styl
+++ b/src/lib/components/switch.styl
@@ -37,108 +37,110 @@
     position relative
     font-size calc(var(--size-switch-mover) - var(--font-offset-parent))
 
+    height var(--size-switch, 22px)
+    width calc(var(--size-switch, 22px) * 2)
+    border-radius calc((var(--size-switch, 22px) / 2))
+    // overflow hidden
+
     &.sm
         --size-switch 16px
-    
-    input.{prefix}-input[type=checkbox]
+        
+    &-mover
+        z-index 1
+        overflow hidden
+        border-radius 50%
+        background-color _rgb(var(--color-switch-mover, var(--gray-1)))
+        will-change filter
+    &-slot
         position absolute
-        opacity 0
-        margin 0
-        // pointer-events none
+        z-index 0
+        background-color _rgb(var(--color-switch, var(--gray-4)))
+        transition background-color 1s, box-shadow .5s
         inset 0
+        border-radius @border-radius
+    &-mover
+    input.{prefix}-input[type=checkbox]
         cursor pointer
+        position absolute
+        display flex
+        align-items center
+        justify-content center
+        margin 0
+        left var(--padding-switch, 2px)
+        top var(--padding-switch, 2px)
+        bottom var(--padding-switch, 2px)
+        width var(--size-switch-mover)
+        height @width
+        transition all .5s
+    input.{prefix}-input[type=checkbox]
+        opacity 0
+        z-index 2
+        ~/[data-wider-trigger] ^[-1..-1]
+            inset 0 !important
+            width @width
+            height @height
+
+        ^[-1..-1]:focus-visible~^[0]-mover
+            outline 2px solid _rgb(var(--outline-color-focus))
+        
         &:disabled
+        ^[-1..-1]:disabled~^[0]-mover
             cursor not-allowed
+        ^[-1..-1]:disabled~^[0]-slot
+            background-color _rgb(var(--color-switch-disabled, var(--gray-3)))
+        ^[-1..-1]:checked:disabled~^[0]-slot
+            background-color _rgb(var(--color-switch-checked-disabled, var(--primary-3)))
+        
+        &:checked
+        ^[-1..-1]:checked~^[0]-mover
+            left calc(var(--size-switch, 22px) + var(--padding-switch, 2px))
+        ^[-1..-1]:checked~^[0]-slot
+            background-color _rgb(var(--color-switch-checked, var(--primary-6)))
 
-        ~/-mover
-            &:not([for])
-                pointer-events none
-            display inline-flex
-            cursor pointer
-            height var(--size-switch, 22px)
-            width calc(var(--size-switch, 22px) * 2)
-            ^[1..1]:focus-visible+&
-                outline 2px solid _rgb(var(--outline-color-focus))
-            border-radius calc((var(--size-switch, 22px) / 2))
-            background-color _rgb(var(--color-switch, var(--gray-4)))
-            transition background-color 1s, box-shadow .5s
-            /**
-             * 使用 `^[1..1]` 代替 `../` 减少编译后体积以及选择器冗余
-             */
-            ^[1..1]:checked+&
-                background-color _rgb(var(--color-switch-checked, var(--primary-6)))
-            ^[1..1]:checked:disabled+&
-                background-color _rgb(var(--color-switch-checked-disabled, var(--primary-3)))
-            ^[1..1]:disabled+&
-                background-color _rgb(var(--color-switch-disabled, var(--gray-3)))
-                cursor not-allowed
-            
-            &:empty::before, &>*
-                content ''
-                display flex
-                align-items center
-                justify-content center
-                position absolute
-                z-index 1
-                left var(--padding-switch, 2px)
-                top var(--padding-switch, 2px)
-                bottom var(--padding-switch, 2px)
-                width var(--size-switch-mover)
-                height @width
-                overflow hidden
-                border-radius 50%
-                background-color _rgb(var(--color-switch-mover, var(--gray-1)))
-                transition all .5s
-                will-change filter
-            
-                ^[1..1]:checked+&
-                    left calc(var(--size-switch, 22px) + var(--padding-switch, 2px))
-                    
-
-
-
-            ^[1..1]:not(:disabled)+&:hover
-                box-shadow \
-                    inset \
-                    0 \
-                    0 \
-                    var(--padding-switch, 2px) \
-                    var(--padding-switch, 2px) \
+        &:not(:disabled):hover~^[0]-mover
+        ^[-1..-1]:not(:disabled)~^[0]-mover:hover
+            filter drop-shadow(
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                    _rgb(box-shadow-color-switch) \
+            )
+            box-shadow \
+                0 \
+                0 \
+                box-shadow-width-switch \
+                box-shadow-width-switch \
                     _rgb(box-shadow-color-switch \/ 25%)
-                &:empty::before, &>*
-                    filter drop-shadow(
-                        0 \
-                        0 \
-                        var(--padding-switch, 2px) \
-                         _rgb(box-shadow-color-switch) \
-                    )
-                    box-shadow \
-                        0 \
-                        0 \
-                        box-shadow-width-switch \
-                        box-shadow-width-switch \
-                         _rgb(box-shadow-color-switch \/ 25%)
-            
-
-
-            ^[1..1]:not(:disabled):checked+&:hover
-                box-shadow \
-                    inset \
-                    0 \
-                    0 \
-                    var(--padding-switch, 2px) \
-                    var(--padding-switch, 2px) \
-                    _rgb(box-shadow-color-switch-checked \/ 25%)
-                &:empty::before, &>*
-                    filter drop-shadow(
-                        0 \
-                        0 \
-                        var(--padding-switch, 2px) \
-                        _rgb(box-shadow-color-switch-checked) \
-                    )
-                    box-shadow \
-                        0 \
-                        0 \
-                        box-shadow-width-switch \
-                        box-shadow-width-switch \
-                        _rgb(box-shadow-color-switch-checked \/ 25%)
+        &:not(:disabled):hover~^[0]-slot
+        ^[-1..-1]:not(:disabled)~^[0]-slot:hover
+            box-shadow \
+                inset \
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                var(--padding-switch, 2px) \
+                _rgb(box-shadow-color-switch \/ 25%)
+        
+        &:not(:disabled):checked:hover~^[0]-mover
+        ^[-1..-1]:not(:disabled):checked~^[0]-mover:hover
+            filter drop-shadow(
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                _rgb(box-shadow-color-switch-checked) \
+            )
+            box-shadow \
+                0 \
+                0 \
+                box-shadow-width-switch \
+                box-shadow-width-switch \
+                _rgb(box-shadow-color-switch-checked \/ 25%)
+        &:not(:disabled):checked:hover~^[0]-slot
+        ^[-1..-1]:not(:disabled):checked~^[0]-slot:hover
+            box-shadow \
+                inset \
+                0 \
+                0 \
+                var(--padding-switch, 2px) \
+                var(--padding-switch, 2px) \
+                _rgb(box-shadow-color-switch-checked \/ 25%)
diff --git a/src/pages/menu/button.mdx b/src/pages/menu/button.mdx
index 5b0cde67..3ce50b35 100644
--- a/src/pages/menu/button.mdx
+++ b/src/pages/menu/button.mdx
@@ -122,7 +122,7 @@ button.☘-button(title="关机" data-primary="danger" style={
 
 配合 `input[type=file].☘-input` 使用即可
 
-上传按钮并**不捆绑** `<label>` ，默认情况下label被点击时也会触发系统文件选择
+上传按钮并**不捆绑** `<label>` ，绑定`[for]`时label被点击时也会触发系统文件选择
 
 <T
     tag="input"
diff --git a/src/pages/menu/form/checkbox.mdx b/src/pages/menu/form/checkbox.mdx
index 33567d00..2761390e 100644
--- a/src/pages/menu/form/checkbox.mdx
+++ b/src/pages/menu/form/checkbox.mdx
@@ -23,7 +23,7 @@ span.☘-checkbox(style="--indent-checkbox: 2em")
     label.☘-checkbox-label(for="hello") world
 ```
 
-注意，checkbox**捆绑**了 `<label>` ，你必须携带它，默认情况下label被点击时也会触发选择或反选
+注意，checkbox**捆绑**了 `<label>` ，你必须携带它，绑定`[for]`时label被点击时也会触发选择或反选
 
 ## `disabled`
 
diff --git a/src/pages/menu/form/radio.mdx b/src/pages/menu/form/radio.mdx
index cad799e8..643d2669 100644
--- a/src/pages/menu/form/radio.mdx
+++ b/src/pages/menu/form/radio.mdx
@@ -28,7 +28,7 @@ div(style="--indent-radio: 20px")
         label.☘-radio-label(for="kotlin") Kotlin
 ```
 
-注意，radio**捆绑**了 `<label>` ，你必须携带它，默认情况下label被点击时也会触发选择或反选
+注意，radio**捆绑**了 `<label>` ，你必须携带它，绑定`[for]`时label被点击时也会触发选择或反选
 
 ## `disabled`
 
diff --git a/src/pages/menu/form/switch.mdx b/src/pages/menu/form/switch.mdx
index 0280c4f3..f814aae6 100644
--- a/src/pages/menu/form/switch.mdx
+++ b/src/pages/menu/form/switch.mdx
@@ -5,53 +5,93 @@ title: 开关
 
 import Switch from "src/components/switch/index.astro";
 import OxalisSwitch from "src/components/switch/oxalis.astro";
+import T from "src/components/T.astro";
 export * from 'src/components/markdown/map.mdx';
 
 
 # switch
 
-
-<Switch id="hello" checked />
+<Switch title="hello" checked />
 
 ```pug
 span.☘-switch
-    input#hello.☘-input(type="checkbox" checked)
-    label.☘-switch-mover(for="hello" title="hello")
+    input.☘-input(type="checkbox" title="hello" checked)
+    i.☘-switch-mover
+    span.☘-switch-slot
 ```
 
-注意，switch**捆绑**了 `<label for="id">` ，你必须携带它，且传入for属性
+注意，switch**不捆绑**`<label>` 标签，但是需要跟随：
+
+- `.☘-switch-mover` 动子
+- `.☘-switch-slot` 滑槽
 
-如果不传入 `[for]`，由于层级问题，开关将会失去鼠标移入的阴影效果，如果你能接受
+事实上，它们其中之一可以被换成 `<label>`，滑槽被换掉能让你点击整个开关的时候也触发切换
 
 
 ## `.sm`
 
-<Switch id="small" class="sm"/>
+<Switch title="small" class="sm"/>
 
 ```pug
 span.☘-switch.sm
-    input#small.☘-input(type="checkbox")
-    label.☘-switch-mover(for="small" title="small")
+    input.☘-input(type="checkbox" title="small")
+    i.☘-switch-mover
+    span.☘-switch-slot
 ```
 
 
 ## `disabled`
 
-<Switch id="hibit" checked disabled/>
-<Switch id="small-hibit" class="sm" disabled/>
+<Switch title="hibit" checked disabled/>
+<Switch title="small-hibit" class="sm" disabled/>
 
 ```pug
 span.☘-switch
-    input#hibit.☘-input(type="checkbox" checked disabled)
-    label.☘-switch-mover(for="hibit" title="hibit")
+    input.☘-input(
+        type="checkbox"
+        title="hibit"
+        checked disabled
+    )
+    i.☘-switch-mover
+    span.☘-switch-slot
 span.☘-switch.sm
-    input#small-hibit.☘-input(type="checkbox" disabled)
-    label.☘-switch-mover(for="small-hibit" title="small-hibit")
+    input.☘-input(
+        type="checkbox"
+        title="small-hibit"
+        disabled
+    )
+    i.☘-switch-mover
+    span.☘-switch-slot
 ```
 
+
+## `data-wider-trigger`
+
+默认情况下**点击动子才能切换**开关。如果你不想借助 `label.☘-switch-slot[for=#id]`，
+
+可以添加 `[data-wider-trigger]` 属性，届时点击开关整体时也可以被切换，达到一样的效果。
+
+<Switch 
+    title="wider trigger conditions"
+    dataset={{"wider-trigger": true}}
+    checked
+/>
+
+```pug
+span.☘-switch(data-wider-trigger)
+    input.☘-input(
+        type="checkbox"
+        title="wider trigger conditions"
+        checked
+    )
+    i.☘-switch-mover
+    span.☘-switch-slot
+```
+
+
 ## custom style
 
-**动子（ `label.☘-switch-mover>*` ）** 可以设置为一个字符/icon
+动子里可以放置字符/icon，也可以有多个动子
 
 - 全局变量 `--box-shadow-width-switch` 可以修改阴影效果范围（默认值为全局变量 `--padding-switch` ，见下 ）
 
@@ -67,11 +107,12 @@ span.☘-switch.sm
 
 描述中的占点主题色就会被 `[data-primary]` 影响
 
-<Switch id="fire" dataset={{ primary : "danger" }} style={{
+<Switch title="fire" dataset={{ primary : "danger" }} style={{
     "--box-shadow-width-switch": "16px",
     "--box-shadow-color-switch-checked": "var(--blue-5)"
 }}>
-    <span>🔥</span>
+    <T class="☘-switch-mover">🔥</T>
+    <T class="☘-switch-slot"/>
 </Switch>
 
 ```pug
@@ -79,9 +120,9 @@ span.☘-switch(data-primary="danger" style={
     "--box-shadow-width-switch": "16px",
     "--box-shadow-color-switch-checked": "var(--blue-5)"
 })
-    input#fire.☘-input(type="checkbox")
-    label.☘-switch-mover(for="fire" title="fire")
-        span 🔥
+    input.☘-input(type="checkbox" title="fire")
+    div.☘-switch-mover 🔥
+    div.☘-switch-slot
 ```
 
 ***
@@ -101,12 +142,11 @@ span.☘-switch.oxalis-switch(
         ["--color-switch"]: "var(--gold-3)",
     }
 )
-    input#oxalis.☘-input(type="checkbox" name="oxalis" checked)
-    label.☘-switch-mover(for="oxalis" title="oxalis")
-        span.oxalis-switch-mover \☘
+    input#oxalis.☘-input(type="checkbox" title="oxalis")
+    span.☘-switch-mover.oxalis-switch-mover \☘
+    lable.☘-switch-slot(for="oxalis")
 
 style(lang="stylus").
-    .oxalis-switch>input:checked+label
-        .oxalis-switch-mover
-            transform rotate(360deg)
+    .oxalis-switch>input:checked+.oxalis-switch-mover
+        transform rotate(360deg)
 ```
\ No newline at end of file