From 21e3d6e455ad54908e625e44577d530bd2c7f867 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Mon, 18 Aug 2025 11:27:04 +0800
Subject: [PATCH 1/9] feat: ColorPicker adds disabled prop

---
 thaw/src/color_picker/color-picker.css |  4 ++++
 thaw/src/color_picker/docs/mod.md      | 23 ++++++++++++++++++-----
 thaw/src/color_picker/mod.rs           |  7 +++++++
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/thaw/src/color_picker/color-picker.css b/thaw/src/color_picker/color-picker.css
index 15378ad0..18ccf705 100644
--- a/thaw/src/color_picker/color-picker.css
+++ b/thaw/src/color_picker/color-picker.css
@@ -28,6 +28,10 @@
     height: 100%;
 }
 
+.thaw-color-picker-trigger--disabled {
+    cursor: not-allowed;
+}
+
 div.thaw-color-picker-popover {
     width: 240px;
     padding: var(--spacingVerticalM) var(--spacingHorizontalM);
diff --git a/thaw/src/color_picker/docs/mod.md b/thaw/src/color_picker/docs/mod.md
index d352c1c7..9925d486 100644
--- a/thaw/src/color_picker/docs/mod.md
+++ b/thaw/src/color_picker/docs/mod.md
@@ -46,10 +46,23 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+use palette::Srgb;
+
+let value = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0)));
+
+view! {
+    <ColorPicker value disabled=true />
+}
+```
+
 ### ColorPicker Props
 
-| Name  | Type                      | Default                   | Desciption           |
-| ----- | ------------------------- | ------------------------- | -------------------- |
-| class | `MaybeProp<String>`       | `Default::default()`      |                      |
-| value | `Model<Color>`            | `Default::default()`      | Value of the picker. |
-| size  | `Signal<ColorPickerSize>` | `ColorPickerSize::Medium` | Size of the picker.  |
+| Name     | Type                      | Default                   | Desciption                           |
+| -------- | ------------------------- | ------------------------- | ------------------------------------ |
+| class    | `MaybeProp<String>`       | `Default::default()`      |                                      |
+| disabled | `Signal<bool>`            | `false`                   | Whether to disable the color picker. |
+| value    | `Model<Color>`            | `Default::default()`      | Value of the picker.                 |
+| size     | `Signal<ColorPickerSize>` | `ColorPickerSize::Medium` | Size of the picker.                  |
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
index 43b7d9e0..37192088 100644
--- a/thaw/src/color_picker/mod.rs
+++ b/thaw/src/color_picker/mod.rs
@@ -19,6 +19,9 @@ pub fn ColorPicker(
     /// Size of the picker.
     #[prop(optional, into)]
     size: Signal<ColorPickerSize>,
+    /// Whether to disable the color picker.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
 ) -> impl IntoView {
     mount_style("color-picker", include_str!("./color-picker.css"));
     let hue = RwSignal::new(0f32);
@@ -104,6 +107,9 @@ pub fn ColorPicker(
     let trigger_ref = NodeRef::<html::Div>::new();
     let popover_ref = NodeRef::<html::Div>::new();
     let show_popover = move |_| {
+        if disabled.get() {
+            return;
+        }
         is_show_popover.set(true);
     };
 
@@ -140,6 +146,7 @@ pub fn ColorPicker(
             <div
                 class=class_list![
                     "thaw-color-picker-trigger",
+                    ("thaw-color-picker-trigger--disabled", move || disabled.get()),
                     move || format!("thaw-color-picker-trigger--{}", size.get().as_str()),
                     class
                 ]

From ae523869069ef17b2e0ee1c98f934ff7747d9ac7 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Mon, 18 Aug 2025 14:06:13 +0800
Subject: [PATCH 2/9] feat: DatePicker adds disabled prop

---
 thaw/src/date_picker/docs/mod.md | 9 +++++++++
 thaw/src/date_picker/mod.rs      | 7 +++++++
 thaw/src/input/input.css         | 2 ++
 3 files changed, 18 insertions(+)

diff --git a/thaw/src/date_picker/docs/mod.md b/thaw/src/date_picker/docs/mod.md
index 7d10db1b..3dcfe605 100644
--- a/thaw/src/date_picker/docs/mod.md
+++ b/thaw/src/date_picker/docs/mod.md
@@ -25,12 +25,21 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+view! {
+    <DatePicker disabled=true/>
+}
+```
+
 ### DatePicker Props
 
 | Name | Type | Default | Desciption |
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether the date picker is disabled. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | rules | `Vec<DatePickerRule<T>>` | `vec![]` | The rules to validate Field. |
 | value | `OptionModel<NaiveDate>` | `Default::default()` | Set the date picker value. |
