diff --git a/changelog.md b/changelog.md
index c0a8ca3..5eaa6d3 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-12 - 3.76.1 - fix(demo-inputs)
+wrap input component demos in dees-form containers for consistent form integration
+
+- Adds dees-form wrappers across multiple input demo pages including checkbox, dropdown, file upload, iban, list, multitoggle, phone, quantity selector, radio group, tags, text, toggle, and typelist demos
+- Keeps horizontal and grid example layouts intact while nesting them inside form containers
+- Cleans up file upload and text demo markup to better match expected dees-form structure
+
 ## 2026-04-12 - 3.76.0 - feat(input)
 separate label info tooltips from description text across input components
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 82ffa39..deb3820 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.76.0',
+  version: '3.76.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
diff --git a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts
index 683a3e4..c61d12b 100644
--- a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts
@@ -111,90 +111,92 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
-        <div class="checkbox-group">
-          <dees-input-checkbox 
-            .label=${'I agree to the Terms and Conditions'} 
+        <dees-form>
+          <dees-input-checkbox
+            .label=${'I agree to the Terms and Conditions'}
             .value=${true}
             .key=${'terms'}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Subscribe to newsletter'} 
+
+          <dees-input-checkbox
+            .label=${'Subscribe to newsletter'}
             .value=${false}
             .key=${'newsletter'}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Enable notifications'} 
+
+          <dees-input-checkbox
+            .label=${'Enable notifications'}
             .value=${false}
             .description=${'Receive email updates about your account'}
             .key=${'notifications'}
           ></dees-input-checkbox>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
-        <div class="checkbox-group">
-          <dees-input-checkbox 
-            .label=${'Default state'} 
+        <dees-form>
+          <dees-input-checkbox
+            .label=${'Default state'}
             .value=${false}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Checked state'} 
+
+          <dees-input-checkbox
+            .label=${'Checked state'}
             .value=${true}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Disabled unchecked'} 
+
+          <dees-input-checkbox
+            .label=${'Disabled unchecked'}
             .value=${false}
             .disabled=${true}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Disabled checked'} 
+
+          <dees-input-checkbox
+            .label=${'Disabled checked'}
             .value=${true}
             .disabled=${true}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Required checkbox'} 
+
+          <dees-input-checkbox
+            .label=${'Required checkbox'}
             .required=${true}
             .key=${'required'}
           ></dees-input-checkbox>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
-        <div class="horizontal-checkboxes">
-          <dees-input-checkbox 
-            .label=${'Option A'} 
-            .value=${false}
-            .layoutMode=${'horizontal'}
-            .key=${'optionA'}
-          ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Option B'} 
-            .value=${true}
-            .layoutMode=${'horizontal'}
-            .key=${'optionB'}
-          ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Option C'} 
-            .value=${false}
-            .layoutMode=${'horizontal'}
-            .key=${'optionC'}
-          ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Option D'} 
-            .value=${true}
-            .layoutMode=${'horizontal'}
-            .key=${'optionD'}
-          ></dees-input-checkbox>
-        </div>
+        <dees-form>
+          <div class="horizontal-checkboxes">
+            <dees-input-checkbox
+              .label=${'Option A'}
+              .value=${false}
+              .layoutMode=${'horizontal'}
+              .key=${'optionA'}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox
+              .label=${'Option B'}
+              .value=${true}
+              .layoutMode=${'horizontal'}
+              .key=${'optionB'}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox
+              .label=${'Option C'}
+              .value=${false}
+              .layoutMode=${'horizontal'}
+              .key=${'optionC'}
+            ></dees-input-checkbox>
+
+            <dees-input-checkbox
+              .label=${'Option D'}
+              .value=${true}
+              .layoutMode=${'horizontal'}
+              .key=${'optionD'}
+            ></dees-input-checkbox>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
@@ -204,76 +206,76 @@ export const demoFunc = () => html`
         </div>
         
         <div class="feature-list">
-          <div class="checkbox-group">
-            <dees-input-checkbox 
-              .label=${'Dark Mode Support'} 
+          <dees-form>
+            <dees-input-checkbox
+              .label=${'Dark Mode Support'}
               .value=${true}
               .key=${'feature1'}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${'Email Notifications'} 
+
+            <dees-input-checkbox
+              .label=${'Email Notifications'}
               .value=${true}
               .key=${'feature2'}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${'Two-Factor Authentication'} 
+
+            <dees-input-checkbox
+              .label=${'Two-Factor Authentication'}
               .value=${false}
               .key=${'feature3'}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${'API Access'} 
+
+            <dees-input-checkbox
+              .label=${'API Access'}
               .value=${true}
               .key=${'feature4'}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${'Advanced Analytics'} 
+
+            <dees-input-checkbox
+              .label=${'Advanced Analytics'}
               .value=${false}
               .key=${'feature5'}
             ></dees-input-checkbox>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
       
       <dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
         <div class="form-section">
           <h4 class="section-title">Privacy Preferences</h4>
-          
-          <div class="checkbox-group">
-            <dees-input-checkbox 
-              .label=${'Share analytics data'} 
+
+          <dees-form>
+            <dees-input-checkbox
+              .label=${'Share analytics data'}
               .value=${true}
               .description=${'Help us improve by sharing anonymous usage data'}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${'Personalized recommendations'} 
+
+            <dees-input-checkbox
+              .label=${'Personalized recommendations'}
               .value=${true}
               .description=${'Get suggestions based on your activity'}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${'Marketing communications'} 
+
+            <dees-input-checkbox
+              .label=${'Marketing communications'}
               .value=${false}
               .description=${'Receive promotional emails and special offers'}
             ></dees-input-checkbox>
-            
-            <dees-input-checkbox 
-              .label=${'Third-party integrations'} 
+
+            <dees-input-checkbox
+              .label=${'Third-party integrations'}
               .value=${false}
               .description=${'Allow approved partners to access your data'}
             ></dees-input-checkbox>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
       
       <dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
-        <div class="checkbox-group">
-          <dees-input-checkbox 
-            .label=${'Feature toggle'} 
+        <dees-form>
+          <dees-input-checkbox
+            .label=${'Feature toggle'}
             .value=${false}
             @changeSubject=${(event: CustomEvent) => {
               const output = document.querySelector('#checkbox-output');
@@ -283,9 +285,9 @@ export const demoFunc = () => html`
               }
             }}
           ></dees-input-checkbox>
