diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index a3876da0..5ce9d6b9 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -237,7 +237,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('class', 'A CSS class to apply to the form element.', 'TEXT', FALSE, TRUE),
     ('prefix_icon','Icon to display on the left side of the input field, on the same line.','ICON',FALSE,TRUE),
     ('prefix','Text to display on the left side of the input field, on the same line.','TEXT',FALSE,TRUE),
-    ('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE)
+    ('suffix','Short text to display after th input, on the same line. Useful to add units or a currency symbol to an input.','TEXT',FALSE,TRUE),
+    ('id','A unique identifier for the input, which can then be used to select and manage the field with Javascript code. Usefull for advanced using as setting client side event listeners, interactive control of input field (disabled, visibility, read only, e.g.) and AJAX requests.','TEXT',FALSE,TRUE)
 ) x;
 INSERT INTO example(component, description, properties) VALUES
     (
diff --git a/examples/official-site/sqlpage/migrations/36_probe.sql b/examples/official-site/sqlpage/migrations/36_probe.sql
new file mode 100644
index 00000000..8fd427e1
--- /dev/null
+++ b/examples/official-site/sqlpage/migrations/36_probe.sql
@@ -0,0 +1,54 @@
+-- Documentation for the probe component
+INSERT INTO component (name, description, icon, introduced_in_version) VALUES (
+    'probe',
+    'A debug component that displays a value (constant, variable, parameter value, result of an SQL function, e.g.). Usefull to validate data flow or function behaviour. Each value (except NULL value) is surrounded by double quotes and followed by datatype (number, string, boolean, e.g.).',
+    'microscope',
+    '0.20.0'
+);
+
+INSERT INTO parameter (component,name,description,type,top_level,optional) VALUES (
+    'probe',
+    'name',
+    'Value identifier (used to display the probe result).',
+    'TEXT',
+    TRUE,
+    FALSE
+),(
+    'probe',
+    'contents',
+    'A value to analyze by the probe.',
+    'VARIANT',
+    TRUE,
+    FALSE
+);
+
+-- Insert example(s) for the component
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a number.',
+    JSON(
+        '[
+            {"component":"probe","name":"myValue","contents":42}
+        ]'
+    )
+);
+
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a string.',
+    JSON(
+        '[
+            {"component":"probe","name":"myString","contents": "Hello world! "}
+        ]'
+    )
+);
+
+INSERT INTO example(component, description, properties) VALUES (
+    'probe',
+    'Analyse a NULL value.',
+    JSON(
+        '[
+            {"component":"probe","name":"myVar","contents": null}
+        ]'
+    )
+);
\ No newline at end of file
diff --git a/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars
index 74db9fd9..db1fcdf5 100644
--- a/sqlpage/templates/form.handlebars
+++ b/sqlpage/templates/form.handlebars
@@ -16,7 +16,7 @@
             {{#if (or (eq type "radio") (eq type "checkbox"))}}
                 <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1 col-md-{{default width 12}}">
                     <label class="form-selectgroup-item flex-fill">
-                        <input type="{{type}}" name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
+                        <input type="{{type}}" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if checked}}checked{{/if}} class="form-selectgroup-input">
                         <div class="form-selectgroup-label d-flex align-items-center p-3">
                             <div class="me-3">
                                 <span class="form-selectgroup-check"></span>
@@ -35,7 +35,7 @@
                 </div>
             {{else}}
             {{~#if (eq type "hidden")}}
-                <input type="hidden" name="{{name}}" value="{{value}}">
+                <input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
             {{else}}
                 <label class="form-label mb-2 col-md-{{default width 12}}">
                     {{default label name}}
@@ -48,7 +48,8 @@
                             class="form-control"
                             placeholder="{{placeholder}}"
                             rows="{{default rows 3}}"
-                            {{#if value}}value="{{value}}" {{/if~}}
+                            {{#if id}}id="{{id}}" {{/if~}}
+                            {{~#if value}}value="{{value}}" {{/if~}}
                             {{~#if minlength}}minlength="{{minlength}}" {{/if~}}
                             {{~#if maxlength}}maxlength="{{maxlength}}" {{/if~}}
                             {{~#if required}}required="required" {{/if~}}
@@ -58,6 +59,7 @@
                         </textarea>
                     {{else}}{{#if (eq type 'select')}}
                         <select name="{{name}}" class="form-select"
+                        {{~#if id}} id="{{id}}" {{/if~}}
                         {{~#if required}} required="required" {{/if~}}
                         {{~#if autofocus}} autofocus {{/if~}}
                         {{~#if multiple}} multiple {{/if~}}
@@ -71,6 +73,7 @@
                             {{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}
                             {{#if prefix}}<span class="input-group-text">{{prefix}}</span>{{/if}}
                             <input name="{{name}}" class="form-control {{class}}" 
+                                {{~#if id}} id="{{id}}" {{/if~}}
                                 {{~#if type}} type="{{type}}" {{/if~}}
                                 {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
                                 {{~#if value}} value="{{value}}" {{/if~}}
diff --git a/sqlpage/templates/probe.handlebars b/sqlpage/templates/probe.handlebars
new file mode 100644
index 00000000..3c8d018a
--- /dev/null
+++ b/sqlpage/templates/probe.handlebars
@@ -0,0 +1 @@
+<pre>Value of {{name}} is {{#if (eq contents NULL)}}NULL{{else}}"{{contents}}" ({{typeof contents}}){{/if}}</pre>
\ No newline at end of file