From debe665674e6f0daa4712a1129cd837eead68ff5 Mon Sep 17 00:00:00 2001
From: "Mojsoski, Blagoja (UIS)" <mojsoski93@gmail.com>
Date: Tue, 21 Apr 2026 09:18:01 +0200
Subject: [PATCH 1/2] feat: added realistic template for select

---
 .changeset/crisp-socks-itch.md                |  5 ++++
 .../src/stories/components/checkbox-group.mdx |  2 ++
 .../docs/src/stories/components/option.mdx    |  2 ++
 .../docs/src/stories/templates/select.a11y.ts | 13 +++++++++
 .../src/stories/templates/select.stories.ts   | 29 +++++++++++++++++++
 5 files changed, 51 insertions(+)
 create mode 100644 .changeset/crisp-socks-itch.md

diff --git a/.changeset/crisp-socks-itch.md b/.changeset/crisp-socks-itch.md
new file mode 100644
index 0000000000..26cd63d34d
--- /dev/null
+++ b/.changeset/crisp-socks-itch.md
@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': minor
+---
+
+Added realistic `sd-select` template with option and checkbox, updated the a11y test and added related template links
diff --git a/packages/docs/src/stories/components/checkbox-group.mdx b/packages/docs/src/stories/components/checkbox-group.mdx
index 822c27f826..036e5a10b5 100644
--- a/packages/docs/src/stories/components/checkbox-group.mdx
+++ b/packages/docs/src/stories/components/checkbox-group.mdx
@@ -29,6 +29,8 @@ Used to select multiple options from a list of options.
 
 [Checkbox Group with Tooltip](./?path=/docs/templates-tooltip--docs)
 
+[Select with Option and Checkbox](./?path=/docs/templates-select--docs)
+
 ### Common Use Cases
 
 - Allow users to select multiple options from a list in forms.
diff --git a/packages/docs/src/stories/components/option.mdx b/packages/docs/src/stories/components/option.mdx
index 9794a43f5e..683fb6dd88 100644
--- a/packages/docs/src/stories/components/option.mdx
+++ b/packages/docs/src/stories/components/option.mdx
@@ -29,6 +29,8 @@ Used to define selectable items within various form controls such as select.
 
 [Autocomplete](./?path=/docs/templates-autocomplete--docs)
 
+[Select](./?path=/docs/templates-select--docs)
+
 ### Common Use Cases
 
 - Provide options in selects or comboboxes.
diff --git a/packages/docs/src/stories/templates/select.a11y.ts b/packages/docs/src/stories/templates/select.a11y.ts
index 19835d314e..42f48dd302 100644
--- a/packages/docs/src/stories/templates/select.a11y.ts
+++ b/packages/docs/src/stories/templates/select.a11y.ts
@@ -13,3 +13,16 @@ test('Grouping Options', async ({ page }) => {
       - button "Country"
     `);
 });
+
+test('Select with Option and Checkbox', async ({ page }) => {
+  await page.goto(
+    'http://127.0.0.1:6998/iframe.html?globals=&args=&id=templates-select--select-with-option-and-checkbox&viewMode=story'
+  );
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+      - region "Top right notifications"
+      - region "Bottom center notifications"
+      - text: Choose Fund Category
+      - combobox "Choose Fund Category"
+      - button "Choose Fund Category"
+    `);
+});
diff --git a/packages/docs/src/stories/templates/select.stories.ts b/packages/docs/src/stories/templates/select.stories.ts
index b844c7bfb8..321297574e 100644
--- a/packages/docs/src/stories/templates/select.stories.ts
+++ b/packages/docs/src/stories/templates/select.stories.ts
@@ -43,3 +43,32 @@ export const Default = {
       </sd-select>
     </div>`
 };
+
+export const SelectWithOptionAndCheckbox = {
+  name: 'Select with Option and Checkbox',
+  render: () => html`
+    <div class="w-[400px] h-[500px]">
+      <sd-select
+        id="select-with-checkbox"
+        size="lg"
+        placement="bottom"
+        multiple
+        placeholder="Fund selection"
+        value="option-1 option-3"
+      >
+        <div slot="label" class="font-bold">Choose Fund Category</div>
+
+        <sd-option value="option-1">Union Investment funds</sd-option>
+        <sd-option value="option-2">Institutional retail funds</sd-option>
+        <sd-option value="option-3">Bank-specific funds </sd-option>
+        <sd-option value="option-4">Corporate client fund</sd-option>
+      </sd-select>
+    </div>
+    <script type="module">
+      const selectElement = document.querySelector('#select-with-checkbox');
+      selectElement.localize.setCustomLocalization({
+        numOptionsSelected: num => (num === 0 ? '' : 'Funds selected (' + num + ')')
+      });
+    </script>
+  `
+};

From b8169c635856b4d6eab638afe89aa1fc5523cde1 Mon Sep 17 00:00:00 2001
From: Blagoja Mojsoski <55854229+balco0110@users.noreply.github.com>
Date: Fri, 24 Apr 2026 09:46:39 +0200
Subject: [PATCH 2/2] chore: fixed the wrong margin and wrong naming

---
 packages/docs/src/stories/templates/select.stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/stories/templates/select.stories.ts b/packages/docs/src/stories/templates/select.stories.ts
index 321297574e..e0526b349f 100644
--- a/packages/docs/src/stories/templates/select.stories.ts
+++ b/packages/docs/src/stories/templates/select.stories.ts
@@ -26,7 +26,7 @@ export const Default = {
         <div class="text-black px-4 font-bold">Australia</div>
         <sd-option value="option-1">Brisbane (Queensland)</sd-option>
         <sd-option value="option-2">Sydney (Victoria)</sd-option>
-        <sd-divider class="mb-2"></sd-divider>
+        <sd-divider class="mb-4"></sd-divider>
         <div class="text-black px-4 font-bold">Austria</div>
         <sd-option value="option-3">Graz (Styria)</sd-option>
         <sd-option value="option-4">Hartberg (Styria)</sd-option>
@@ -37,7 +37,7 @@ export const Default = {
         <sd-option value="option-1">Japan</sd-option>
         <sd-option value="option-2">South Korea</sd-option>
         <sd-option value="option-3">Turkey</sd-option>
-        <sd-divider class="mb-2"></sd-divider>
+        <sd-divider class="mb-4"></sd-divider>
         <div class="text-black px-4 font-bold">Australia</div>
         <sd-option value="option-4">Australia</sd-option>
       </sd-select>
@@ -67,7 +67,7 @@ export const SelectWithOptionAndCheckbox = {
     <script type="module">
       const selectElement = document.querySelector('#select-with-checkbox');
       selectElement.localize.setCustomLocalization({
-        numOptionsSelected: num => (num === 0 ? '' : 'Funds selected (' + num + ')')
+        numOptionsSelected: num => (num === 0 ? '' : 'Fund selection (' + num + ')')
       });
     </script>
   `