-          
-          <dees-input-checkbox 
-            .label=${'Debug mode'} 
+
+          <dees-input-checkbox
+            .label=${'Debug mode'}
             .value=${false}
             @changeSubject=${(event: CustomEvent) => {
               const output = document.querySelector('#debug-output');
@@ -295,8 +297,8 @@ export const demoFunc = () => html`
               }
             }}
           ></dees-input-checkbox>
-        </div>
-        
+        </dees-form>
+
         <div class="interactive-section">
           <div id="checkbox-output" class="output-text">Feature is disabled</div>
           <div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
diff --git a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
index 6408aee..2be59ad 100644
--- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
@@ -69,7 +69,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-dropdown
             .label=${'Select Country'}
             .description=${'Choose the country where your business is registered'}
@@ -95,7 +95,7 @@ export const demoFunc = () => html`
               { option: 'Guest', key: 'guest' }
             ]}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -136,40 +136,42 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
-        <div class="horizontal-group">
-          <dees-input-dropdown
-            .label=${'Department'}
-            .layoutMode=${'horizontal'}
-            .options=${[
-              { option: 'Engineering', key: 'eng' },
-              { option: 'Design', key: 'design' },
-              { option: 'Marketing', key: 'marketing' },
-              { option: 'Sales', key: 'sales' }
-            ]}
-          ></dees-input-dropdown>
-          
-          <dees-input-dropdown
-            .label=${'Team Size'}
-            .layoutMode=${'horizontal'}
-            .enableSearch=${false}
-            .options=${[
-              { option: '1-5', key: 'small' },
-              { option: '6-20', key: 'medium' },
-              { option: '21-50', key: 'large' },
-              { option: '50+', key: 'xlarge' }
-            ]}
-          ></dees-input-dropdown>
-          
-          <dees-input-dropdown
-            .label=${'Location'}
-            .layoutMode=${'horizontal'}
-            .options=${[
-              { option: 'Remote', key: 'remote' },
-              { option: 'On-site', key: 'onsite' },
-              { option: 'Hybrid', key: 'hybrid' }
-            ]}
-          ></dees-input-dropdown>
-        </div>
+        <dees-form>
+          <div class="horizontal-group">
+            <dees-input-dropdown
+              .label=${'Department'}
+              .layoutMode=${'horizontal'}
+              .options=${[
+                { option: 'Engineering', key: 'eng' },
+                { option: 'Design', key: 'design' },
+                { option: 'Marketing', key: 'marketing' },
+                { option: 'Sales', key: 'sales' }
+              ]}
+            ></dees-input-dropdown>
+
+            <dees-input-dropdown
+              .label=${'Team Size'}
+              .layoutMode=${'horizontal'}
+              .enableSearch=${false}
+              .options=${[
+                { option: '1-5', key: 'small' },
+                { option: '6-20', key: 'medium' },
+                { option: '21-50', key: 'large' },
+                { option: '50+', key: 'xlarge' }
+              ]}
+            ></dees-input-dropdown>
+
+            <dees-input-dropdown
+              .label=${'Location'}
+              .layoutMode=${'horizontal'}
+              .options=${[
+                { option: 'Remote', key: 'remote' },
+                { option: 'On-site', key: 'onsite' },
+                { option: 'Hybrid', key: 'hybrid' }
+              ]}
+            ></dees-input-dropdown>
+          </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -185,7 +187,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-dropdown
             .label=${'Required Field'}
             .required=${true}
