form improvements with new types of field: header and switch (#906)

* form improvements with new types of field: header and switch

* added checked toggle switch example

* add names to the switch checkboxes

* update form header margins

* trailing whitespace

* docs

---------

Co-authored-by: lovasoa <[email protected]>

Author: olivierauverlot

CHANGELOG.md

@@ -18,6 +18,8 @@
  - Updated sqlparser to [v0.56](https://github.com/apache/datafusion-sqlparser-rs/blob/main/changelog/0.56.0.md), with many improvements including:
   - Add support for the xmltable(...) function in postgres
   - Add support for MSSQL IF/ELSE statements.
+ - Add support for nice "switch" checkboxes in the form component using `'switch' as type`
+ - Add support for headers in the form component using
 
 ## v0.34 (2025-03-23)
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -276,7 +276,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('id', 'A unique identifier for the form, which can then be used to validate the form from a button outside of the form.', 'TEXT', TRUE, TRUE),
     ('auto_submit', 'Automatically submit the form when the user changes any of its fields, and remove the validation button.', 'BOOLEAN', TRUE, TRUE),
     -- item level
-    ('type', 'The type of input to use: text for a simple text field, textarea for a multi-line text input control, number to accept only numbers, checkbox or radio for a button that is part of a group specified in the ''name'' parameter, hidden for a value that will be submitted but not shown to the user. text by default.', 'TEXT', FALSE, TRUE),
+    ('type', 'The type of input to use: text for a simple text field, textarea for a multi-line text input control, number to accept only numbers, checkbox, switch, or radio for a button that is part of a group specified in the ''name'' parameter, header for a form header, hidden for a value that will be submitted but not shown to the user. text by default.', 'TEXT', FALSE, TRUE),
     ('name', 'The name of the input field, that you can use in the target page to get the value the user entered for the field.', 'TEXT', FALSE, FALSE),
     ('label', 'A friendly name for the text field to show to the user.', 'TEXT', FALSE, TRUE),
     ('placeholder', 'A placeholder text that will be shown in the field when is is empty.', 'TEXT', FALSE, TRUE),
@@ -347,6 +347,24 @@ When loading the page, the value for `:username` will be `NULL` if no value has
     json('[{"component":"form"}, '||
     '{"name": "Your account", "prefix_icon": "mail", "prefix": "Email:", "suffix": "@mydomain.com"}, ' ||
     ']')),
+
+    ('form','With the header type, you can group your input fields based on a theme. For example, you can categorize fields according to a person''s identity and their contact information.',
+    json('[{"component":"form","title":"Information about the person"}, '||
+    '{"type": "header", "label": "Identity"},' ||
+    '{"name": "Name"},' ||
+    '{"name": "Surname"},' ||
+    '{"type": "header","label": "Contact"},' ||
+    '{"name": "phone", "label": "Phone number"},' ||
+    '{"name": "Email"},' ||
+    ']')),
+
+ ('form','A toggle switch in an HTML form is a user interface element that allows users to switch between two states, typically "on" and "off." It visually resembles a physical switch and is often used for settings or options that can be enabled or disabled.',
+    json('[{"component":"form"},
+    {"type": "switch", "label": "Dark theme", "name": "dark", "description": "Enable dark theme"},
+    {"type": "switch", "label": "A required toggle switch", "name": "my_checkbox", "required": true,"checked": true},
+    {"type": "switch", "label": "A disabled toggle switch", "name": "my_field", "disabled": true}
+    ]')),
+
     ('form', 'This example illustrates the use of the `select` type.
 In this select input, the various options are hardcoded, but they could also be loaded from a database table,
 [using a function to convert the rows into a json array](/blog.sql?post=JSON%20in%20SQL%3A%20A%20Comprehensive%20Guide) like 

sqlpage/templates/form.handlebars

@@ -15,6 +15,9 @@
         {{/if}}
         <div class="row">
             {{#each_row}}
+            {{#if (eq type "header")}}
+                <h3 class="text-center mt-2 mb-1"{{#if id}} id="{{id}}"{{/if}}>{{label}}</h3>
+            {{else}}
             {{#if (or (eq type "radio") (eq type "checkbox"))}}
                 <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column mx-0 my-1 col-md-{{default width 12}}">
                     <label class="form-selectgroup-item flex-fill mx-0">
@@ -39,6 +42,25 @@
                     </label>
                 </div>
             {{else}}
+            {{~#if (eq type "switch")}}
+                <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column mx-0 my-1 col-md-{{default width 12}}">
+                    <label class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}"{{#if required}} required{{/if}}{{#if checked}} checked{{/if}}{{#if disabled}} disabled{{/if~}}/>
+                        <span class="form-check-label">
+                                {{default label value}}
+                                {{~#if required}}
+                                    <span class="text-danger ms-1" aria-label="required" title="required">*</span>
+                                {{/if}}
+                                {{#if description}}
+                                    <small class="form-hint mt-0">{{description}}</small>
+                                {{/if}}
+                                {{#if description_md}}
+                                    <small class="form-hint mt-0">{{{markdown description_md}}}</small>
+                                {{/if}}
+                        </span>
+                    </label>
+                </div>
+            {{else}}
             {{~#if (eq type "hidden")}}
                 <input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
             {{else}}
@@ -132,6 +154,8 @@
                 </label>
             {{~/if~}}
             {{/if}}
+            {{/if}}
+            {{/if}}
             {{#if (eq type "file")}}
                 <!-- Change the form encoding type if this is a file input-->
                 {{#delay}}formenctype="multipart/form-data"{{/delay}}