diff --git a/yewprint-doc/src/checkbox/mod.rs b/yewprint-doc/src/checkbox/mod.rs
index 47d28b1..39aad57 100644
--- a/yewprint-doc/src/checkbox/mod.rs
+++ b/yewprint-doc/src/checkbox/mod.rs
@@ -44,6 +44,7 @@ impl Component for CheckboxDoc {
         html! {
             <div>
             <H1 class=classes!("docs-title")>{"Checkbox"}</H1>
+            <SourceCodeUrl />
             <ExampleContainer
                 source=source
                 props=Some(html! {
@@ -94,3 +95,5 @@ crate::build_example_prop_component! {
         }
     }
 }
+
+crate::build_source_code_component!();
diff --git a/yewprint-doc/src/numeric_input/example.rs b/yewprint-doc/src/numeric_input/example.rs
index 55d9a78..71f933b 100644
--- a/yewprint-doc/src/numeric_input/example.rs
+++ b/yewprint-doc/src/numeric_input/example.rs
@@ -1,5 +1,5 @@
 use yew::prelude::*;
-use yewprint::{Button, IconName, NumericInput};
+use yewprint::{Button, IconName, NumericInput, Text};
 
 pub struct Example {
     props: ExampleProps,
@@ -17,6 +17,8 @@ pub struct ExampleProps {
 
 pub enum Msg {
     Reset,
+    UpdateValue(i32),
+    UpdateValueTwo(i32),
 }
 
 impl Component for Example {
@@ -38,6 +40,12 @@ impl Component for Example {
                 self.value = 4;
                 self.value_two = 4;
             }
+            Msg::UpdateValue(value) => {
+                self.value = value;
+            }
+            Msg::UpdateValueTwo(value) => {
+                self.value_two = value;
+            }
         }
         true
     }
@@ -61,6 +69,7 @@ impl Component for Example {
                 bounds=i32::MIN..=i32::MAX
                 increment=10
                 placeholder=String::from("Enter an integer...")
+                onchange=self.link.callback(|x| Msg::UpdateValueTwo(x))
             />
             <NumericInput<i32>
                 disabled=self.props.disabled
@@ -70,6 +79,7 @@ impl Component for Example {
                 bounds=-10..=10
                 increment=1
                 placeholder=String::from("Integer between -10 and 10")
+                onchange=self.link.callback(|x| Msg::UpdateValue(x))
             />
             <Button
                 icon=IconName::Refresh
@@ -77,6 +87,7 @@ impl Component for Example {
             >
                 {"Reset at 4"}
             </Button>
+            <Text>{format!("actual values are {} and {}", self.value, self.value_two)}</Text>
             </>
         }
     }
diff --git a/yewprint-doc/src/numeric_input/mod.rs b/yewprint-doc/src/numeric_input/mod.rs
index 8b6d4cb..5821527 100644
--- a/yewprint-doc/src/numeric_input/mod.rs
+++ b/yewprint-doc/src/numeric_input/mod.rs
@@ -44,6 +44,7 @@ impl Component for NumericInputDoc {
         html! {
             <div>
                 <H1 class=classes!("docs-title")>{"NumericInput"}</H1>
+                <SourceCodeUrl />
                 <div>
                     <ExampleContainer
                         source=source
@@ -96,3 +97,5 @@ crate::build_example_prop_component! {
         }
     }
 }
+
+crate::build_source_code_component!();
diff --git a/yewprint/src/numeric_input.rs b/yewprint/src/numeric_input.rs
index 01360bf..4fb682e 100644
--- a/yewprint/src/numeric_input.rs
+++ b/yewprint/src/numeric_input.rs
@@ -104,6 +104,7 @@ where
                         self.props.value = Some(num);
                         self.input = value;
                     }
+                    self.props.onchange.emit(self.props.value.clone().unwrap());
                     true
                 } else {
                     false
@@ -114,12 +115,12 @@ where
                     if num >= *self.props.bounds.end() {
                         self.props.value = Some(self.props.bounds.end().clone());
                         self.input = self.props.bounds.end().to_string();
-                        true
                     } else {
                         self.props.value = Some(num.clone() + self.props.increment.clone());
                         self.input = (num + self.props.increment.clone()).to_string();
-                        true
                     }
+                    self.props.onchange.emit(self.props.value.clone().unwrap());
+                    true
                 } else {
                     false
                 }
@@ -129,12 +130,12 @@ where
                     if num <= *self.props.bounds.start() {
                         self.props.value = Some(self.props.bounds.start().clone());
                         self.input = self.props.bounds.start().to_string();
-                        true
                     } else {
                         self.props.value = Some(num.clone() - self.props.increment.clone());
                         self.input = (num - self.props.increment.clone()).to_string();
-                        true
                     }
+                    self.props.onchange.emit(self.props.value.clone().unwrap());
+                    true
                 } else {
                     false
                 }