@@ -204,7 +206,7 @@ export const demoFunc = () => html`
             ]}
             .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
           ></dees-input-dropdown>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
diff --git a/ts_web/elements/00group-input/dees-input-fileupload/demo.ts b/ts_web/elements/00group-input/dees-input-fileupload/demo.ts
index 320dc81..191c8fe 100644
--- a/ts_web/elements/00group-input/dees-input-fileupload/demo.ts
+++ b/ts_web/elements/00group-input/dees-input-fileupload/demo.ts
@@ -55,41 +55,43 @@ export const demoFunc = () => html`
         .title=${'Modern file uploader'}
         .subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
       >
-        <div class="demo-grid demo-grid--two">
-          <div class="demo-stack">
-            <dees-input-fileupload
-              .label=${'Attachments'}
-              .infoText=${'Upload supporting documents for your request'}
-              .description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
-              .accept=${'image/*,.pdf,.zip'}
-              .maxSize=${10 * 1024 * 1024}
-            ></dees-input-fileupload>
+        <dees-form>
+          <div class="demo-grid demo-grid--two">
+            <div class="demo-stack">
+              <dees-input-fileupload
+                .label=${'Attachments'}
+                .infoText=${'Upload supporting documents for your request'}
+                .description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
+                .accept=${'image/*,.pdf,.zip'}
+                .maxSize=${10 * 1024 * 1024}
+              ></dees-input-fileupload>
 
-            <dees-input-fileupload
-              .label=${'Brand assets'}
-              .infoText=${'Upload high-resolution imagery (JPG/PNG)'}
-              .accept=${'image/jpeg,image/png'}
-              .multiple=${false}
-              .maxSize=${5 * 1024 * 1024}
-              .buttonText=${'Select cover image'}
-            ></dees-input-fileupload>
+              <dees-input-fileupload
+                .label=${'Brand assets'}
+                .infoText=${'Upload high-resolution imagery (JPG/PNG)'}
+                .accept=${'image/jpeg,image/png'}
+                .multiple=${false}
+                .maxSize=${5 * 1024 * 1024}
+                .buttonText=${'Select cover image'}
+              ></dees-input-fileupload>
+            </div>
+
+            <div class="demo-stack">
+              <dees-input-fileupload
+                .label=${'Audio uploads'}
+                .infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
+                .accept=${'audio/*'}
+                .maxSize=${25 * 1024 * 1024}
+              ></dees-input-fileupload>
+
+              <dees-input-fileupload
+                .label=${'Disabled example'}
+                .infoText=${'Uploader is disabled while moderation is pending'}
+                .disabled=${true}
+              ></dees-input-fileupload>
+            </div>
           </div>
-
-          <div class="demo-stack">
-            <dees-input-fileupload
-              .label=${'Audio uploads'}
-              .infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
-              .accept=${'audio/*'}
-              .maxSize=${25 * 1024 * 1024}
-            ></dees-input-fileupload>
-
-            <dees-input-fileupload
-              .label=${'Disabled example'}
-              .infoText=${'Uploader is disabled while moderation is pending'}
-              .disabled=${true}
-            ></dees-input-fileupload>
-          </div>
-        </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel
@@ -98,7 +100,6 @@ export const demoFunc = () => html`
       >
         <div class="demo-grid">
           <dees-form>
-            <div class="demo-stack">
               <dees-input-text
                 .label=${'Project name'}
                 .infoText=${'How should we refer to this project internally?'}
@@ -140,7 +141,6 @@ export const demoFunc = () => html`
               ></dees-input-text>
 
               <dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
-            </div>
           </dees-form>
 
           <div class="demo-note">
diff --git a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
index 23c496e..74e18bc 100644
--- a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts
@@ -30,7 +30,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-iban
             .label=${'Bank Account IBAN'}
             .infoText=${'Enter your International Bank Account Number'}
