diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1505dd14..0dbb8b32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,7 @@
- Fixed a problem where database errors would be displayed twice in the error message.
- Fixed layout issues in the card component when embedding content with `embed`: remove double border and padding.
- 
+- Added support for `empty_option` in the form component to add an empty option before the options defined in `options`. Useful when generating other options from a database table.
## 0.30.1 (2024-10-31)
- fix a bug where table sorting would break if table search was not also enabled.
diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index 481fa5e7..aa21da28 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -251,6 +251,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
('max', 'The maximum value to accept for an input of type number', 'REAL', FALSE, TRUE),
('checked', 'Used only for checkboxes and radio buttons. Indicates whether the checkbox should appear as already checked.', 'BOOLEAN', FALSE, TRUE),
('multiple', 'Used only for select elements. Indicates that multiple elements can be selected simultaneously. When using multiple, you should add square brackets after the variable name: ''my_variable[]'' as name', 'BOOLEAN', FALSE, TRUE),
+ ('empty_option', 'Only for inputs of type `select`. Adds an empty option with the given label before the ones defined in `options`. Useful when generating other options from a database table.', 'TEXT', FALSE, TRUE),
('searchable', 'For select and multiple-select elements, displays them with a nice dropdown that allows searching for options.', 'BOOLEAN', FALSE, TRUE),
('dropdown', 'An alias for "searchable".', 'BOOLEAN', FALSE, TRUE),
('create_new', 'In a multiselect with a dropdown, this option allows the user to enter new values, that are not in the list of options.', 'BOOLEAN', FALSE, TRUE),
@@ -322,6 +323,7 @@ In SQLite, the query would look like
```sql
SELECT
''select'' as type,
+ ''Select a fruit...'' as empty_option,
json_group_array(json_object(
''label'', name,
''value'', id
@@ -329,8 +331,10 @@ SELECT
FROM fruits
```
', json('[{"component":"form", "action":"examples/show_variables.sql"},
- {"name": "Fruit", "type": "select", "searchable": true, "value": 1, "options":
- "[{\"label\": \"Orange\", \"value\": 0}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3}]"}
+ {"name": "Fruit", "type": "select",
+ "empty_option": "Select a fruit...",
+ "options":
+ "[{\"label\": \"Orange\", \"value\": 0}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3}]"}
]')),
('form', '### Multi-select
You can authorize the user to select multiple options by setting the `multiple` property to `true`.
diff --git a/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars
index d37bc2a9..84aaa633 100644
--- a/sqlpage/templates/form.handlebars
+++ b/sqlpage/templates/form.handlebars
@@ -75,6 +75,7 @@
{{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
{{~#if create_new}} data-create_new={{create_new}} {{/if~}}
>
+ {{#if empty_option}}{{/if}}
{{#each (parse_json options)}}
{{/each}}