diff --git a/thaw/src/date_picker/mod.rs b/thaw/src/date_picker/mod.rs
index 11fd894c..d3c35b9a 100644
--- a/thaw/src/date_picker/mod.rs
+++ b/thaw/src/date_picker/mod.rs
@@ -18,6 +18,9 @@ use thaw_utils::{
 pub fn DatePicker(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] id: MaybeProp<String>,
+    /// Whether the date picker is disabled.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
     /// A string specifying a name for the input control.
     /// This name is submitted along with the control's value when the form data is submitted.
     #[prop(optional, into)]
@@ -92,6 +95,9 @@ pub fn DatePicker(
     };
 
     let open_panel = move || {
+        if disabled.get() {
+            return;
+        }
         if is_show_panel.get() {
             return;
         }
@@ -112,6 +118,7 @@ pub fn DatePicker(
                 <Input
                     id
                     name
+                    disabled
                     value=show_date_text
                     on_focus=move |_| open_panel()
                     size=Signal::derive(move || size.get().into())
diff --git a/thaw/src/input/input.css b/thaw/src/input/input.css
index b3da1444..57cc45ff 100644
--- a/thaw/src/input/input.css
+++ b/thaw/src/input/input.css
@@ -166,6 +166,8 @@
     cursor: not-allowed;
 }
 
+.thaw-input--disabled > .thaw-input__prefix,
+.thaw-input--disabled > .thaw-input__suffix,
 .thaw-input--disabled > .thaw-input__input::placeholder {
     color: var(--colorNeutralForegroundDisabled);
 }

From 53abe1ced7f1f2d2c0f80e33f7c2383ecceab7d4 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Mon, 18 Aug 2025 14:52:15 +0800
Subject: [PATCH 3/9] feat: RadioGroup adds disabled prop

---
 thaw/src/radio/docs/mod.md    | 14 ++++++++++++++
 thaw/src/radio/mod.rs         |  1 +
 thaw/src/radio/radio.css      | 14 ++++++++++++--
 thaw/src/radio/radio_group.rs |  7 ++++++-
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/thaw/src/radio/docs/mod.md b/thaw/src/radio/docs/mod.md
index bf61d8c9..f0470a39 100644
--- a/thaw/src/radio/docs/mod.md
+++ b/thaw/src/radio/docs/mod.md
@@ -24,6 +24,19 @@ view! {
 }
 ```
 
+## Disabled
+
+RadioGroup can be disabled, which disables all Radio items inside.
+
+```rust demo
+view! {
+    <RadioGroup value="a".to_string() disabled=true>
+        <Radio value="a" label="Apple"/>
+        <Radio value="o" label="Orange"/>
+    </RadioGroup>
+}
+```
+
 ### Radio Props
 
 | Name  | Type                | Default              | Description                                         |
@@ -38,6 +51,7 @@ view! {
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Disable all Radio items in this group. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | rules | `Vec<RadioGroupRule>` | `vec![]` | The rules to validate Field. |
 | value | `OptionModel<String>` | `Default::default()` | The selected Radio item in this group. |
diff --git a/thaw/src/radio/mod.rs b/thaw/src/radio/mod.rs
index 2e58cf07..35ef36f2 100644
--- a/thaw/src/radio/mod.rs
+++ b/thaw/src/radio/mod.rs
@@ -44,6 +44,7 @@ pub fn Radio(
                 class="thaw-radio__input"
                 type="radio"
                 id=id.clone()
+                disabled=group.disabled
                 name=group.name
                 value=item_value.get_value()
                 prop:checked=move || checked.get()
diff --git a/thaw/src/radio/radio.css b/thaw/src/radio/radio.css
index 509ce67b..5aecbdf1 100644
--- a/thaw/src/radio/radio.css
+++ b/thaw/src/radio/radio.css
@@ -50,11 +50,11 @@
     color: var(--colorCompoundBrandForeground1);
 }
 
-.thaw-radio__input:hover:checked ~ .thaw-radio__indicator {
+.thaw-radio__input:hover:checked:not(:disabled) ~ .thaw-radio__indicator {
     color: var(--colorCompoundBrandForeground1Hover);
 }
 
-.thaw-radio__input:hover:active ~ .thaw-radio__indicator {
+.thaw-radio__input:hover:active:not(:disabled) ~ .thaw-radio__indicator {
     color: var(--colorCompoundBrandForeground1Pressed);
 }
 
@@ -71,6 +71,11 @@
     content: "";
 }
 
+.thaw-radio__input:disabled ~ .thaw-radio__indicator {
+    border-color: var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+}
+
 .thaw-radio__label {
     margin-bottom: calc((16px - var(--lineHeightBase300)) / 2);
     margin-top: calc((16px - var(--lineHeightBase300)) / 2);
@@ -100,3 +105,8 @@
 .thaw-radio__input:enabled ~ .thaw-radio__label {
     cursor: pointer;
 }
+
+.thaw-radio__input:disabled ~ .thaw-radio__label {
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: default;
+}
diff --git a/thaw/src/radio/radio_group.rs b/thaw/src/radio/radio_group.rs
index d65bc17e..54f20f28 100644
--- a/thaw/src/radio/radio_group.rs
+++ b/thaw/src/radio/radio_group.rs
@@ -7,6 +7,10 @@ use thaw_utils::{class_list, OptionModel};
 pub fn RadioGroup(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] id: MaybeProp<String>,
+    /// Disable all Radio items in this group.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
+    /// The rules to validate Field.
     #[prop(optional, into)] rules: Vec<RadioGroupRule>,
     /// The selected Radio item in this group.
     #[prop(optional, into)]
@@ -32,7 +36,7 @@ pub fn RadioGroup(
     });
 
     view! {
-        <Provider value=RadioGroupInjection { value, name }>
+        <Provider value=RadioGroupInjection { value, name, disabled }>
             <div class=class_list!["thaw-radio-group", class] id=id role="radiogroup">
                 {children()}
             </div>
@@ -44,6 +48,7 @@ pub fn RadioGroup(
 pub(crate) struct RadioGroupInjection {
     pub value: OptionModel<String>,
     pub name: Signal<String>,
+    pub disabled: Signal<bool>,
 }
 
 impl RadioGroupInjection {

From 2b21ac07360ebdc7bc3329eaf9ad588856efb024 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Tue, 19 Aug 2025 14:34:32 +0800
Subject: [PATCH 4/9] feat: Slider adds disabled prop

---
 thaw/src/slider/docs/mod.md                   | 26 +++++++++++++++++++
 thaw/src/slider/docs/range-slider.md          | 26 ++++++++++++++++++-
 thaw/src/slider/range_slider/mod.rs           | 17 +++++++++++-
 thaw/src/slider/range_slider/range-slider.css | 22 ++++++++++++++++
 thaw/src/slider/slider/mod.rs                 |  5 ++++
 thaw/src/slider/slider/slider.css             | 11 ++++++++
 6 files changed, 105 insertions(+), 2 deletions(-)

diff --git a/thaw/src/slider/docs/mod.md b/thaw/src/slider/docs/mod.md
index acbcdc1c..ab19f9f7 100644
--- a/thaw/src/slider/docs/mod.md
+++ b/thaw/src/slider/docs/mod.md
@@ -31,6 +31,31 @@ view! {
 }
 ```
 
+### Disabled
+
+A disabled slider will not change or fire events on click or keyboard press.
+
+```rust demo
+let value = RwSignal::new(0.0);
+
+view! {
+    <Flex vertical=true inline=true>
+        <Slider value disabled=true />
+        <Slider value max=10.0 step=5.0 disabled=true>
+            <SliderLabel value=0.0>
+                "0"
+            </SliderLabel>
+            <SliderLabel value=5.0>
+                "5"
+            </SliderLabel>
+            <SliderLabel value=10.0>
+                "10"
+            </SliderLabel>
+        </Slider>
+    </Flex>
+}
+```
+
 ## Slider Label
 
 ```rust demo
@@ -58,6 +83,7 @@ view! {
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | style | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether the slider is disabled. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | rules | `Vec<InputRule>` | `vec![]` | The rules to validate Field. |
 | value | `Model<f64>` | `0` | The current value of the controlled Slider. |
diff --git a/thaw/src/slider/docs/range-slider.md b/thaw/src/slider/docs/range-slider.md
index 78d35969..d3873bf6 100644
--- a/thaw/src/slider/docs/range-slider.md
+++ b/thaw/src/slider/docs/range-slider.md
@@ -34,13 +34,36 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+let value = RwSignal::new((6.0, 8.0));
+
+view! {
+    <Flex vertical=true inline=true>
+        <RangeSlider value step=5.0 disabled=true style="width: 400px"/>
+        <RangeSlider value max=10.0 step=5.0 disabled=true style="width: 400px" >
+            <SliderLabel value=0.0>
+                "0"
+            </SliderLabel>
+            <SliderLabel value=5.0>
+                "5"
+            </SliderLabel>
+            <SliderLabel value=10.0>
+                "10"
+            </SliderLabel>
+        </RangeSlider>
+    </Flex>
+}
+```
+
 ### SliderLabel
 
 ```rust demo
 let value = RwSignal::new((0.0, 1.0));
 
 view! {
-    <RangeSlider value max=10.0 step=5.0  style="width: 400px" >
+    <RangeSlider value max=10.0 step=5.0 style="width: 400px" >
         <SliderLabel value=0.0>
             "0"
         </SliderLabel>
@@ -60,6 +83,7 @@ view! {
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | style | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether the slider is disabled. |
 | value | `Model<(f64, f64)>` | `(0.0, 0.0)` | The current value of the controlled Slider. |
 | min | `Signal<f64>` | `0` | Min value of the slider. |
 | max | `Signal<f64>` | `100` | Max value of the slider. |
diff --git a/thaw/src/slider/range_slider/mod.rs b/thaw/src/slider/range_slider/mod.rs
index f67d3b9f..521d291e 100644
--- a/thaw/src/slider/range_slider/mod.rs
+++ b/thaw/src/slider/range_slider/mod.rs
@@ -7,7 +7,12 @@ use thaw_utils::{class_list, mount_style, Model};
 pub fn RangeSlider(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] style: MaybeProp<String>,
-    #[prop(optional, into)] value: Model<(f64, f64)>,
+    /// Whether the slider is disabled.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
+    /// The current value of the controlled Slider.
+    #[prop(optional, into)]
+    value: Model<(f64, f64)>,
     /// Min value of the slider.
     #[prop(default = 0f64.into(), into)]
     min: Signal<f64>,
@@ -111,6 +116,9 @@ pub fn RangeSlider(
     };
 
     let on_click = move |e: web_sys::MouseEvent| {
+        if disabled.get() {
+            return;
+        }
         if let Some(rail_el) = rail_ref.get_untracked() {
             let min = min.get_untracked();
             let max = max.get_untracked();
@@ -210,11 +218,17 @@ pub fn RangeSlider(
     };
 
     let on_left_mousedown = move |_| {
+        if disabled.get() {
+            return;
+        }
         left_mousemove.set_value(true);
         on_mousemove();
     };
 
     let on_right_mousedown = move |_| {
+        if disabled.get() {
+            return;
+        }
         right_mousemove.set_value(true);
         on_mousemove();
     };
@@ -225,6 +239,7 @@ pub fn RangeSlider(
         <div
             class=class_list![
                 "thaw-range-slider",
+                ("thaw-range-slider--disabled", move || disabled.get()),
                 move || format!("thaw-range-slider--{}", if vertical.get() { "vertical" } else { "horizontal" }),
                 class
             ]
diff --git a/thaw/src/slider/range_slider/range-slider.css b/thaw/src/slider/range_slider/range-slider.css
index daf84b71..87008da8 100644
--- a/thaw/src/slider/range_slider/range-slider.css
+++ b/thaw/src/slider/range_slider/range-slider.css
@@ -55,6 +55,19 @@
     height: 100%;
 }
 
+.thaw-range-slider--disabled .thaw-range-slider__rail {
+    background-image: linear-gradient(
+        var(--thaw-slider--direction),
+        var(--colorNeutralBackgroundDisabled) 0%
+            var(--thaw-range-slider--left-progress),
+        var(--colorNeutralForegroundDisabled)
+            var(--thaw-range-slider--left-progress)
+            var(--thaw-range-slider--right-progress),
+        var(--colorNeutralBackgroundDisabled)
+            var(--thaw-range-slider--right-progress) 100%
+    );
+}
+
 .thaw-range-slider__rail::before {
     content: "";
     position: absolute;
@@ -115,6 +128,10 @@
     background-color: var(--colorCompoundBrandBackgroundPressed);
 }
 
+.thaw-range-slider--disabled .thaw-range-slider__thumb {
+    background-color: var(--colorNeutralForegroundDisabled);
+}
+
 .thaw-range-slider__thumb::before {
     content: "";
     position: absolute;
@@ -132,6 +149,7 @@
 .thaw-range-slider__datalist {
     display: block;
     position: absolute;
+    color: var(--colorNeutralForeground1);
 }
 
 .thaw-range-slider--horizontal .thaw-range-slider__datalist {
@@ -143,3 +161,7 @@
     height: 100%;
     left: calc(var(--thaw-slider__thumb--size) + 4px);
 }
+
+.thaw-range-slider--disabled .thaw-slider-label {
+    color: var(--colorNeutralForegroundDisabled);
+}
\ No newline at end of file
diff --git a/thaw/src/slider/slider/mod.rs b/thaw/src/slider/slider/mod.rs
index de1b7481..52b41fef 100644
--- a/thaw/src/slider/slider/mod.rs
+++ b/thaw/src/slider/slider/mod.rs
@@ -12,6 +12,9 @@ pub fn Slider(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] style: MaybeProp<String>,
     #[prop(optional, into)] id: MaybeProp<String>,
+    /// Whether the slider is disabled.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
     /// A string specifying a name for the input control.
     /// This name is submitted along with the control's value when the form data is submitted.
     #[prop(optional, into)]
@@ -106,12 +109,14 @@ pub fn Slider(
         <div
             class=class_list![
                 "thaw-slider",
+                ("thaw-slider--disabled", move || disabled.get()),
                 move || format!("thaw-slider--{}", if vertical.get() { "vertical" } else { "horizontal" }),
                 class
             ]
             style=css_vars
         >
             <input
+                disabled=move || disabled.get()
                 min=move || min.get()
                 max=move || max.get()
                 step=move || step.get()
diff --git a/thaw/src/slider/slider/slider.css b/thaw/src/slider/slider/slider.css
index c372e8df..d121f1ed 100644
--- a/thaw/src/slider/slider/slider.css
+++ b/thaw/src/slider/slider/slider.css
@@ -37,6 +37,12 @@
     --thaw-slider__thumb--color: var(--colorCompoundBrandBackgroundPressed);
 }
 
+.thaw-slider.thaw-slider--disabled {
+    --thaw-slider__thumb--color: var(--colorNeutralForegroundDisabled);
+    --thaw-slider__progress--color: var(--colorNeutralForegroundDisabled);
+    --thaw-slider__rail--color: var(--colorNeutralBackgroundDisabled);
+}
+
 /* .thaw-slider:focus,
 .thaw-slider:focus-visible {
     outline-style: none;
@@ -181,6 +187,7 @@
 .thaw-slider__datalist {
     display: block;
     position: absolute;
+    color: var(--colorNeutralForeground1);
 }
 
 .thaw-slider--horizontal .thaw-slider__datalist {
@@ -192,3 +199,7 @@
     height: 100%;
     left: calc(var(--thaw-slider__thumb--size) + 4px);
 }
+
+.thaw-slider--disabled .thaw-slider__datalist {
+    color: var(--colorNeutralForegroundDisabled);
+}

From 0aeac726af6d0faf2d58b68f7c663cc7dd925c01 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Tue, 19 Aug 2025 15:43:30 +0800
Subject: [PATCH 5/9] feat: Switch adds disabled prop

---
 thaw/src/switch/docs/mod.md | 24 ++++++++++++++++++++++++
 thaw/src/switch/mod.rs      |  4 ++++
 thaw/src/switch/switch.css  | 22 ++++++++++++++++++++++
 thaw/src/theme/color.rs     |  4 ++++
 4 files changed, 54 insertions(+)

diff --git a/thaw/src/switch/docs/mod.md b/thaw/src/switch/docs/mod.md
index 910f9faa..6bc2c3fd 100644
--- a/thaw/src/switch/docs/mod.md
+++ b/thaw/src/switch/docs/mod.md
@@ -8,12 +8,36 @@ view! {
 }
 ```
 
+### Disabled
+
+A Switch can be disabled.
+
+```rust demo
+view! {
+    <Flex vertical=true inline=true>
+        <Switch disabled=true label="Unchecked and disabled" />
+        <Switch checked=true disabled=true label="Checked and disabled" />
+    </Flex>
+}
+```
+
+### Label
+
+```rust demo
+let checked = RwSignal::new(false);
+
+view! {
+    <Switch checked label="Label" />
+}
+```
+
 ### Switch Props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether to disable the switch. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | value | `MaybeProp<String>` | `Default::default()` | A string specifying the value for the input control. |
 | rules | `Vec<SwitchRule>` | `vec![]` | The rules to validate Field. |
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index e1f5b14f..575e7c8e 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -7,6 +7,9 @@ use thaw_utils::{class_list, mount_style, Model};
 pub fn Switch(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] id: MaybeProp<String>,
+    /// Whether to disable the switch.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
     /// A string specifying a name for the input control.
     /// This name is submitted along with the control's value when the form data is submitted.
     #[prop(optional, into)]
@@ -48,6 +51,7 @@ pub fn Switch(
         <div class=class_list!["thaw-switch", class]>
             <input
                 class="thaw-switch__input"
+                disabled=move || disabled.get()
                 role="switch"
                 type="checkbox"
                 id=id
diff --git a/thaw/src/switch/switch.css b/thaw/src/switch/switch.css
index 79de0b76..923d55d6 100644
--- a/thaw/src/switch/switch.css
+++ b/thaw/src/switch/switch.css
@@ -17,6 +17,10 @@
     cursor: pointer;
 }
 
+.thaw-switch__input:disabled {
+    cursor: default;
+}
+
 .thaw-switch__indicator {
     flex-shrink: 0;
     width: 40px;
@@ -53,6 +57,19 @@
     background-color: var(--colorCompoundBrandBackgroundPressed);
 }
 
+.thaw-switch__input:disabled:not(:checked) ~ .thaw-switch__indicator {
+    border-color: var(--colorNeutralStrokeDisabled);
+}
+
+.thaw-switch__input:disabled:checked ~ .thaw-switch__indicator {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border-color: var(--colorTransparentStrokeDisabled);
+}
+
+.thaw-switch__input:disabled ~ .thaw-switch__indicator {
+    color: var(--colorNeutralForegroundDisabled);
+}
+
 .thaw-switch__indicator > svg {
     display: inline;
     line-height: 0;
@@ -81,3 +98,8 @@
 .thaw-switch__input:enabled:not(:checked) ~ .thaw-switch__label {
     color: var(--colorNeutralForeground1);
 }
+
+.thaw-switch__input:disabled ~ .thaw-switch__label {
+    cursor: default;
+    color: var(--colorNeutralForegroundDisabled);
+}
\ No newline at end of file
diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs
index a906c3b0..7513ff7a 100644
--- a/thaw/src/theme/color.rs
+++ b/thaw/src/theme/color.rs
@@ -117,10 +117,12 @@ pub struct ColorTheme {
     color_subtle_background: String,
     color_subtle_background_hover: String,
     color_subtle_background_pressed: String,
+
     color_transparent_background: String,
     color_transparent_background_hover: String,
     color_transparent_background_pressed: String,
     color_transparent_stroke: String,
+    color_transparent_stroke_disabled: String,
 
     shadow4: String,
     shadow8: String,
@@ -318,6 +320,7 @@ impl ColorTheme {
             color_transparent_background_hover: "transparent".into(),
             color_transparent_background_pressed: "transparent".into(),
             color_transparent_stroke: "transparent".into(),
+            color_transparent_stroke_disabled: "transparent".into(),
 
             shadow4: "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)".into(),
             shadow8: "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)".into(),
@@ -445,6 +448,7 @@ impl ColorTheme {
             color_transparent_background_hover: "transparent".into(),
             color_transparent_background_pressed: "transparent".into(),
             color_transparent_stroke: "transparent".into(),
+            color_transparent_stroke_disabled: "transparent".into(),
 
             shadow4: "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)".into(),
             shadow8: "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)".into(),

From 8ff783d69d350f1755eeb8922e28307d7548d0ae Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Tue, 19 Aug 2025 16:11:28 +0800
Subject: [PATCH 6/9] feat: TimePicker adds disabled prop

---
 thaw/src/time_picker/docs/mod.md | 21 ++++++++++++++++++---
 thaw/src/time_picker/mod.rs      |  7 +++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/thaw/src/time_picker/docs/mod.md b/thaw/src/time_picker/docs/mod.md
index 9c39e034..53287876 100644
--- a/thaw/src/time_picker/docs/mod.md
+++ b/thaw/src/time_picker/docs/mod.md
@@ -7,10 +7,24 @@ let value = RwSignal::new(Local::now().time());
 let option_value = RwSignal::new(Local::now().time());
 
 view! {
-    <Space vertical=true>
+    <Flex vertical=true inline=true>
         <TimePicker value />
         <TimePicker value=option_value />
-    </Space>
+    </Flex>
+}
+```
+
+### Disabled
+
+```rust demo
+use chrono::prelude::*;
+let value = RwSignal::new(Local::now().time());
+
+view! {
+    <Flex vertical=true inline=true>
+        <TimePicker disabled=true />
+        <TimePicker value disabled=true />
+    </Flex>
 }
 ```
 
@@ -18,7 +32,7 @@ view! {
 
 ```rust demo
 view! {
-    <Flex vertical=true>
+    <Flex vertical=true inline=true>
         <TimePicker size=TimePickerSize::Small/>
         <TimePicker />
         <TimePicker size=TimePickerSize::Large/>
@@ -32,6 +46,7 @@ view! {
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether time picker is disabled. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | rules | `Vec<TimePickerRule>` | `vec![]` | The rules to validate Field. |
 | value | `OptionModel<NaiveTime>` | `Default::default()` | Set the TimePicker value. |
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index 5387a3fb..fab712d3 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -19,6 +19,9 @@ use thaw_utils::{
 pub fn TimePicker(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] id: MaybeProp<String>,
+    /// Whether time picker is disabled.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
     /// A string specifying a name for the input control.
     /// This name is submitted along with the control's value when the form data is submitted.
     #[prop(optional, into)]
@@ -92,6 +95,9 @@ pub fn TimePicker(
     };
 
     let open_panel = move || {
+        if disabled.get() {
+            return;
+        }
         if is_show_panel.get() {
             return;
         }
@@ -114,6 +120,7 @@ pub fn TimePicker(
                 <Input
                     id
                     name
+                    disabled
                     value=show_time_text
                     on_focus=move |_| open_panel()
                     on_blur=on_input_blur

From 94ba8151d0bfd4dd37c47e87fd5e0cedabb096c6 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Wed, 20 Aug 2025 09:37:28 +0800
Subject: [PATCH 7/9] feat: Tag adds disabled prop

---
 thaw/src/tag/docs/mod.md           | 27 ++++++++++---
 thaw/src/tag/docs/tag_group/mod.md | 15 +++++++
 thaw/src/tag/interaction-tag.css   |  7 ++++
 thaw/src/tag/interaction_tag.rs    | 19 ++++++++-
 thaw/src/tag/mod.rs                | 63 +++++++++++++++++-------------
 thaw/src/tag/tag.css               | 17 ++++++--
 thaw/src/tag/tag_group.rs          |  5 +++
 7 files changed, 116 insertions(+), 37 deletions(-)

diff --git a/thaw/src/tag/docs/mod.md b/thaw/src/tag/docs/mod.md
index 04452195..c13dce9a 100644
--- a/thaw/src/tag/docs/mod.md
+++ b/thaw/src/tag/docs/mod.md
@@ -13,6 +13,21 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+view! {
+    <Flex>
+        <Tag disabled=true dismissible=true>"Disabled"</Tag>
+        <InteractionTag disabled=true>
+            <InteractionTagPrimary>
+                "Interaction Tag"
+            </InteractionTagPrimary>
+        </InteractionTag>
+    </Flex>
+}
+```
+
 ### Size
 
 ```rust demo
@@ -58,6 +73,7 @@ view! {
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Option<Signal<bool>>` | `None` | Whether the tag is disabled. |
 | size | `Option<Signal<TagSize>>` | `None` | Size of the tag. |
 | dismissible | `Signal<bool>` | `false` | A Tag can be dismissible. |
 | on_dismiss | `Option<ArcOneCallback<ev::MouseEvent>>` | `None` | Callback for when a tag is dismissed. |
@@ -66,11 +82,12 @@ view! {
 
 ### InteractionTag Props
 
-| Name     | Type                      | Default              | Description      |
-| -------- | ------------------------- | -------------------- | ---------------- |
-| class    | `MaybeProp<String>`       | `Default::default()` |                  |
-| size     | `Option<Signal<TagSize>>` | `None`               | Size of the tag. |
-| children | `Children`                |                      |                  |
+| Name     | Type                      | Default              | Description                              |
+| -------- | ------------------------- | -------------------- | ---------------------------------------- |
+| class    | `MaybeProp<String>`       | `Default::default()` |                                          |
+| disabled | `Option<Signal<bool>>`    | `None`               | Whether the interaction tag is disabled. |
+| size     | `Option<Signal<TagSize>>` | `None`               | Size of the tag.                         |
+| children | `Children`                |                      |                                          |
 
 ### InteractionTagPrimary Props
 
diff --git a/thaw/src/tag/docs/tag_group/mod.md b/thaw/src/tag/docs/tag_group/mod.md
index f2be81f7..598e414d 100644
--- a/thaw/src/tag/docs/tag_group/mod.md
+++ b/thaw/src/tag/docs/tag_group/mod.md
@@ -23,6 +23,20 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+view! {
+    <TagGroup disabled=true attr:role="list">
+        <Tag >"Tag 1"</Tag>
+        <Tag dismissible=true>"Tag 1"</Tag>
+        <InteractionTag>
+            <InteractionTagPrimary>"Tag 1"</InteractionTagPrimary>
+        </InteractionTag>
+    </TagGroup>
+}
+```
+
 ### Sizes
 
 ```rust demo
@@ -51,6 +65,7 @@ view! {
 | Name        | Type                             | Default              | Description                           |
 | ----------- | -------------------------------- | -------------------- | ------------------------------------- |
 | class       | `MaybeProp<String>`              | `Default::default()` |                                       |
+| disabled    | `Signal<bool>`                   | `false`              | Whether the tag group is disabled.    |
 | size        | `Signal<TagSize>`                | `TagSize::Medium`    | Size of the tag.                      |
 | dismissible | `Signal<bool>`                   | `false`              | A Tag can be dismissible.             |
 | on_dismiss  | `Option<ArcOneCallback<String>>` | `None`               | Callback for when a tag is dismissed. |
diff --git a/thaw/src/tag/interaction-tag.css b/thaw/src/tag/interaction-tag.css
index af9359c3..d0819b01 100644
--- a/thaw/src/tag/interaction-tag.css
+++ b/thaw/src/tag/interaction-tag.css
@@ -51,6 +51,13 @@
     background-color: var(--colorNeutralBackground3Pressed);
 }
 
+.thaw-interaction-tag--disabled .thaw-interaction-tag-primary {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+    border-color: var(--colorTransparentStrokeDisabled);
+    cursor: not-allowed;
+}
+
 .thaw-interaction-tag-primary__primary-text {
     grid-row-end: secondary;
     grid-row-start: primary;
diff --git a/thaw/src/tag/interaction_tag.rs b/thaw/src/tag/interaction_tag.rs
index 8603f3f8..bb34797f 100644
--- a/thaw/src/tag/interaction_tag.rs
+++ b/thaw/src/tag/interaction_tag.rs
@@ -5,6 +5,9 @@ use thaw_utils::{class_list, mount_style};
 #[component]
 pub fn InteractionTag(
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// Whether the interaction tag is disabled.
+    #[prop(optional, into)]
+    disabled: Option<Signal<bool>>,
     /// Size of the tag.
     #[prop(optional, into)]
     size: Option<Signal<TagSize>>,
@@ -12,11 +15,22 @@ pub fn InteractionTag(
 ) -> impl IntoView {
     mount_style("interaction-tag", include_str!("./interaction-tag.css"));
     let tag_group = TagGroupInjection::use_context();
+
+    let disabled = {
+        if let Some(disabled) = disabled {
+            Some(disabled)
+        } else if let Some(tag_group) = &tag_group {
+            Some(tag_group.disabled.clone())
+        } else {
+            None
+        }
+    };
+
     let size_class = {
         if let Some(size) = size {
             Some(size)
-        } else if let Some(tag_group) = tag_group {
-            Some(tag_group.size)
+        } else if let Some(tag_group) = &tag_group {
+            Some(tag_group.size.clone())
         } else {
             None
         }
@@ -25,6 +39,7 @@ pub fn InteractionTag(
     view! {
         <div class=class_list![
             "thaw-interaction-tag",
+            ("thaw-interaction-tag--disabled", move || disabled.map_or(false, |d| d.get())),
                 size_class.map(|size| move || format!("thaw-interaction-tag--{}", size.get().as_str())),
                 class
         ]>{children()}</div>
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index 54ce4350..0904ef71 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -4,12 +4,16 @@ mod tag_group;
 pub use interaction_tag::*;
 pub use tag_group::*;
 
+use crate::DismissRegularIcon;
 use leptos::{either::Either, ev, prelude::*};
 use thaw_utils::{class_list, mount_style, ArcOneCallback};
 
 #[component]
 pub fn Tag(
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// Whether the tag is disabled.
+    #[prop(optional, into)]
+    disabled: Option<Signal<bool>>,
     /// Size of the tag.
     #[prop(optional, into)]
     size: Option<Signal<TagSize>>,
@@ -25,21 +29,33 @@ pub fn Tag(
     children: Children,
 ) -> impl IntoView {
     mount_style("tag", include_str!("./tag.css"));
-    let (group_size, group_on_dismiss, group_dismissible) = TagGroupInjection::use_context()
-        .map(
-            |TagGroupInjection {
-                 size,
-                 on_dismiss,
-                 dismissible,
-             }| {
-                if value.is_none() {
-                    (Some(size), None, None)
-                } else {
-                    (Some(size), on_dismiss, Some(dismissible))
-                }
-            },
-        )
-        .unwrap_or_default();
+    let (group_disabled, group_size, group_on_dismiss, group_dismissible) =
+        TagGroupInjection::use_context()
+            .map(
+                |TagGroupInjection {
+                     disabled,
+                     size,
+                     on_dismiss,
+                     dismissible,
+                 }| {
+                    if value.is_none() {
+                        (Some(disabled), Some(size), None, None)
+                    } else {
+                        (Some(disabled), Some(size), on_dismiss, Some(dismissible))
+                    }
+                },
+            )
+            .unwrap_or_default();
+
+    let disabled = {
+        if let Some(disabled) = disabled {
+            Some(disabled)
+        } else if let Some(disabled) = group_disabled {
+            Some(disabled)
+        } else {
+            None
+        }
+    };
 
     let size_class = {
         if let Some(size) = size {
@@ -55,6 +71,7 @@ pub fn Tag(
         <span class=class_list![
             "thaw-tag",
                 ("thaw-tag--dismissible", move || group_dismissible.map_or_else(|| dismissible.get(), |d| d.get())),
+                ("thaw-tag--disabled", move || disabled.map_or(false, |d| d.get())),
                 size_class.map(|size| move || format!("thaw-tag--{}", size.get().as_str())),
                 class
         ]>
@@ -67,6 +84,9 @@ pub fn Tag(
                     let group_on_dismiss = group_on_dismiss.clone();
                     let value = value.clone();
                     let on_dismiss = move |event: ev::MouseEvent| {
+                        if disabled.map_or(false, |d| d.get()) {
+                            return;
+                        }
                         if let Some(on_dismiss) = group_on_dismiss.as_ref() {
                             event.prevent_default();
                             on_dismiss(value.clone().unwrap());
@@ -79,18 +99,7 @@ pub fn Tag(
                     Either::Left(
                         view! {
                             <button class="thaw-tag__dismiss" on:click=on_dismiss>
-                                <svg
-                                    fill="currentColor"
-                                    aria-hidden="true"
-                                    width="1em"
-                                    height="1em"
-                                    viewBox="0 0 20 20"
-                                >
-                                    <path
-                                        d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-                                        fill="currentColor"
-                                    ></path>
-                                </svg>
+                                <DismissRegularIcon />
                             </button>
                         },
                     )
diff --git a/thaw/src/tag/tag.css b/thaw/src/tag/tag.css
index 6247def2..f7dc5c5f 100644
--- a/thaw/src/tag/tag.css
+++ b/thaw/src/tag/tag.css
@@ -17,6 +17,13 @@
     border-radius: var(--borderRadiusMedium);
 }
 
+.thaw-tag--disabled {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+    border-color: var(--colorTransparentStrokeDisabled);
+    cursor: not-allowed;
+}
+
 .thaw-tag--small {
     height: 24px;
     padding: 0 5px;
@@ -41,7 +48,6 @@
     font-weight: var(--fontWeightRegular);
     font-size: var(--fontSizeBase300);
     font-family: var(--fontFamilyBase);
-    color: var(--colorNeutralForeground2);
 }
 
 .thaw-tag--small .thaw-tag__primary-text,
@@ -62,6 +68,11 @@
     cursor: pointer;
 }
 
+.thaw-tag--disabled .thaw-tag__dismiss {
+    color: currentColor;
+    cursor: not-allowed;
+}
+
 .thaw-tag--small .thaw-tag__dismiss {
     padding-left: var(--spacingHorizontalXXS);
     font-size: 16px;
@@ -79,10 +90,10 @@
     line-height: 0;
 }
 
-.thaw-tag__dismiss:hover {
+.thaw-tag:not(.thaw-tag--disabled) > .thaw-tag__dismiss:hover {
     color: var(--colorCompoundBrandForeground1Hover);
 }
 
-.thaw-tag__dismiss:active {
+.thaw-tag:not(.thaw-tag--disabled) > .thaw-tag__dismiss:active {
     color: var(--colorCompoundBrandForeground1Pressed);
 }
diff --git a/thaw/src/tag/tag_group.rs b/thaw/src/tag/tag_group.rs
index 4d63a5d5..00ab0dd7 100644
--- a/thaw/src/tag/tag_group.rs
+++ b/thaw/src/tag/tag_group.rs
@@ -5,6 +5,9 @@ use thaw_utils::{class_list, mount_style, ArcOneCallback};
 #[component]
 pub fn TagGroup(
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// Whether the tag group is disabled.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
     /// Size of the tag.
     #[prop(optional, into)]
     size: Signal<TagSize>,
@@ -21,6 +24,7 @@ pub fn TagGroup(
     view! {
         <div class=class_list!["thaw-tag-group", class]>
             <Provider value=TagGroupInjection {
+                disabled,
                 size,
                 on_dismiss,
                 dismissible,
@@ -31,6 +35,7 @@ pub fn TagGroup(
 
 #[derive(Clone)]
 pub(crate) struct TagGroupInjection {
+    pub disabled: Signal<bool>,
     pub size: Signal<TagSize>,
     pub on_dismiss: Option<ArcOneCallback<String>>,
     pub dismissible: Signal<bool>,

From 13a78b270ea5323dd74c4e3f04986b217c0bebf3 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Wed, 20 Aug 2025 09:37:39 +0800
Subject: [PATCH 8/9] feat: TagPicker adds disabled prop

---
 thaw/src/tag_picker/docs/mod.md               | 54 ++++++++++++++++---
 thaw/src/tag_picker/tag_picker/mod.rs         |  8 +++
 thaw/src/tag_picker/tag_picker/tag-picker.css | 22 +++++++-
 thaw/src/tag_picker/tag_picker/types.rs       |  1 +
 thaw/src/tag_picker/tag_picker_group.rs       |  9 +++-
 thaw/src/tag_picker/tag_picker_input.rs       |  6 ++-
 6 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/thaw/src/tag_picker/docs/mod.md b/thaw/src/tag_picker/docs/mod.md
index 3e2ba386..5cb1bea6 100644
--- a/thaw/src/tag_picker/docs/mod.md
+++ b/thaw/src/tag_picker/docs/mod.md
@@ -37,6 +37,45 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+let selected_options = RwSignal::new(vec!["Cat".to_string()]);
+let options = vec!["Cat", "Dog"];
+
+view! {
+    <TagPicker selected_options disabled=true>
+        <TagPickerControl slot>
+            <TagPickerGroup>
+                {move || {
+                    selected_options.get().into_iter().map(|option| view!{
+                        <Tag value=option.clone()>
+                            {option}
+                        </Tag>
+                    }).collect_view()
+                }}
+            </TagPickerGroup>
+            <TagPickerInput />
+        </TagPickerControl>
+        {
+            move || {
+                selected_options.with(|selected_options| {
+                    options.iter().filter_map(|option| {
+                        if selected_options.iter().any(|o| o == option) {
+                            return None
+                        } else {
+                            Some(view! {
+                                <TagPickerOption value=option.clone() text=option.clone() />
+                            })
+                        }
+                    }).collect_view()
+                })
+            }
+        }
+    </TagPicker>
+}
+```
+
 ### Size
 
 ```rust demo
@@ -210,13 +249,14 @@ view! {
 
 ### TagPicker Props
 
-| Name               | Type                    | Default                 | Description                       |
-| ------------------ | ----------------------- | ----------------------- | --------------------------------- |
-| class              | `MaybeProp<String>`     | `Default::default()`    |                                   |
-| selected_option    | `Model<Vec<String>>`    | `Default::default()`    | An array of selected option keys. |
-| size               | `Signal<TagPickerSize>` | `TagPickerSize::Medium` | The size of the TagPicker.        |
-| tag_picker_control | slot `TagPickerControl` |                         |                                   |
-| children           | `Children`              |                         |                                   |
+| Name               | Type                    | Default                 | Description                         |
+| ------------------ | ----------------------- | ----------------------- | ----------------------------------- |
+| class              | `MaybeProp<String>`     | `Default::default()`    |                                     |
+| disabled           | `Signal<bool>`          | `false`                 | Whether the tag picker is disabled. |
+| selected_option    | `Model<Vec<String>>`    | `Default::default()`    | An array of selected option keys.   |
+| size               | `Signal<TagPickerSize>` | `TagPickerSize::Medium` | The size of the TagPicker.          |
+| tag_picker_control | slot `TagPickerControl` |                         |                                     |
+| children           | `Children`              |                         |                                     |
 
 ### TagPickerGroup Props
 
diff --git a/thaw/src/tag_picker/tag_picker/mod.rs b/thaw/src/tag_picker/tag_picker/mod.rs
index 22e9cf5d..3aad93fb 100644
--- a/thaw/src/tag_picker/tag_picker/mod.rs
+++ b/thaw/src/tag_picker/tag_picker/mod.rs
@@ -15,6 +15,9 @@ use thaw_utils::{call_on_click_outside_with_list, class_list, mount_style, Model
 #[component]
 pub fn TagPicker(
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// Whether the tag picker is disabled.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
     /// An array of selected option keys.
     #[prop(optional, into)]
     selected_options: Model<Vec<String>>,
@@ -40,6 +43,7 @@ pub fn TagPicker(
     let tag_picker_control_injection =
         TagPickerControlInjection(active_descendant_controller.clone());
     let tag_picker_injection = TagPickerInjection {
+        disabled,
         size,
         selected_options,
         input_ref,
@@ -48,6 +52,9 @@ pub fn TagPicker(
         listbox_hidden_callback,
     };
     let on_click = move |e: ev::MouseEvent| {
+        if disabled.get() {
+            return;
+        }
         if e.default_prevented() {
             if is_show_listbox.get() {
                 is_show_listbox.set(false);
@@ -105,6 +112,7 @@ pub fn TagPicker(
             <div
                 class=class_list![
                     "thaw-tag-picker-control",
+                    ("thaw-tag-picker-control--disabled", move || disabled.get()),
                     move || format!("thaw-tag-picker-control--{}", size.get().as_str()),
                     class
                 ]
diff --git a/thaw/src/tag_picker/tag_picker/tag-picker.css b/thaw/src/tag_picker/tag_picker/tag-picker.css
index ff2711fd..4316e020 100644
--- a/thaw/src/tag_picker/tag_picker/tag-picker.css
+++ b/thaw/src/tag_picker/tag_picker/tag-picker.css
@@ -15,6 +15,13 @@
     box-sizing: border-box;
 }
 
+.thaw-tag-picker-control--disabled {
+    background-color: var(--colorTransparentBackground);
+    border-color: var(--colorNeutralStrokeDisabled);
+    border-bottom-color: var(--colorNeutralStrokeDisabled);
+    cursor: not-allowed;
+}
+
 .thaw-tag-picker-control::after {
     content: "";
     position: absolute;
@@ -33,7 +40,9 @@
     box-sizing: border-box;
 }
 
-.thaw-tag-picker-control:focus-within::after {
+.thaw-tag-picker-control:not(
+        .thaw-tag-picker-control--disabled
+    ):focus-within::after {
     transition-delay: var(--curveDecelerateMid);
     transition-duration: var(--durationNormal);
     transition-property: transform;
@@ -72,6 +81,11 @@
     box-sizing: border-box;
 }
 
+.thaw-tag-picker-control--disabled .thaw-tag-picker-control__expand-icon {
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+}
+
 .thaw-tag-picker-control--large .thaw-tag-picker-control__expand-icon {
     font-size: 20px;
 }
@@ -97,6 +111,12 @@
     border: none;
 }
 
+.thaw-tag-picker-input:disabled {
+    background-color: var(--colorTransparentBackground);
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+}
+
 .thaw-tag-picker-control--large .thaw-tag-picker-input {
     padding: var(--spacingVerticalMNudge) 0 var(--spacingVerticalMNudge) 0;
 }
diff --git a/thaw/src/tag_picker/tag_picker/types.rs b/thaw/src/tag_picker/tag_picker/types.rs
index 95fbff6d..6f8cb8ff 100644
--- a/thaw/src/tag_picker/tag_picker/types.rs
+++ b/thaw/src/tag_picker/tag_picker/types.rs
@@ -19,6 +19,7 @@ impl TagPickerControlInjection {
 
 #[derive(Clone, Copy)]
 pub(crate) struct TagPickerInjection {
+    pub disabled: Signal<bool>,
     pub size: Signal<TagPickerSize>,
     pub input_ref: NodeRef<html::Input>,
     pub(super) selected_options: Model<Vec<String>>,
diff --git a/thaw/src/tag_picker/tag_picker_group.rs b/thaw/src/tag_picker/tag_picker_group.rs
index 1ae6e164..07f08d47 100644
--- a/thaw/src/tag_picker/tag_picker_group.rs
+++ b/thaw/src/tag_picker/tag_picker_group.rs
@@ -24,7 +24,14 @@ pub fn TagPickerGroup(
     };
 
     view! {
-        <TagGroup attr:role="listbox" class size dismissible=true on_dismiss>
+        <TagGroup
+            attr:role="listbox"
+            class
+            size
+            disabled=tag_picker.disabled
+            dismissible=true
+            on_dismiss
+        >
             {children()}
         </TagGroup>
     }
diff --git a/thaw/src/tag_picker/tag_picker_input.rs b/thaw/src/tag_picker/tag_picker_input.rs
index f205a018..66f1072d 100644
--- a/thaw/src/tag_picker/tag_picker_input.rs
+++ b/thaw/src/tag_picker/tag_picker_input.rs
@@ -5,7 +5,10 @@ use thaw_utils::class_list;
 #[component]
 pub fn TagPickerInput(#[prop(optional, into)] class: MaybeProp<String>) -> impl IntoView {
     let TagPickerInjection {
-        input_ref, options, ..
+        disabled,
+        input_ref,
+        options,
+        ..
     } = TagPickerInjection::expect_context();
     let TagPickerControlInjection(active_descendant_controller) =
         TagPickerControlInjection::expect_context();
@@ -40,6 +43,7 @@ pub fn TagPickerInput(#[prop(optional, into)] class: MaybeProp<String>) -> impl
 
     view! {
         <input
+            disabled=move || disabled.get()
             node_ref=input_ref
             type="text"
             role="combobox"

From a2bda4bdf1d2cea1b9277d9e11e5dd504dbb1cd8 Mon Sep 17 00:00:00 2001
From: lizidev <lizidev@163.com>
Date: Wed, 20 Aug 2025 09:39:55 +0800
Subject: [PATCH 9/9] style: cargo fmt & leptosfmt

---
 thaw/src/accordion/accordion_item.rs      |  4 +---
 thaw/src/date_picker/panel/date_panel.rs  | 14 ++++++++------
 thaw/src/date_picker/panel/month_panel.rs |  4 +++-
 thaw/src/icon/icons/mod.rs                |  4 ++--
 thaw/src/popover/mod.rs                   |  6 +++++-
 thaw/src/radio/radio_group.rs             |  9 +++++++--
 thaw/src/tooltip/tooltip.rs               |  6 +++++-
 7 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/thaw/src/accordion/accordion_item.rs b/thaw/src/accordion/accordion_item.rs
index eced4119..5615ddad 100644
--- a/thaw/src/accordion/accordion_item.rs
+++ b/thaw/src/accordion/accordion_item.rs
@@ -72,9 +72,7 @@ pub fn AccordionItem(
                 </button>
             </div>
             <CSSTransition show=is_show_panel name="thaw-accordion-panel">
-                <div class="thaw-accordion-panel">
-                    {children()}
-                </div>
+                <div class="thaw-accordion-panel">{children()}</div>
             </CSSTransition>
         </div>
     }
diff --git a/thaw/src/date_picker/panel/date_panel.rs b/thaw/src/date_picker/panel/date_panel.rs
index 3a837485..b68c549a 100644
--- a/thaw/src/date_picker/panel/date_panel.rs
+++ b/thaw/src/date_picker/panel/date_panel.rs
@@ -147,17 +147,19 @@ pub fn DatePanel(
                     />
                 </div>
                 <div class="thaw-date-picker-date-panel__weekdays">
-                    {move|| {
-                        let first_weekday_number = locale.get().first_weekday().num_days_from_sunday() as u8;
+                    {move || {
+                        let first_weekday_number = locale
+                            .get()
+                            .first_weekday()
+                            .num_days_from_sunday() as u8;
                         let last_weekday_number = first_weekday_number + 6;
                         (first_weekday_number..=last_weekday_number)
                             .into_iter()
                             .map(|n| {
-                                view! { <span>{locale.get().ab_day(n%7)}</span>}
+                                view! { <span>{locale.get().ab_day(n % 7)}</span> }
                             })
                             .collect_view()
-                        }
-                    }
+                    }}
                 </div>
                 <div class="thaw-date-picker-date-panel__dates">
                     {move || {
@@ -181,7 +183,7 @@ pub fn DatePanel(
             </div>
             <div class="thaw-date-picker-date-panel__footer">
                 <Button size=ButtonSize::Small on_click=now>
-                    { move || locale.get().today() }
+                    {move || locale.get().today()}
                 </Button>
             </div>
         </div>
diff --git a/thaw/src/date_picker/panel/month_panel.rs b/thaw/src/date_picker/panel/month_panel.rs
index 3e8b513f..effc2745 100644
--- a/thaw/src/date_picker/panel/month_panel.rs
+++ b/thaw/src/date_picker/panel/month_panel.rs
@@ -93,7 +93,9 @@ fn MonthPanelItem(date_panel_show_date: RwSignal<NaiveDate>, month: Month) -> im
             class="thaw-date-picker-month-panel__item"
             class=("thaw-date-picker-month-panel__item--selected", move || is_selected.get())
         >
-            <div class="thaw-date-picker-month-panel__item-month">{locale.get().ab_month(month.number_from_month() as u8)}</div>
+            <div class="thaw-date-picker-month-panel__item-month">
+                {locale.get().ab_month(month.number_from_month() as u8)}
+            </div>
         </div>
     }
 }
diff --git a/thaw/src/icon/icons/mod.rs b/thaw/src/icon/icons/mod.rs
index 40439c23..ea0c2712 100644
--- a/thaw/src/icon/icons/mod.rs
+++ b/thaw/src/icon/icons/mod.rs
@@ -32,8 +32,8 @@ pub fn ChevronRight12RegularIcon() -> impl IntoView {
         >
             <path
                 d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
-                fill="currentColor">
-            </path>
+                fill="currentColor"
+            ></path>
         </svg>
     }
 }
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index 77ef719e..c8e6cc1b 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -167,7 +167,11 @@ where
                     on:mouseleave=on_mouse_leave
                 >
                     {children()}
-                    <div class="thaw-popover-surface__angle" style=arrow_style node_ref=arrow_ref></div>
+                    <div
+                        class="thaw-popover-surface__angle"
+                        style=arrow_style
+                        node_ref=arrow_ref
+                    ></div>
                 </div>
             </Follower>
         </crate::_binder::Binder>
diff --git a/thaw/src/radio/radio_group.rs b/thaw/src/radio/radio_group.rs
index 54f20f28..c6f6138f 100644
--- a/thaw/src/radio/radio_group.rs
+++ b/thaw/src/radio/radio_group.rs
@@ -11,7 +11,8 @@ pub fn RadioGroup(
     #[prop(optional, into)]
     disabled: Signal<bool>,
     /// The rules to validate Field.
-    #[prop(optional, into)] rules: Vec<RadioGroupRule>,
+    #[prop(optional, into)]
+    rules: Vec<RadioGroupRule>,
     /// The selected Radio item in this group.
     #[prop(optional, into)]
     value: OptionModel<String>,
@@ -36,7 +37,11 @@ pub fn RadioGroup(
     });
 
     view! {
-        <Provider value=RadioGroupInjection { value, name, disabled }>
+        <Provider value=RadioGroupInjection {
+            value,
+            name,
+            disabled,
+        }>
             <div class=class_list!["thaw-radio-group", class] id=id role="radiogroup">
                 {children()}
             </div>
diff --git a/thaw/src/tooltip/tooltip.rs b/thaw/src/tooltip/tooltip.rs
index 6e502854..7ec3f8b6 100644
--- a/thaw/src/tooltip/tooltip.rs
+++ b/thaw/src/tooltip/tooltip.rs
@@ -94,7 +94,11 @@ where
                     on:mouseleave=on_mouse_leave
                 >
                     {move || { content.as_ref().map(|c| c.get()).unwrap_or_default() }}
-                    <div class="thaw-tooltip-content__angle" style=arrow_style node_ref=arrow_ref></div>
+                    <div
+                        class="thaw-tooltip-content__angle"
+                        style=arrow_style
+                        node_ref=arrow_ref
+                    ></div>
                 </div>
             </Follower>
         </crate::_binder::Binder>