@@ -42,27 +42,29 @@ export const demoFunc = () => html`
             .infoText=${'This IBAN has been verified'}
             .value=${'DE89370400440532013000'}
           ></dees-input-iban>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
-        <div class="payment-group">
-          <dees-input-text 
-            .label=${'Account Holder'} 
-            .layoutMode=${'horizontal'}
-            .value=${'John Doe'}
-          ></dees-input-text>
-          
-          <dees-input-iban 
-            .label=${'IBAN'} 
-            .layoutMode=${'horizontal'}
-            .value=${'GB82WEST12345698765432'}
-          ></dees-input-iban>
-        </div>
+        <dees-form>
+          <div class="payment-group">
+            <dees-input-text
+              .label=${'Account Holder'}
+              .layoutMode=${'horizontal'}
+              .value=${'John Doe'}
+            ></dees-input-text>
+
+            <dees-input-iban
+              .label=${'IBAN'}
+              .layoutMode=${'horizontal'}
+              .value=${'GB82WEST12345698765432'}
+            ></dees-input-iban>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-iban
             .label=${'Payment Account'}
             .infoText=${'Required for processing payments'}
@@ -75,7 +77,7 @@ export const demoFunc = () => html`
             .value=${'FR1420041010050500013M02606'}
             .disabled=${true}
           ></dees-input-iban>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
diff --git a/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts b/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts
index 410cc61..4570858 100644
--- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts
@@ -109,25 +109,27 @@ export const demoFunc = () => html`
       </dees-panel>
 
       <dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
-        <div class="grid-layout">
-          <dees-input-list
-            .label=${'Team Members (Min 2, Max 5)'}
-            .placeholder=${'Add team member...'}
-            .minItems=${2}
-            .maxItems=${5}
-            .value=${['Alice', 'Bob']}
-            .required=${true}
-            .description=${'Add 2-5 team members'}
-          ></dees-input-list>
-          
-          <dees-input-list
-            .label=${'Unique Tags (No Duplicates)'}
-            .placeholder=${'Add unique tag...'}
-            .allowDuplicates=${false}
-            .value=${['frontend', 'backend', 'database']}
-            .description=${'Duplicate items are not allowed'}
-          ></dees-input-list>
-        </div>
+        <dees-form>
+          <div class="grid-layout">
+            <dees-input-list
+              .label=${'Team Members (Min 2, Max 5)'}
+              .placeholder=${'Add team member...'}
+              .minItems=${2}
+              .maxItems=${5}
+              .value=${['Alice', 'Bob']}
+              .required=${true}
+              .description=${'Add 2-5 team members'}
+            ></dees-input-list>
+
+            <dees-input-list
+              .label=${'Unique Tags (No Duplicates)'}
+              .placeholder=${'Add unique tag...'}
+              .allowDuplicates=${false}
+              .value=${['frontend', 'backend', 'database']}
+              .description=${'Duplicate items are not allowed'}
+            ></dees-input-list>
+          </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
diff --git a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts
index 73b9957..1dd7be5 100644
--- a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts
@@ -52,81 +52,83 @@ export const demoFunc = () => html`
       <div class="section">
         <div class="section-title">Multi-Option Toggle</div>
         <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
-        
-        <dees-input-multitoggle
-          .label=${'Display Mode'}
-          .infoText=${'Choose how content is displayed'}
-          .description=${'This setting affects how items appear on your dashboard'}
-          .options=${['List View', 'Grid View', 'Compact']}
-          .selectedOption=${'Grid View'}
-        ></dees-input-multitoggle>
-        
-        <br><br>
-        
-        <dees-input-multitoggle
-          .label=${'T-Shirt Size'}
-          .infoText=${'Select your preferred size'}
-          .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
-          .selectedOption=${'M'}
-        ></dees-input-multitoggle>
+
+        <dees-form>
+          <dees-input-multitoggle
+            .label=${'Display Mode'}
+            .infoText=${'Choose how content is displayed'}
+            .description=${'This setting affects how items appear on your dashboard'}
+            .options=${['List View', 'Grid View', 'Compact']}
+            .selectedOption=${'Grid View'}
+          ></dees-input-multitoggle>
+
+          <dees-input-multitoggle
+            .label=${'T-Shirt Size'}
+            .infoText=${'Select your preferred size'}
+            .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
+            .selectedOption=${'M'}
+          ></dees-input-multitoggle>
+        </dees-form>
       </div>
       
       <div class="section">
         <div class="section-title">Boolean Toggle</div>
         <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
