diff --git a/lib/modal/use-dialog.ts b/lib/modal/use-dialog.ts
index 92b5422..2e7828e 100644
--- a/lib/modal/use-dialog.ts
+++ b/lib/modal/use-dialog.ts
@@ -3,10 +3,8 @@ import { useDispose } from 'zeed'
 import { mountComponentAsApp } from '../basic/app-helper'
 import OuiDialog from './oui-dialog.vue'
 
-// const log = Logger('ui:dialog', globalThis.debugUI ?? false)
-
 /** Environment for JS dialog replacements */
-export function useDialog(component: Component = OuiDialog) {
+export function useDialog<T = Component>(component: T = OuiDialog) {
   let cancel: any
 
   async function showDialog<T>(props: any) {
diff --git a/package.json b/package.json
index 8eb8fd8..9307fb5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "author": {
     "name": "Dirk Holtwick",
     "email": "dirk.holtwick@gmail.com",
diff --git a/src/app-form.styl b/src/app-form.styl
index 39716cf..31422ff 100644
--- a/src/app-form.styl
+++ b/src/app-form.styl
@@ -14,5 +14,5 @@ oui-preset-layout();
 }
 
 .oui-form {
-  oui-form-all();
+  oui-form-defaults();
 }
diff --git a/stylus/preset/form.styl b/stylus/preset/form.styl
index 373dc14..bc2e1bf 100644
--- a/stylus/preset/form.styl
+++ b/stylus/preset/form.styl
@@ -1,4 +1,4 @@
-oui-form-all() {
+oui-form-defaults() {
   input[type=text], textarea {
     oui-input-text();
   }
@@ -30,6 +30,33 @@ oui-form-all() {
   select {
     oui-select();
   }
+
+  label {
+    display: block;
+  }
+
+  label:has(input:not([type=checkbox]):not([type=radio])), label:has(select), label:has(textarea) {
+    input, select, textarea {
+      display: block !important;
+      margin-top: 4 !important;
+      max-width: 100%;
+    }
+
+    input, textarea {
+      width: 100%;
+      min-width: 100%;
+    }
+  }
+
+  form {
+    use: stack-y;
+    gap: 16;
+
+    section {
+      use: stack-x;
+      gap: 6;
+    }
+  }
 }
 
 oui-form() {
diff --git a/stylus/story.styl b/stylus/story.styl
index 32aa633..5366518 100644
--- a/stylus/story.styl
+++ b/stylus/story.styl
@@ -16,4 +16,5 @@ html {
   scroll-behavior: smooth;
 }
 
-oui-layout();
\ No newline at end of file
+oui-layout();
+oui-form-defaults();
diff --git a/stylus/ui/form.story.styl b/stylus/ui/form.story.styl
deleted file mode 100644
index 8b4d3de..0000000
--- a/stylus/ui/form.story.styl
+++ /dev/null
@@ -1,32 +0,0 @@
-@require "../story";
-
-oui-preset-layout();
-
-._form {
-  font-family: var(--font) !important;
-
-  &_section {
-    margin-block: 16;
-    gap: 8;
-  }
-
-  label:has(input:not([type=checkbox]):not([type=radio])), label:has(select), label:has(textarea) {
-    display: block;
-    font-size: 12;
-    color: var(--s2-fg);
-
-    input, select, textarea {
-      margin-top: 4;
-      display: block !important;
-      width: 100%;
-    }
-  }
-}
-
-.oui {
-  oui-form();
-}
-
-.oui-form {
-  oui-form-all();
-}
diff --git a/stylus/ui/form.story.vue b/stylus/ui/form.story.vue
index 18635e8..2a0da0e 100644
--- a/stylus/ui/form.story.vue
+++ b/stylus/ui/form.story.vue
@@ -1,47 +1,67 @@
 <script lang="ts" setup>
 import { OuiClose } from '@/lib'
-
-import './form.story.styl'
 </script>
 
 <template>
   <Story auto-props-disabled>
     <Variant title="Form">
       <template #default>
-        <div class="_form oui-form">
+        <form>
           <h1>Form</h1>
-          <div class="_form_section">
+
+          <div>
             Inner
             <input type="text" value="Lorem ipsum semper habeo duo, ut vis. Aliquyam eu splendide. Ut mei eteu nec antiopam corpora. Kasd pretium cetero qui arcu. Assentior ei his usu invidunt kasd justo justo. Semper Ne eleifend Per ut Eam graeci tincidunt. Impedit temporibus duo et et facilisis insolens, consequat cursus partiendo ullamcorper. Vulputate facilisi Donec Aliquam labore inimicus voluptua. Penatibus sea Vel amet. His ius audire In mea Repudiandae nullam sed assentior. Takimata eos At odio consequat iusto imperdiet Dicunt, abhorreant adipisci. Officiis rhoncus leo dicta vitae, clita elementum mauris definiebas. Consetetur te inimicus nec mus. Lorem Usu Duo Aenean corrumpit aliquyam est eum.">
           </div>
-          <div class="_form_section _stack_x">
+
+          <section>
             <input type="text">
             <button>Hello</button>
-          </div>
-          <div class="_form_section _stack_y">
-            <label class="field">
-              Label No. 1
-              <input type="text" placeholder="This is a placeholder">
-            </label>
-            <label class="field">
-              Label No. 2
-              <select />
-            </label>
-          </div>
-          <div class="_form_section">
+          </section>
+
+          <label>
+            Label No. 1
+            <input type="text" placeholder="This is a placeholder">
+          </label>
+
+          <label>
+            Label No. 2
+            <select>
+              <option value="de">
+                Germany
+              </option>
+              <option value="at">
+                Austria
+              </option>
+              <option value="ch">
+                Switzerland
+              </option>
+            </select>
+          </label>
+
+          <label>
+            Label No. 3
+            <textarea>ABC</textarea>
+          </label>
+
+          <div>
             <input type="number" min="0" max="120">
           </div>
-          <div class="_form_section _stack_x">
+
+          <section>
             <textarea class="_textarea_grow">Lorem ipsum semper habeo</textarea>
             <input type="text" value="Lorem ipsum semper habeo">
-          </div>
-          <div class="_form_section">
+          </section>
+
+          <div>
             <textarea>Lorem ipsum semper habeo duo, ut vis. Aliquyam eu splendide. Ut mei eteu nec antiopam corpora. Kasd pretium cetero qui arcu. Assentior ei his usu invidunt kasd justo justo. Semper Ne eleifend Per ut Eam graeci tincidunt. Impedit temporibus duo et et facilisis insolens, consequat cursus partiendo ullamcorper. Vulputate facilisi Donec Aliquam labore inimicus voluptua. Penatibus sea Vel amet. His ius audire In mea Repudiandae nullam sed assentior. Takimata eos At odio consequat iusto imperdiet Dicunt, abhorreant adipisci. Officiis rhoncus leo dicta vitae, clita elementum mauris definiebas. Consetetur te inimicus nec mus. Lorem Usu Duo Aenean corrumpit aliquyam est eum.</textarea>
           </div>
-          <div class="_form_section">
+
+          <div>
             <input type="text">
           </div>
-          <div class="_form_section">
+
+          <div>
             <select>
               <option value="de">
                 Germany
@@ -54,65 +74,72 @@ import './form.story.styl'
               </option>
             </select>
           </div>
-          <div class="_form_section">
+
+          <div>
             <label>
               <input type="checkbox" class="oui-checkbox">
               Not checked
             </label>
-          </div>
-          <div class="_form_section">
             <label>
               <input type="checkbox" class="oui-checkbox" checked>
               Checked
             </label>
           </div>
-          <div class="_form_section">
+
+          <div>
             <label>
               <input type="checkbox" class="oui-switch">
               Unhappy
             </label>
-          </div>
-          <div class="_form_section">
             <label>
               <input type="checkbox" class="oui-switch" checked>
               Happy
             </label>
           </div>
-          <div class="_form_section">
-            <div>
-              <label>
-                <input type="radio" value="1">
-                One
-              </label>
-            </div>
-            <div>
-              <label>
-                <input type="radio" value="2" checked>
-                Two
-              </label>
-            </div>
-            <div>
-              <label>
-                <input type="radio" value="3">
-                Three
-              </label>
-            </div>
+
+          <div>
+            <label>
+              <input type="radio" value="1">
+              One
+            </label>
+            <label>
+              <input type="radio" value="2" checked>
+              Two
+            </label>
+            <label>
+              <input type="radio" value="3">
+              Three
+            </label>
           </div>
 
-          <div class="_form_section _stack_x">
+          <section>
             <button disabled>
               Cancel
             </button>
             <button>OK</button>
             <button><OuiClose /> Smile</button>
             <button>Smile <OuiClose /></button>
-          </div>
-        </div>
+          </section>
+        </form>
       </template>
     </Variant>
   </story>
 </template>
 
 <docs lang="md">
-# Forms
+# oui-form
+
+Themed input elements.
+
+## oui-form-defaults()
+
+Sets all elements to themed by default. You can still limit the scope e.g. by doing so:
+
+```stylus
+.oui-form {
+  oui-form-defaults()
+}
+```
+
+Additionally `form` will create a spaced vertical stack and `section` will create a horizontal stack with spacing, useful for button groups.
 </docs>