Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ff39fb
form improvements with new types of field: header and switch
olivierauverlot May 1, 2025
153ecd8
added checked toggle switch example
olivierauverlot May 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions examples/official-site/sqlpage/migrations/01_documentation.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", "description": "Enable dark theme"},' ||
'{"type": "switch", "label": "A required toggle switch", "required": true,"checked": true},' ||
'{"type": "switch", "label": "A disabled toggle switch", "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
Expand Down
26 changes: 25 additions & 1 deletion sqlpage/templates/form.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
{{/if}}
<div class="row">
{{#each_row}}
{{#if (eq type "header")}}
<h3 class="text-center mb-2"{{#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">
Expand All @@ -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}}
Expand Down Expand Up @@ -129,9 +151,11 @@
{{~#if description_md~}}
<small class="form-hint mt-0">{{{markdown description_md}}}</small>
{{~/if~}}
</label>
</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}}
Expand Down
Loading