-        
-        <dees-input-multitoggle
-          .label=${'Notifications'}
-          .infoText=${'Enable or disable push notifications'}
-          .type=${'boolean'}
-          .selectedOption=${'true'}
-        ></dees-input-multitoggle>
-        
-        <br><br>
-        
-        <dees-input-multitoggle
-          .label=${'Theme Mode'}
-          .infoText=${'Switch between light and dark theme'}
-          .type=${'boolean'}
-          .booleanTrueName=${'Dark'}
-          .booleanFalseName=${'Light'}
-          .selectedOption=${'Dark'}
-        ></dees-input-multitoggle>
+
+        <dees-form>
+          <dees-input-multitoggle
+            .label=${'Notifications'}
+            .infoText=${'Enable or disable push notifications'}
+            .type=${'boolean'}
+            .selectedOption=${'true'}
+          ></dees-input-multitoggle>
+
+          <dees-input-multitoggle
+            .label=${'Theme Mode'}
+            .infoText=${'Switch between light and dark theme'}
+            .type=${'boolean'}
+            .booleanTrueName=${'Dark'}
+            .booleanFalseName=${'Light'}
+            .selectedOption=${'Dark'}
+          ></dees-input-multitoggle>
+        </dees-form>
       </div>
       
       <div class="section">
         <div class="section-title">Settings Grid</div>
         <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
-        
-        <div class="settings-grid">
-          <dees-input-multitoggle
-            .label=${'Auto-Save'}
-            .type=${'boolean'}
-            .booleanTrueName=${'Enabled'}
-            .booleanFalseName=${'Disabled'}
-            .selectedOption=${'Enabled'}
-          ></dees-input-multitoggle>
-          
-          <dees-input-multitoggle
-            .label=${'Language'}
-            .options=${['English', 'German', 'French', 'Spanish']}
-            .selectedOption=${'English'}
-          ></dees-input-multitoggle>
-          
-          <dees-input-multitoggle
-            .label=${'Quality'}
-            .options=${['Low', 'Medium', 'High', 'Ultra']}
-            .selectedOption=${'High'}
-          ></dees-input-multitoggle>
-          
-          <dees-input-multitoggle
-            .label=${'Privacy'}
-            .type=${'boolean'}
-            .booleanTrueName=${'Private'}
-            .booleanFalseName=${'Public'}
-            .selectedOption=${'Private'}
-          ></dees-input-multitoggle>
-        </div>
+
+        <dees-form>
+          <div class="settings-grid">
+            <dees-input-multitoggle
+              .label=${'Auto-Save'}
+              .type=${'boolean'}
+              .booleanTrueName=${'Enabled'}
+              .booleanFalseName=${'Disabled'}
+              .selectedOption=${'Enabled'}
+            ></dees-input-multitoggle>
+
+            <dees-input-multitoggle
+              .label=${'Language'}
+              .options=${['English', 'German', 'French', 'Spanish']}
+              .selectedOption=${'English'}
+            ></dees-input-multitoggle>
+
+            <dees-input-multitoggle
+              .label=${'Quality'}
+              .options=${['Low', 'Medium', 'High', 'Ultra']}
+              .selectedOption=${'High'}
+            ></dees-input-multitoggle>
+
+            <dees-input-multitoggle
+              .label=${'Privacy'}
+              .type=${'boolean'}
+              .booleanTrueName=${'Private'}
+              .booleanFalseName=${'Public'}
+              .selectedOption=${'Private'}
+            ></dees-input-multitoggle>
+          </div>
+        </dees-form>
       </div>
       
       <div class="section">
diff --git a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
index fabe935..fef4326 100644
--- a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts
@@ -30,7 +30,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-phone
             .label=${'Phone Number'}
             .infoText=${'Enter your phone number with country code'}
@@ -44,27 +44,29 @@ export const demoFunc = () => html`
             .required=${true}
             .placeholder=${'+1 (555) 000-0000'}
           ></dees-input-phone>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
-        <div class="horizontal-group">
-          <dees-input-phone 
-            .label=${'Mobile'} 
-            .layoutMode=${'horizontal'}
-            .value=${'4155551234'}
-          ></dees-input-phone>
-          
-          <dees-input-phone 
-            .label=${'Office'} 
-            .layoutMode=${'horizontal'}
-            .placeholder=${'+1 (800) 555-0000'}
-          ></dees-input-phone>
-        </div>
+        <dees-form>
+          <div class="horizontal-group">
+            <dees-input-phone
+              .label=${'Mobile'}
+              .layoutMode=${'horizontal'}
+              .value=${'4155551234'}
+            ></dees-input-phone>
+
+            <dees-input-phone
+              .label=${'Office'}
+              .layoutMode=${'horizontal'}
+              .placeholder=${'+1 (800) 555-0000'}
+            ></dees-input-phone>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-phone
             .label=${'International Contact'}
             .infoText=${'Automatically formats international numbers'}
@@ -76,7 +78,7 @@ export const demoFunc = () => html`
             .value=${'911'}
             .disabled=${true}
           ></dees-input-phone>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
