From 9abd333b1e347b01915119eb6223f71a89721228 Mon Sep 17 00:00:00 2001
From: francesco-cattoglio <francesco-cattoglio@users.noreply.github.com>
Date: Tue, 13 Oct 2026 10:42:59 +0200
Subject: [PATCH 1/4] Added prefix and suffix to 'select' form field

Added support for prefix text, prefix icon and suffix text to form component when 'select' is the field type
---
 sqlpage/templates/form.handlebars | 44 +++++++++++++++++--------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars
index a8851b867..22b02ddd6 100644
--- a/sqlpage/templates/form.handlebars
+++ b/sqlpage/templates/form.handlebars
@@ -87,26 +87,30 @@
                         {{~#if value includeZero=true}}{{value}}{{/if~}}
                         </textarea>
                     {{~else~}}{{#if (eq type 'select')~}}
-                        <select name="{{name}}" 
-                            class="form-select {{class}}"
-                        {{~#if id}} id="{{id}}" {{/if~}}
-                        {{~#if required}} required="required" {{/if~}}
-                        {{~#if autofocus}} autofocus {{/if~}}
-                        {{~#if disabled}}disabled {{/if~}}
-                        {{~#if multiple}} multiple {{/if~}}
-                        {{~#if (or dropdown searchable options_source)}} 
-                            data-pre-init="select-dropdown"
-                            data-sqlpage-js="{{static_path 'tomselect.js'}}"
-                        {{/if~}}
-                        {{~#if options_source}} data-options_source="{{options_source}}" {{/if~}}
-                        {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
-                        {{~#if create_new}} data-create_new={{create_new}} {{/if~}}
-                        >
-                        {{#if empty_option}}<option value="">{{empty_option}}</option>{{/if}}
-                        {{#each (parse_json options)}}
-                            <option value="{{value}}" {{#if (or (loose_eq ../value value) selected)}}selected{{/if}}>{{label}}</option>
-                        {{/each}}
-                        </select>
+                        <div class="input-group">
+                            {{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}
+                            {{#if prefix}}<span class="input-group-text">{{prefix}}</span>{{/if}}
+                            <select name="{{name}}"  class="form-select {{class}}"
+                                {{~#if id}} id="{{id}}" {{/if~}}
+                                {{~#if required}} required="required" {{/if~}}
+                                {{~#if autofocus}} autofocus {{/if~}}
+                                {{~#if disabled}}disabled {{/if~}}
+                                {{~#if multiple}} multiple {{/if~}}
+                                {{~#if (or dropdown searchable options_source)}} 
+                                    data-pre-init="select-dropdown"
+                                    data-sqlpage-js="{{static_path 'tomselect.js'}}"
+                                {{/if~}}
+                                {{~#if options_source}} data-options_source="{{options_source}}" {{/if~}}
+                                {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
+                                {{~#if create_new}} data-create_new={{create_new}} {{/if~}}
+                                >
+                                {{#if empty_option}}<option value="">{{empty_option}}</option>{{/if}}
+                                {{#each (parse_json options)}}
+                                    <option value="{{value}}" {{#if (or (loose_eq ../value value) selected)}}selected{{/if}}>{{label}}</option>
+                                {{/each}}
+                            </select>
+                            {{#if suffix}}<span class="input-group-text">{{suffix}}</span>{{/if}}
+                        </div>
                     {{else}}
                         <div class="input-group">
                             {{#if prefix_icon}}<span class="input-group-text">{{icon_img prefix_icon}}</span>{{/if}}

From 2ecb1e66062790234b85ef54de35125d6f7b0670 Mon Sep 17 00:00:00 2001
From: francesco-cattoglio <francesco-cattoglio@users.noreply.github.com>
Date: Tue, 13 Oct 2026 10:46:35 +0200
Subject: [PATCH 2/4] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91629566d..2154a8a6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 - `cargo install sqlpage`, and any build from the crates.io tarball, no longer needs internet access. The browser libraries now come from npm and ship inside the published crate. Building from a git checkout needs `npm ci` first. Pre-built binaries and the Docker image are unaffected.
 - The browser libraries are now part of the browser scripts. SQLPage no longer defines the `window.tabler` and `window.bootstrap` globals; custom scripts that reached for them should load their own copy of Bootstrap.
 - The startup message now reports the address the server actually bound instead of the one it was configured with.
+- Inside a form component you can now use the `prefix`, `prefix_icon` and `suffix` row-level parameters when `type` is `select`. 
 
 ## v0.46.3
 

From 294201dc8577589aece1193c4fbfae71a9676439 Mon Sep 17 00:00:00 2001
From: Francesco Cattoglio <francesco.cattoglio@gmail.com>
Date: Tue, 13 Oct 2026 14:18:30 +0200
Subject: [PATCH 3/4] Added a test for the 'prefix' row-level parameter on
 'select' form field

---
 .../component_rendering/form_select_uses_prefix.sql           | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 tests/sql_test_files/component_rendering/form_select_uses_prefix.sql

diff --git a/tests/sql_test_files/component_rendering/form_select_uses_prefix.sql b/tests/sql_test_files/component_rendering/form_select_uses_prefix.sql
new file mode 100644
index 000000000..d90d09352
--- /dev/null
+++ b/tests/sql_test_files/component_rendering/form_select_uses_prefix.sql
@@ -0,0 +1,4 @@
+select 'form' as component;
+select 'select' as type,
+    'It works !' as prefix,
+    '[{"label": "Orange", "value": 0}, {"label": "Apple", "value": 1}, {"label": "Banana", "value": 3}]' as options;

From d9b76b91f4dc6f1a102a6695e991673fba60d59b Mon Sep 17 00:00:00 2001
From: Francesco Cattoglio <francesco.cattoglio@gmail.com>
Date: Tue, 13 Oct 2026 14:19:54 +0200
Subject: [PATCH 4/4] Added a prefix icon to the 'select' form example

---
 examples/official-site/sqlpage/migrations/01_documentation.sql | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index 460c82093..7766adbbf 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -386,6 +386,7 @@ In SQLite, the query would look like
 SELECT 
     ''select'' as type,
     ''Select a fruit...'' as empty_option,
+    ''cherry'' as prefix_icon,
     json_group_array(json_object(
         ''label'', name,
         ''value'', id