diff --git a/thaw/src/date_picker/mod.rs b/thaw/src/date_picker/mod.rs
index fd1e267..6b1d34e 100644
--- a/thaw/src/date_picker/mod.rs
+++ b/thaw/src/date_picker/mod.rs
@@ -91,8 +91,18 @@ pub fn DatePicker(
 
     view! {
         <Binder target_ref=date_picker_ref>
-            <div node_ref=date_picker_ref class=class_list!["thaw-date-picker", class] on:click=move |_| open_panel()>
-                <Input id name value=show_date_text on_focus=move |_| open_panel() on_blur=on_input_blur>
+            <div
+                node_ref=date_picker_ref
+                class=class_list!["thaw-date-picker", class]
+                on:click=move |_| open_panel()
+            >
+                <Input
+                    id
+                    name
+                    value=show_date_text
+                    on_focus=move |_| open_panel()
+                    on_blur=on_input_blur
+                >
                     <InputSuffix slot>
                         <Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px" />
                     </InputSuffix>
diff --git a/thaw/src/field/docs/mod.md b/thaw/src/field/docs/mod.md
index 3029bdd..8b07d03 100644
--- a/thaw/src/field/docs/mod.md
+++ b/thaw/src/field/docs/mod.md
@@ -41,19 +41,19 @@ view! {
             <Field label="Textarea" name="textarea">
                 <Textarea rules=vec![TextareaRule::required(true.into())]/>
             </Field>
-            <Field name="radio">
+            <Field label="Radio" name="radio">
                 <RadioGroup rules=vec![RadioGroupRule::required(true.into())] >
                     <Radio label="0" value="false"/>
                     <Radio label="1" value="true"/>
                 </RadioGroup>
             </Field>
-            <Field name="combobox">
+            <Field label="Combobox" name="combobox">
                 <Combobox rules=vec![ComboboxRule::required(true.into())] placeholder="Select an animal" clearable=true>
                     <ComboboxOption value="cat" text="Cat"/>
                     <ComboboxOption value="dog" text="Dog" />
                 </Combobox>
             </Field>
-            <Field name="spinbutton">
+            <Field label="SpinButton" name="spinbutton">
                 <SpinButton
                     step_page=1
                     rules=vec![SpinButtonRule::validator(move |v, _| {
@@ -87,6 +87,9 @@ view! {
                     </SliderLabel>
                 </Slider>
             </Field>
+            <Field label="Switch" name="switch">
+                <Switch/>
+            </Field>
             <div style="margin-top: 8px">
                 <Button
                     button_type=ButtonType::Submit
diff --git a/thaw/src/switch/docs/mod.md b/thaw/src/switch/docs/mod.md
index cd035c3..3284877 100644
--- a/thaw/src/switch/docs/mod.md
+++ b/thaw/src/switch/docs/mod.md
@@ -10,8 +10,11 @@ view! {
 
 ### Switch Props
 
-| Name    | Type                | Default              | Description                                         |
-| ------- | ------------------- | -------------------- | --------------------------------------------------- |
-| class   | `MaybeProp<String>` | `Default::default()` |                                                     |
-| checked | `Model<bool>`       | `false`              | Defines the controlled checked state of the Switch. |
-| label   | `MaybeProp<String>` | `Default::default()` | The Switch's label.                                 |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp<String>` | `Default::default()` |  |
+| id | `MaybeProp<String>` | `Default::default()` |  |
+| 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<SwitchRule>` | `vec![]` | The rules to validate Field. |
+| checked | `Model<bool>` | `false` | Defines the controlled checked state of the Switch. |
+| label | `MaybeProp<String>` | `Default::default()` | The Switch's label. |
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index 3ecc704..be578e5 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -1,9 +1,19 @@
+use crate::{FieldInjection, FieldValidationState, Rule};
 use leptos::{html, prelude::*};
+use std::ops::Deref;
 use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn Switch(
     #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] id: MaybeProp<String>,
+    /// 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)]
+    name: MaybeProp<String>,
+    /// The rules to validate Field.
+    #[prop(optional, into)]
+    rules: Vec<SwitchRule>,
     /// Defines the controlled checked state of the Switch.
     #[prop(optional, into)]
     checked: Model<bool>,
@@ -12,12 +22,14 @@ pub fn Switch(
     label: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("switch", include_str!("./switch.css"));
-
-    let id = uuid::Uuid::new_v4().to_string();
+    let (id, name) = FieldInjection::use_id_and_name(id, name);
+    let validate = Rule::validate(rules, checked, name);
+    let id = Signal::derive(move || id.get().unwrap_or_else(|| uuid::Uuid::new_v4().to_string()));
     let input_ref = NodeRef::<html::Input>::new();
     let on_change = move |_| {
         let input = input_ref.get_untracked().unwrap();
         checked.set(input.checked());
+        validate.run(Some(SwitchRuleTrigger::Change));
     };
 
     view! {
@@ -26,7 +38,8 @@ pub fn Switch(
                 class="thaw-switch__input"
                 role="switch"
                 type="checkbox"
-                id=id.clone()
+                id=id
+                name=name
                 checked=checked.get_untracked()
                 node_ref=input_ref
                 on:change=on_change
@@ -45,7 +58,7 @@ pub fn Switch(
             {move || {
                 if let Some(label) = label.get() {
                     view! {
-                        <label class="thaw-switch__label" for=id.clone()>
+                        <label class="thaw-switch__label" for=id>
                             {label}
                         </label>
                     }
@@ -57,3 +70,34 @@ pub fn Switch(
         </div>
     }
 }
+
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum SwitchRuleTrigger {
+    #[default]
+    Change,
+}
+
+pub struct SwitchRule(Rule<bool, SwitchRuleTrigger>);
+
+impl SwitchRule {
+    pub fn validator(
+        f: impl Fn(&bool, Signal<Option<String>>) -> Result<(), FieldValidationState>
+            + Send
+            + Sync
+            + 'static,
+    ) -> Self {
+        Self(Rule::validator(f))
+    }
+
+    pub fn with_trigger(self, trigger: SwitchRuleTrigger) -> Self {
+        Self(Rule::with_trigger(self.0, trigger))
+    }
+}
+
+impl Deref for SwitchRule {
+    type Target = Rule<bool, SwitchRuleTrigger>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index 24e2cd4..978bfb2 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -94,8 +94,18 @@ pub fn TimePicker(
 
     view! {
         <Binder target_ref=time_picker_ref>
-            <div node_ref=time_picker_ref class=class_list!["thaw-time-picker", class] on:click=move |_| open_panel()>
-                <Input id name value=show_time_text on_focus=move |_| open_panel() on_blur=on_input_blur>
+            <div
+                node_ref=time_picker_ref
+                class=class_list!["thaw-time-picker", class]
+                on:click=move |_| open_panel()
+            >
+                <Input
+                    id
+                    name
+                    value=show_time_text
+                    on_focus=move |_| open_panel()
+                    on_blur=on_input_blur
+                >
                     <InputSuffix slot>
                         <Icon icon=icondata_ai::AiClockCircleOutlined style="font-size: 18px" />
                     </InputSuffix>