diff --git a/demo/src/pages/checkbox/mod.rs b/demo/src/pages/checkbox/mod.rs
index 957d91a..33ab84c 100644
--- a/demo/src/pages/checkbox/mod.rs
+++ b/demo/src/pages/checkbox/mod.rs
@@ -81,6 +81,12 @@ pub fn CheckboxPage() -> impl IntoView {
                         <td></td>
                         <td>"Checkbox's content."</td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>"Default::default()"</td>
+                        <td>"Addtional classes for the checkbox element."</td>
+                    </tr>
                 </tbody>
             </Table>
             <h3>"CheckboxGroup Props"</h3>
@@ -106,12 +112,6 @@ pub fn CheckboxPage() -> impl IntoView {
                         <td></td>
                         <td>"CheckboxGroup's content."</td>
                     </tr>
-                    <tr>
-                        <td>"class"</td>
-                        <td>"MaybeSignal<String>"</td>
-                        <td>"Default::default()"</td>
-                        <td>"Addtional classes for the checkbox element."</td>
-                    </tr>
                 </tbody>
             </Table>
             <h3>"CheckboxItem Props"</h3>
@@ -137,6 +137,12 @@ pub fn CheckboxPage() -> impl IntoView {
                         <td>"None"</td>
                         <td>"Checkbox's label."</td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>"Default::default()"</td>
+                        <td>"Addtional classes for the checkbox element."</td>
+                    </tr>
                 </tbody>
             </Table>
         </div>
diff --git a/demo/src/pages/date_picker/mod.rs b/demo/src/pages/date_picker/mod.rs
index 0a7a3e7..086bb5b 100644
--- a/demo/src/pages/date_picker/mod.rs
+++ b/demo/src/pages/date_picker/mod.rs
@@ -51,6 +51,12 @@ pub fn DatePickerPage() -> impl IntoView {
                             "Set the date picker value"
                         </td>
                     </tr>
+                    <tr>
+                        <td>"class"</td>
+                        <td>"MaybeSignal<String>"</td>
+                        <td>"Default::default()"</td>
+                        <td>"Addtional classes for the date picker element."</td>
+                    </tr>
                 </tbody>
             </Table>
         </div>
diff --git a/src/date_picker/mod.rs b/src/date_picker/mod.rs
index e61fe90..3a61e66 100644
--- a/src/date_picker/mod.rs
+++ b/src/date_picker/mod.rs
@@ -12,7 +12,10 @@ use panel::{Panel, PanelRef};
 pub use theme::DatePickerTheme;
 
 #[component]
-pub fn DatePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>) -> impl IntoView {
+pub fn DatePicker(
+    #[prop(optional, into)] value: RwSignal<Option<NaiveDate>>,
+    #[prop(optional, into)] class: MaybeSignal<String>,
+) -> impl IntoView {
     mount_style("date-picker", include_str!("./date-picker.css"));
     let date_picker_ref = create_node_ref::<html::Div>();
     let is_show_panel = create_rw_signal(false);
@@ -70,7 +73,7 @@ pub fn DatePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>) ->
     view! {
         <Binder target_ref=date_picker_ref>
             <div ref=date_picker_ref>
-                <Input value=show_date_text on_focus=open_panel on_blur=on_input_blur>
+                <Input class value=show_date_text on_focus=open_panel on_blur=on_input_blur>
                     <InputSuffix slot>
                         <Icon icon=Icon::from(AiIcon::AiCalendarOutlined) style="font-size: 18px"/>
                     </InputSuffix>