diff --git a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
index 23e024b..255e2cc 100644
--- a/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
@@ -66,7 +66,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-quantityselector
             .label=${'Quantity'}
             .infoText=${'Select the desired quantity'}
@@ -79,7 +79,7 @@ export const demoFunc = () => html`
             .infoText=${'Adjust the quantity of items'}
             .value=${3}
           ></dees-input-quantityselector>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -178,7 +178,7 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-quantityselector
             .label=${'Number of Licenses'}
             .infoText=${'Select how many licenses you need'}
@@ -192,7 +192,7 @@ export const demoFunc = () => html`
             .disabled=${true}
             .value=${5}
           ></dees-input-quantityselector>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
diff --git a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
index f1fd488..8335087 100644
--- a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
@@ -48,25 +48,27 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
-        <div class="demo-grid">
-          <dees-input-radiogroup
-            .label=${'Subscription Plan'}
-            .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
-            .selectedOption=${'Pro - $29/month'}
-            .description=${'Choose your subscription tier'}
-          ></dees-input-radiogroup>
-          
-          <dees-input-radiogroup
-            .label=${'Priority Level'}
-            .options=${['High', 'Medium', 'Low']}
-            .selectedOption=${'Medium'}
-            .required=${true}
-          ></dees-input-radiogroup>
-        </div>
+        <dees-form>
+          <div class="demo-grid">
+            <dees-input-radiogroup
+              .label=${'Subscription Plan'}
+              .options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
+              .selectedOption=${'Pro - $29/month'}
+              .description=${'Choose your subscription tier'}
+            ></dees-input-radiogroup>
+
+            <dees-input-radiogroup
+              .label=${'Priority Level'}
+              .options=${['High', 'Medium', 'Low']}
+              .selectedOption=${'Medium'}
+              .required=${true}
+            ></dees-input-radiogroup>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-radiogroup
             .label=${'Do you agree with the terms?'}
             .options=${['Yes', 'No', 'Maybe']}
@@ -81,7 +83,7 @@ export const demoFunc = () => html`
             .selectedOption=${'Intermediate'}
             .description=${'Select your experience level with web development'}
           ></dees-input-radiogroup>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -106,41 +108,45 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
-        <div class="demo-grid">
-          <dees-input-radiogroup
-            .label=${'How satisfied are you?'}
-            .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
-            .selectedOption=${'Satisfied'}
-          ></dees-input-radiogroup>
-          
-          <dees-input-radiogroup
-            .label=${'Would you recommend us?'}
-            .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
-            .selectedOption=${'Probably'}
-          ></dees-input-radiogroup>
-        </div>
+        <dees-form>
+          <div class="demo-grid">
+            <dees-input-radiogroup
+              .label=${'How satisfied are you?'}
+              .options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
+              .selectedOption=${'Satisfied'}
+            ></dees-input-radiogroup>
+
+            <dees-input-radiogroup
+              .label=${'Would you recommend us?'}
+              .options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
+              .selectedOption=${'Probably'}
+            ></dees-input-radiogroup>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
-        <div class="demo-grid">
-          <dees-input-radiogroup
-            .label=${'Required Selection'}
-            .options=${['Option A', 'Option B', 'Option C']}
-            .required=${true}
-            .description=${'This field is required'}
-          ></dees-input-radiogroup>
-          
-          <dees-input-radiogroup
-            .label=${'Disabled State'}
-            .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
-            .selectedOption=${'Disabled Option 2'}
-            .disabled=${true}
-          ></dees-input-radiogroup>
-        </div>
+        <dees-form>
+          <div class="demo-grid">
+            <dees-input-radiogroup
+              .label=${'Required Selection'}
+              .options=${['Option A', 'Option B', 'Option C']}
+              .required=${true}
+              .description=${'This field is required'}
+            ></dees-input-radiogroup>
+
+            <dees-input-radiogroup
+              .label=${'Disabled State'}
+              .options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
+              .selectedOption=${'Disabled Option 2'}
+              .disabled=${true}
+            ></dees-input-radiogroup>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-radiogroup
             .label=${'Theme Preference'}
             .options=${[
@@ -165,7 +171,7 @@ export const demoFunc = () => html`
             .selectedOption=${'English'}
             .direction=${'horizontal'}
           ></dees-input-radiogroup>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
