diff --git a/assets/js/controllers/count_controller.js b/assets/js/controllers/count_controller.js
index 2d93cbb..97f29d6 100644
--- a/assets/js/controllers/count_controller.js
+++ b/assets/js/controllers/count_controller.js
@@ -6,6 +6,7 @@ export default class extends Controller {
   static values = {
     canBeNegative: Boolean,
     count: Number,
+    maximumCountNumber: Number,
   };
 
   connect() {
@@ -33,6 +34,12 @@ export default class extends Controller {
   increment() {
     console.log("count#increment");
 
+    const maximumCountNumber = this.maximumCountNumberValue || 10;
+
+    if (this.countValue === maximumCountNumber) {
+      return;
+    }
+
     this.countValue = this.countValue + 1;
   }
 }
diff --git a/public/index.html b/public/index.html
index b11de50..edf95f8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,11 @@
     <title>Stimulus esbuild example</title>
   </head>
   <body>
-    <div data-controller="count" data-count-can-be-negative-value="true">
+    <div
+      data-controller="count"
+      data-count-can-be-negative-value="true"
+      data-count-maximum-count-number-value="5"
+    >
       <p>Count: <span data-count-target="result"></span></p>
 
       <div>
@@ -13,7 +17,10 @@
       </div>
     </div>
 
-    <div data-controller="count" data-count-can-be-negative-value="false">
+    <div
+      data-controller="count"
+      data-count-can-be-negative-value="false"
+    >
       <p>Count: <span data-count-target="result"></span></p>
 
       <div>
