diff --git a/demo_markdown/docs/switch/mod.md b/demo_markdown/docs/switch/mod.md
index 399d681..b7e0307 100644
--- a/demo_markdown/docs/switch/mod.md
+++ b/demo_markdown/docs/switch/mod.md
@@ -3,14 +3,24 @@
```rust demo
let value = create_rw_signal(false);
+let message = use_message();
+let on_change = move |value: bool| {
+ message.create(
+ format!("{value}"),
+ MessageVariant::Success,
+ Default::default(),
+ );
+};
+
view! {
-
+
}
```
### Switch Props
-| Name | Type | Default | Description |
-| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class | `OptionalProp>` | `Default::default()` | Addtional classes for the switch element. |
-| value | `Model` | `false` | Switch's value. |
+| Name | Type | Default | Description |
+| --------- | ----------------------------------- | -------------------- | ------------------------------------------- |
+| class | `OptionalProp>` | `Default::default()` | Addtional classes for the switch element. |
+| value | `Model` | `false` | Switch's value. |
+| on_change | `Option` | `None` | Trigger when the checked state is changing. |
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index cee6148..7e51e6d 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -9,6 +9,7 @@ use thaw_utils::{class_list, mount_style, Model, OptionalProp};
#[component]
pub fn Switch(
#[prop(optional, into)] value: Model,
+ #[prop(optional, into)] on_change: Option>,
#[prop(optional, into)] class: OptionalProp>,
) -> impl IntoView {
mount_style("switch", include_str!("./switch.css"));
@@ -27,6 +28,13 @@ pub fn Switch(
});
css_vars
});
+ let on_click = move |_| {
+ let new_value = !value.get_untracked();
+ value.set(new_value);
+ if let Some(on_change) = on_change {
+ on_change.call(new_value);
+ }
+ };
view! {