diff --git a/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts b/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts
index 6f4c195..68cdb06 100644
--- a/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts
@@ -115,24 +115,26 @@ export const demoFunc = () => html`
       </dees-panel>
 
       <dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
-        <div class="grid-layout">
-          <dees-input-tags
-            .label=${'Top 3 Skills'}
-            .placeholder=${'Add up to 3 skills...'}
-            .maxTags=${3}
-            .value=${['Design', 'Development']}
-            .description=${'Maximum 3 tags allowed'}
-          ></dees-input-tags>
-          
-          <dees-input-tags
-            .label=${'Categories (Max 5)'}
-            .placeholder=${'Select categories...'}
-            .maxTags=${5}
-            .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
-            .value=${['Tutorial', 'Guide']}
-            .description=${'Choose up to 5 categories'}
-          ></dees-input-tags>
-        </div>
+        <dees-form>
+          <div class="grid-layout">
+            <dees-input-tags
+              .label=${'Top 3 Skills'}
+              .placeholder=${'Add up to 3 skills...'}
+              .maxTags=${3}
+              .value=${['Design', 'Development']}
+              .description=${'Maximum 3 tags allowed'}
+            ></dees-input-tags>
+
+            <dees-input-tags
+              .label=${'Categories (Max 5)'}
+              .placeholder=${'Select categories...'}
+              .maxTags=${5}
+              .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
+              .value=${['Tutorial', 'Guide']}
+              .description=${'Choose up to 5 categories'}
+            ></dees-input-tags>
+          </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>
diff --git a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
index 7416115..0c524b8 100644
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
@@ -89,7 +89,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Username'}
             .value=${'johndoe'}
@@ -110,7 +110,7 @@ export const demoFunc = () => html`
             .value=${'secret123'}
             .key=${'password'}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -140,28 +140,30 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
-        <div class="horizontal-group">
-          <dees-input-text 
-            .label=${'First Name'} 
-            .value=${'John'} 
-            .layoutMode=${'horizontal'}
-            .key=${'firstName'}
-          ></dees-input-text>
-          
-          <dees-input-text 
-            .label=${'Last Name'} 
-            .value=${'Doe'} 
-            .layoutMode=${'horizontal'}
-            .key=${'lastName'}
-          ></dees-input-text>
-          
-          <dees-input-text 
-            .label=${'Age'} 
-            .value=${'28'} 
-            .layoutMode=${'horizontal'}
-            .key=${'age'}
-          ></dees-input-text>
-        </div>
+        <dees-form>
+          <div class="horizontal-group">
+            <dees-input-text
+              .label=${'First Name'}
+              .value=${'John'}
+              .layoutMode=${'horizontal'}
+              .key=${'firstName'}
+            ></dees-input-text>
+
+            <dees-input-text
+              .label=${'Last Name'}
+              .value=${'Doe'}
+              .layoutMode=${'horizontal'}
+              .key=${'lastName'}
+            ></dees-input-text>
+
+            <dees-input-text
+              .label=${'Age'}
+              .value=${'28'}
+              .layoutMode=${'horizontal'}
+              .key=${'age'}
+            ></dees-input-text>
+          </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -181,7 +183,7 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Label on Top (Default)'}
             .value=${'Standard layout'}
@@ -195,25 +197,25 @@ export const demoFunc = () => html`
           ></dees-input-text>
 
           <div class="grid-layout">
-          <dees-input-text 
-            .label=${'City'} 
-            .value=${'New York'} 
+          <dees-input-text
+            .label=${'City'}
+            .value=${'New York'}
             .labelPosition=${'left'}
           ></dees-input-text>
-          
+
           <dees-input-text
             .label=${'ZIP Code'}
             .value=${'10001'}
             .labelPosition=${'left'}
           ></dees-input-text>
         </div>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
     <dees-demowrapper>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Required Field'}
             .required=${true}
@@ -237,7 +239,7 @@ export const demoFunc = () => html`
               return { valid: false, message: 'Please enter a valid email address' };
             }}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
@@ -266,7 +268,7 @@ export const demoFunc = () => html`
       });
     }}>
       <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-text
             .label=${'Password with Toggle'}
             .isPasswordBool=${true}
@@ -280,7 +282,7 @@ export const demoFunc = () => html`
             .value=${'sk-1234567890abcdef'}
             .infoText=${'Keep this key secure and never share it'}
           ></dees-input-text>
-        </div>
+        </dees-form>
       </dees-panel>
     </dees-demowrapper>
     
