Fix an issue with radio buttons default state

fixes #751

Author: lovasoa

sqlpage/templates/form.handlebars

@@ -17,7 +17,7 @@
             {{#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">
-                        <input type="{{type}}" {{#if id}}id="{{id}}" {{/if}}name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} {{#if (or checked value)}}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>

tests/end-to-end/official-site.spec.ts

@@ -153,3 +153,27 @@ test("no console errors on map page", async ({ page }) => {
 test("no console errors on card page", async ({ page }) => {
   await checkNoConsoleErrors(page, "card");
 });
+
+test("form component documentation", async ({ page }) => {
+  await page.goto(`${BASE}/component.sql?component=form`);
+  
+  // Find the form that contains radio buttons for component selection
+  const componentForm = page.locator('form', {
+    has: page.getByRole('radio', { name: 'Chart' })
+  });
+  
+  // the form should be visible
+  await expect(componentForm).toBeVisible();
+
+  // Check that "form" is the first and default selected option
+  const mapRadio = componentForm.getByRole("radio", { name: "Map" });
+  await expect(mapRadio).toHaveValue("map");
+  await expect(mapRadio).toBeChecked();
+  
+  // Select "Chart" option and submit
+  await componentForm.getByLabel("Chart").click({ force: true });
+  await componentForm.getByRole("button", { name: "Submit" }).click();
+
+  // Verify we're on the chart documentation page
+  await expect(page.getByRole("heading", { name: /chart/i, level: 1 })).toBeVisible();
+});