diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index 990e38df..ee401164 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "../Icon";
+import { Checkbox, RadioButton } from "./forms/story-components";
 
 export default {
   title: "Styles/Forms",
@@ -20,7 +20,7 @@ const exampleOptionFields = (
 export const Inputs = {
   render: () => (
     <div className="grid sm:grid-cols-2 gap-16">
-      <div>
+      <div className="grid sm:grid-cols-2 gap-16">
         <p className="mb-16 text-neutral-800">Default</p>
         <input
           type="search"
@@ -29,16 +29,7 @@ export const Inputs = {
           autoComplete="off"
         />
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Default (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-        />
-      </div>
-      <div>
+      <div className="grid sm:grid-cols-2 gap-16">
         <p className="mb-16 text-neutral-800">Disabled</p>
         <input
           type="search"
@@ -48,16 +39,6 @@ export const Inputs = {
           disabled
         />
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Disabled (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-          disabled
-        />
-      </div>
       <div>
         <p className="mb-16 text-neutral-800">Invalid</p>
         <input
@@ -69,17 +50,6 @@ export const Inputs = {
         />
         <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Invalid (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-          required
-        />
-        <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
-      </div>
       <div>
         <p className="mb-16 text-neutral-800">With character insert</p>
         <div className="relative">
@@ -125,17 +95,6 @@ export const Dropdowns = {
           Select language
         </div>
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Dark mode</p>
-        <div className="bg-neutral-1300 p-24">
-          <select
-            className="ui-dropdown ui-dropdown-dark"
-            defaultValue="select"
-          >
-            {exampleOptionFields}
-          </select>
-        </div>
-      </div>
     </div>
   ),
 };
@@ -143,53 +102,41 @@ export const Dropdowns = {
 export const Checkboxes = {
   render: () => (
     <div className="grid sm:grid-cols-2 gap-16">
-      <div>
-        <p className="mb-16 text-neutral-800">Default</p>
-        <div className="ui-checkbox-p1">
-          <input
-            data-ui-checkbox-native=""
-            type="checkbox"
-            id="checkbox-example-1"
-            name="checkbox-example-1"
-            value="yes"
-            className="ui-checkbox-input"
-          />
-          <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
-            <Icon
-              name="icon-gui-tick"
-              size="1rem"
-              additionalCSS="ui-checkbox-styled-tick"
-            />
-          </div>
-          <label htmlFor="checkbox-example-1" className="ui-checkbox-label-p1">
-            Subscribe to the Ably newsletter
-          </label>
+      {["Default", "Disabled"].map((label, groupIndex) => (
+        <div key={label} className="flex flex-col gap-8">
+          <p className="mb-16 text-neutral-800">{label}</p>
+          {Array(3)
+            .fill(0)
+            .map((_, i) => (
+              <Checkbox
+                key={i}
+                index={i + groupIndex * 3 + 1}
+                disabled={groupIndex === 1}
+              />
+            ))}
         </div>
-      </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Disabled</p>
-        <div className="ui-checkbox-p1">
-          <input
-            data-ui-checkbox-native=""
-            type="checkbox"
-            id="checkbox-example-2"
-            name="checkbox-example-2"
-            value="yes"
-            className="ui-checkbox-input"
-            disabled
-          />
-          <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
-            <Icon
-              name="icon-gui-tick"
-              size="1rem"
-              additionalCSS="ui-checkbox-styled-tick"
-            />
-          </div>
-          <label htmlFor="checkbox-example-2" className="ui-checkbox-label-p2">
-            Subscribe to the Ably newsletter
-          </label>
+      ))}
+    </div>
+  ),
+};
+
+export const RadioButtons = {
+  render: () => (
+    <div className="grid sm:grid-cols-2 gap-16">
+      {["Default", "Disabled"].map((label, groupIndex) => (
+        <div key={label} className="flex flex-col gap-8">
+          <p className="mb-16 text-neutral-800">{label}</p>
+          {Array(3)
+            .fill(0)
+            .map((_, i) => (
+              <RadioButton
+                key={i}
+                index={i + groupIndex * 3 + 1}
+                disabled={groupIndex === 1}
+              />
+            ))}
         </div>
-      </div>
+      ))}
     </div>
   ),
 };
diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
index 192031d3..5a4f7dfd 100644
--- a/src/core/styles/__snapshots__/Forms.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`Styles/Forms Checkboxes smoke-test 1`] = `
 <div class="grid sm:grid-cols-2 gap-16">
-  <div>
+  <div class="flex flex-col gap-8">
     <p class="mb-16 text-neutral-800">
       Default
     </p>
-    <div class="ui-checkbox-p1">
+    <div class="ui-checkbox-p1 flex items-center">
       <input data-ui-checkbox-native
              type="checkbox"
              id="checkbox-example-1"
@@ -27,19 +27,67 @@ exports[`Styles/Forms Checkboxes smoke-test 1`] = `
       <label for="checkbox-example-1"
              class="ui-checkbox-label-p1"
       >
-        Subscribe to the Ably newsletter
+        Option 1
+      </label>
+    </div>
+    <div class="ui-checkbox-p1 flex items-center">
+      <input data-ui-checkbox-native
+             type="checkbox"
+             id="checkbox-example-2"
+             name="checkbox-example-2"
+             class="ui-checkbox-input"
+             value="yes"
+      >
+      <div data-ui-checkbox-styled
+           class="ui-checkbox-styled"
+      >
+        <svg class="ui-checkbox-styled-tick"
+             style="width: 1rem; height: 1rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-tick">
+          </use>
+        </svg>
+      </div>
+      <label for="checkbox-example-2"
+             class="ui-checkbox-label-p1"
+      >
+        Option 2
+      </label>
+    </div>
+    <div class="ui-checkbox-p1 flex items-center">
+      <input data-ui-checkbox-native
+             type="checkbox"
+             id="checkbox-example-3"
+             name="checkbox-example-3"
+             class="ui-checkbox-input"
+             value="yes"
+      >
+      <div data-ui-checkbox-styled
+           class="ui-checkbox-styled"
+      >
+        <svg class="ui-checkbox-styled-tick"
+             style="width: 1rem; height: 1rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-tick">
+          </use>
+        </svg>
+      </div>
+      <label for="checkbox-example-3"
+             class="ui-checkbox-label-p1"
+      >
+        Option 3
       </label>
     </div>
   </div>
-  <div>
+  <div class="flex flex-col gap-8">
     <p class="mb-16 text-neutral-800">
       Disabled
     </p>
-    <div class="ui-checkbox-p1">
+    <div class="ui-checkbox-p1 flex items-center">
       <input data-ui-checkbox-native
              type="checkbox"
-             id="checkbox-example-2"
-             name="checkbox-example-2"
+             id="checkbox-example-4"
+             name="checkbox-example-4"
              class="ui-checkbox-input"
              disabled
              value="yes"
@@ -54,10 +102,60 @@ exports[`Styles/Forms Checkboxes smoke-test 1`] = `
           </use>
         </svg>
       </div>
-      <label for="checkbox-example-2"
-             class="ui-checkbox-label-p2"
+      <label for="checkbox-example-4"
+             class="ui-checkbox-label-p1"
+      >
+        Option 4
+      </label>
+    </div>
+    <div class="ui-checkbox-p1 flex items-center">
+      <input data-ui-checkbox-native
+             type="checkbox"
+             id="checkbox-example-5"
+             name="checkbox-example-5"
+             class="ui-checkbox-input"
+             disabled
+             value="yes"
+      >
+      <div data-ui-checkbox-styled
+           class="ui-checkbox-styled"
+      >
+        <svg class="ui-checkbox-styled-tick"
+             style="width: 1rem; height: 1rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-tick">
+          </use>
+        </svg>
+      </div>
+      <label for="checkbox-example-5"
+             class="ui-checkbox-label-p1"
+      >
+        Option 5
+      </label>
+    </div>
+    <div class="ui-checkbox-p1 flex items-center">
+      <input data-ui-checkbox-native
+             type="checkbox"
+             id="checkbox-example-6"
+             name="checkbox-example-6"
+             class="ui-checkbox-input"
+             disabled
+             value="yes"
+      >
+      <div data-ui-checkbox-styled
+           class="ui-checkbox-styled"
+      >
+        <svg class="ui-checkbox-styled-tick"
+             style="width: 1rem; height: 1rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-tick">
+          </use>
+        </svg>
+      </div>
+      <label for="checkbox-example-6"
+             class="ui-checkbox-label-p1"
       >
-        Subscribe to the Ably newsletter
+        Option 6
       </label>
     </div>
   </div>
@@ -153,39 +251,12 @@ exports[`Styles/Forms Dropdowns smoke-test 1`] = `
       Select language
     </div>
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Dark mode
-    </p>
-    <div class="bg-neutral-1300 p-24">
-      <select class="ui-dropdown ui-dropdown-dark">
-        <option value="select"
-                disabled
-                selected
-        >
-          Select language
-        </option>
-        <option value="javascript">
-          Javascript
-        </option>
-        <option value="ruby">
-          Ruby
-        </option>
-        <option value="python">
-          Python
-        </option>
-        <option value="java">
-          Java
-        </option>
-      </select>
-    </div>
-  </div>
 </div>
 `;
 
 exports[`Styles/Forms Inputs smoke-test 1`] = `
 <div class="grid sm:grid-cols-2 gap-16">
-  <div>
+  <div class="grid sm:grid-cols-2 gap-16">
     <p class="mb-16 text-neutral-800">
       Default
     </p>
@@ -195,17 +266,7 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
            autocomplete="off"
     >
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Default (dark)
-    </p>
-    <input type="search"
-           class="ui-input ui-input-dark"
-           placeholder="Dark mode input"
-           autocomplete="off"
-    >
-  </div>
-  <div>
+  <div class="grid sm:grid-cols-2 gap-16">
     <p class="mb-16 text-neutral-800">
       Disabled
     </p>
@@ -216,17 +277,6 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
            disabled
     >
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Disabled (dark)
-    </p>
-    <input type="search"
-           class="ui-input ui-input-dark"
-           placeholder="Dark mode input"
-           autocomplete="off"
-           disabled
-    >
-  </div>
   <div>
     <p class="mb-16 text-neutral-800">
       Invalid
@@ -241,20 +291,6 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
       Oof, what an input
     </p>
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Invalid (dark)
-    </p>
-    <input type="search"
-           class="ui-input ui-input-dark"
-           placeholder="Dark mode input"
-           autocomplete="off"
-           required
-    >
-    <p class="ui-text-p3 text-gui-error-red mt-8">
-      Oof, what an input
-    </p>
-  </div>
   <div>
     <p class="mb-16 text-neutral-800">
       With character insert
@@ -273,6 +309,108 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
 </div>
 `;
 
+exports[`Styles/Forms RadioButtons smoke-test 1`] = `
+<div class="grid sm:grid-cols-2 gap-16">
+  <div class="flex flex-col gap-8">
+    <p class="mb-16 text-neutral-800">
+      Default
+    </p>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-1"
+             name="radio-example"
+             class="ui-radio"
+             value="option-1"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-1"
+      >
+        Option 1
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-2"
+             name="radio-example"
+             class="ui-radio"
+             value="option-2"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-2"
+      >
+        Option 2
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-3"
+             name="radio-example"
+             class="ui-radio"
+             value="option-3"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-3"
+      >
+        Option 3
+      </label>
+    </div>
+  </div>
+  <div class="flex flex-col gap-8">
+    <p class="mb-16 text-neutral-800">
+      Disabled
+    </p>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-4"
+             name="radio-example"
+             class="ui-radio"
+             disabled
+             value="option-4"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-4"
+      >
+        Option 4
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-5"
+             name="radio-example"
+             class="ui-radio"
+             disabled
+             value="option-5"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-5"
+      >
+        Option 5
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-6"
+             name="radio-example"
+             class="ui-radio"
+             disabled
+             value="option-6"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-6"
+      >
+        Option 6
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Styles/Forms Textareas smoke-test 1`] = `
 <div class="mb-40">
   <label class="ui-text-p1 block"
diff --git a/src/core/styles/__snapshots__/Typography.stories.tsx.snap b/src/core/styles/__snapshots__/Typography.stories.tsx.snap
index 60dde2d7..f6ecf5b6 100644
--- a/src/core/styles/__snapshots__/Typography.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Typography.stories.tsx.snap
@@ -60,68 +60,68 @@ exports[`Styles/Typography Decorative smoke-test 1`] = `
 
 exports[`Styles/Typography GUI smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-16">
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button1">
     <div>
       Button label 1
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button1
+      .ui-text-button1
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button2">
     <div>
       Button label 2
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button2
+      .ui-text-button2
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button3">
     <div>
       Button label 3
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button3
+      .ui-text-button3
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button4">
     <div>
       Button label 4
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button4
+      .ui-text-button4
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu1">
     <div>
       Menu label 1
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu1
+      .ui-text-menu1
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu2">
     <div>
       Menu label 2
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu2
+      .ui-text-menu2
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu3">
     <div>
       Menu label 3
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu3
+      .ui-text-menu3
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu4">
     <div>
       Menu label 4
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu4
+      .ui-text-menu4
     </code>
   </div>
   <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text">
diff --git a/src/core/styles/dropdowns.css b/src/core/styles/dropdowns.css
index ca8e5603..09e3178d 100644
--- a/src/core/styles/dropdowns.css
+++ b/src/core/styles/dropdowns.css
@@ -1,11 +1,15 @@
 @layer components {
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 text-p2 flex font-medium bg-transparent;
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 focus:outline-offset-0;
+    @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
-    background-repeat: no-repeat;
     background-position: center right 16px;
   }
 
+  .ui-theme-dark .ui-dropdown-base {
+    @apply text-neutral-000 bg-neutral-1200 border-neutral-900 hover:border-neutral-700 active:border-neutral-800;
+  }
+
   .ui-dropdown-base option:disabled {
     @apply text-neutral-800;
   }
diff --git a/src/core/styles/forms.css b/src/core/styles/forms.css
index 75d577f4..3d85baf5 100644
--- a/src/core/styles/forms.css
+++ b/src/core/styles/forms.css
@@ -87,6 +87,10 @@
     @apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
   }
 
+  .ui-theme-dark .ui-toggle-slider {
+    @apply bg-neutral-700;
+  }
+
   .ui-toggle-slider:before {
     @apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
     content: "";
@@ -110,12 +114,12 @@
 
   .ui-input {
     @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
-    @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus;
+    @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus focus:outline-offset-0 focus:outline-4;
     @apply max-w-screen-sm invalid:border-gui-error-red;
   }
 
   .ui-theme-dark .ui-input {
-    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700;
+    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700 invalid:border-gui-error-red;
   }
 
   .ui-input:disabled {
@@ -125,4 +129,24 @@
   .ui-theme-dark .ui-input:disabled {
     @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
   }
+
+  .ui-radio {
+    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus:outline-gui-blue-focus focus:outline-4;
+  }
+
+  .ui-radio:checked {
+    @apply bg-orange-600 border-orange-600 border;
+  }
+
+  .ui-radio:checked::after {
+    @apply content-[''] mt-[5px] w-8 h-8 block bg-white rounded-full m-auto;
+  }
+
+  .ui-radio:disabled {
+    @apply bg-neutral-300;
+  }
+
+  .ui-theme-dark .ui-radio:disabled {
+    @apply bg-neutral-1100;
+  }
 }
diff --git a/src/core/styles/forms/story-components.tsx b/src/core/styles/forms/story-components.tsx
new file mode 100644
index 00000000..e18a8e23
--- /dev/null
+++ b/src/core/styles/forms/story-components.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import Icon from "../../Icon";
+
+type FormElementProps = {
+  index: number;
+  disabled?: boolean;
+};
+
+export const Checkbox = ({ index, disabled }: FormElementProps) => (
+  <div className="ui-checkbox-p1 flex items-center">
+    <input
+      data-ui-checkbox-native=""
+      type="checkbox"
+      id={`checkbox-example-${index}`}
+      name={`checkbox-example-${index}`}
+      value="yes"
+      className="ui-checkbox-input"
+      disabled={disabled}
+    />
+    <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
+      <Icon
+        name="icon-gui-tick"
+        size="1rem"
+        additionalCSS="ui-checkbox-styled-tick"
+      />
+    </div>
+    <label
+      htmlFor={`checkbox-example-${index}`}
+      className="ui-checkbox-label-p1"
+    >
+      Option {index}
+    </label>
+  </div>
+);
+
+export const RadioButton = ({ index, disabled }: FormElementProps) => (
+  <div className="flex items-center gap-8">
+    <input
+      data-ui-radio-native=""
+      type="radio"
+      id={`radio-example-${index}`}
+      name="radio-example"
+      value={`option-${index}`}
+      className="ui-radio"
+      disabled={disabled}
+    />
+    <label
+      className="text-neutral-1300 dark:text-neutral-000"
+      htmlFor={`radio-example-${index}`}
+    >
+      Option {index}
+    </label>
+  </div>
+);