diff --git a/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts b/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
index c537755..5fd42f3 100644
--- a/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
@@ -116,7 +116,7 @@ export const demoFunc = () => html`
 
     <div class="demo-container">
       <dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Enable feature'}
             .value=${false}
@@ -135,12 +135,12 @@ export const demoFunc = () => html`
             .description=${'This toggle has additional helper text explaining its purpose'}
             .key=${'withDesc'}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
         <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
       </dees-panel>
 
       <dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Default (off)'}
             .value=${false}
@@ -169,42 +169,44 @@ export const demoFunc = () => html`
             .required=${true}
             .description=${'This toggle cannot be turned off'}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
-        <div class="horizontal-toggles">
-          <dees-input-toggle
-            .label=${'WiFi'}
-            .value=${true}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
+        <dees-form>
+          <div class="horizontal-toggles">
+            <dees-input-toggle
+              .label=${'WiFi'}
+              .value=${true}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${'Bluetooth'}
-            .value=${false}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
+            <dees-input-toggle
+              .label=${'Bluetooth'}
+              .value=${false}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${'GPS'}
-            .value=${true}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
+            <dees-input-toggle
+              .label=${'GPS'}
+              .value=${true}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
 
-          <dees-input-toggle
-            .label=${'NFC'}
-            .value=${false}
-            .layoutMode=${'horizontal'}
-          ></dees-input-toggle>
-        </div>
+            <dees-input-toggle
+              .label=${'NFC'}
+              .value=${false}
+              .layoutMode=${'horizontal'}
+            ></dees-input-toggle>
+          </div>
+        </dees-form>
       </dees-panel>
 
       <dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
         <div class="settings-section">
           <h4 class="section-title">Notification Settings</h4>
 
-          <div class="toggle-group">
+          <dees-form>
             <dees-input-toggle
               .label=${'Push notifications'}
               .value=${true}
@@ -232,7 +234,7 @@ export const demoFunc = () => html`
               .description=${'Vibrate for notifications'}
               .key=${'vibration'}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
 
@@ -243,7 +245,7 @@ export const demoFunc = () => html`
         </div>
 
         <div class="feature-toggles">
-          <div class="toggle-group">
+          <dees-form>
             <dees-input-toggle
               .label=${'Dark Mode'}
               .value=${true}
@@ -273,12 +275,12 @@ export const demoFunc = () => html`
               .value=${false}
               .key=${'beta'}
             ></dees-input-toggle>
-          </div>
+          </dees-form>
         </div>
       </dees-panel>
 
       <dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
-        <div class="toggle-group">
+        <dees-form>
           <dees-input-toggle
             .label=${'Airplane mode'}
             .value=${false}
@@ -300,7 +302,7 @@ export const demoFunc = () => html`
               }
             }}
           ></dees-input-toggle>
-        </div>
+        </dees-form>
 
         <div class="interactive-section">
           <div id="airplane-output" class="output-text">Airplane mode: OFF</div>
diff --git a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
index e7f6120..c43651a 100644
--- a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts
@@ -45,7 +45,7 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Tags'}
             .infoText=${'Add tags by typing and pressing Enter'}
@@ -58,11 +58,11 @@ export const demoFunc = () => html`
             .infoText=${'Add email addresses of team members'}
             .value=${['alice@example.com', 'bob@example.com']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Your Skills'}
             .infoText=${'List your professional skills'}
@@ -70,23 +70,23 @@ export const demoFunc = () => html`
           ></dees-input-typelist>
 
           <div class="horizontal-group">
-          <dees-input-typelist
-            .label=${'Categories'}
-            .layoutMode=${'horizontal'}
-            .value=${['Technology', 'Design', 'Business']}
-          ></dees-input-typelist>
-          
-          <dees-input-typelist
-            .label=${'Keywords'}
-            .layoutMode=${'horizontal'}
-            .value=${['innovation', 'startup', 'growth']}
-          ></dees-input-typelist>
-        </div>
-        </div>
+            <dees-input-typelist
+              .label=${'Categories'}
+              .layoutMode=${'horizontal'}
+              .value=${['Technology', 'Design', 'Business']}
+            ></dees-input-typelist>
+
+            <dees-input-typelist
+              .label=${'Keywords'}
+              .layoutMode=${'horizontal'}
+              .value=${['innovation', 'startup', 'growth']}
+            ></dees-input-typelist>
+          </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
-        <div class="input-group">
+        <dees-form>
           <dees-input-typelist
             .label=${'Project Dependencies'}
             .infoText=${'List all required npm packages'}
@@ -100,7 +100,7 @@ export const demoFunc = () => html`
             .disabled=${true}
             .value=${['system', 'protected', 'readonly']}
           ></dees-input-typelist>
-        </div>
+        </dees-form>
       </dees-panel>
       
       <dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>