diff --git a/src/lib/components/data-encoder-settings.svelte b/src/lib/components/data-encoder-settings.svelte
index 35b75aa5c..69b014783 100644
--- a/src/lib/components/data-encoder-settings.svelte
+++ b/src/lib/components/data-encoder-settings.svelte
@@ -26,11 +26,14 @@
 </script>
 
 <script lang="ts">
+  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
+  import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
+
   let endpoint = $codecEndpoint ?? '';
   let port = $dataConverterPort ?? '';
   let passToken = $passAccessToken ?? false;
   let includeCreds = $includeCredentials ?? false;
-  let override = $overrideRemoteCodecConfiguration ?? false;
+  let override = writable($overrideRemoteCodecConfiguration);
 
   $: error = '';
   $: namespaceOrCluster = $page.data?.settings?.runtimeEnvironment?.isCloud
@@ -56,7 +59,7 @@
     port = $dataConverterPort;
     passToken = $passAccessToken;
     includeCreds = $includeCredentials;
-    override = $overrideRemoteCodecConfiguration;
+    $override = $overrideRemoteCodecConfiguration;
     $viewDataEncoderSettings = false;
   };
 
@@ -66,8 +69,8 @@
     $passAccessToken = passToken;
     $includeCredentials = includeCreds;
     $dataConverterPort = port;
-    $overrideRemoteCodecConfiguration = override;
     $viewDataEncoderSettings = false;
+    $overrideRemoteCodecConfiguration = $override;
 
     if ($page.url.pathname.endsWith('history')) {
       $refresh = Date.now();
@@ -99,7 +102,7 @@
       </p>
       <Accordion
         data-testid="override-accordion"
-        title={override
+        title={$override
           ? translate('data-encoder', 'browser-override-description', {
               level: namespaceOrCluster,
             })
@@ -107,42 +110,28 @@
               level: namespaceOrCluster,
             })}
       >
-        <div class="flex flex-col gap-2">
-          <label
-            class="flex cursor-pointer flex-row items-center gap-2"
-            for="use-configuration-endpoint-radio"
-          >
-            <input
-              on:click={() => (override = false)}
-              class="h-4 w-4 accent-gray-900"
-              type="radio"
-              checked={!override}
-              name="use-configuration-endpoint"
-              id="use-configuration-endpoint-radio"
-              data-testid="use-configuration-endpoint-input"
-            />
-            {translate('data-encoder', 'no-browser-override-description', {
-              level: namespaceOrCluster,
-            })}
-          </label>
-          <label
-            class="flex cursor-pointer flex-row items-center gap-2"
-            for="use-local-endpoint-radio"
-          >
-            <input
-              on:click={() => (override = true)}
-              class="h-4 w-4 accent-gray-900"
-              type="radio"
-              checked={override}
-              name="use-local-endpoint"
-              id="use-local-endpoint-radio"
-              data-testid="use-local-endpoint-input"
-            />
-            {translate('data-encoder', 'browser-override-description', {
+        <RadioGroup name="override" group={override}>
+          <RadioInput
+            id="use-configuration-endpoint-radio"
+            data-testid="use-configuration-endpoint-input"
+            value={false}
+            label={translate(
+              'data-encoder',
+              'no-browser-override-description',
+              {
+                level: namespaceOrCluster,
+              },
+            )}
+          />
+          <RadioInput
+            id="use-local-endpoint-radio"
+            data-testid="use-local-endpoint-input"
+            value={true}
+            label={translate('data-encoder', 'browser-override-description', {
               level: namespaceOrCluster,
             })}
-          </label>
-        </div>
+          />
+        </RadioGroup>
       </Accordion>
       <CodecEndpointSettings
         bind:endpoint
diff --git a/src/lib/components/workflow-actions.svelte b/src/lib/components/workflow-actions.svelte
index 2b5180769..f4f822a7b 100644
--- a/src/lib/components/workflow-actions.svelte
+++ b/src/lib/components/workflow-actions.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
   import { page } from '$app/stores';
 
   import WorkflowResetForm from '$lib/components/workflow/workflow-reset-form.svelte';
@@ -47,7 +49,7 @@
   let signalConfirmationModalOpen = false;
   let error = '';
   let resetReapplyType: ResetReapplyType = ResetReapplyType.Unspecified;
-  let resetId: string;
+  let resetId = writable<string>();
   let resetReason: string;
   let loading = false;
   let resetTooltipText: string;
@@ -68,7 +70,7 @@
 
   const hideResetModal = () => {
     resetReapplyType = ResetReapplyType.Unspecified;
-    resetId = undefined;
+    $resetId = undefined;
     resetReason = undefined;
   };
 
@@ -158,7 +160,7 @@
         namespace,
         workflowId: workflow.id,
         runId: workflow.runId,
-        eventId: resetId,
+        eventId: $resetId,
         reason: formatReason({
           action: Action.Reset,
           reason: resetReason,
@@ -294,7 +296,7 @@
   bind:open={resetConfirmationModalOpen}
   on:confirmModal={reset}
   on:cancelModal={hideResetModal}
-  confirmDisabled={!resetId}
+  confirmDisabled={!$resetId}
 >
   <h3 slot="title">{translate('workflows', 'reset-modal-title')}</h3>
   <svelte:fragment slot="content">
diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index 605e8085f..bd24d8df3 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
   import {
     addHours,
     addMinutes,
@@ -15,6 +17,7 @@
   import { Menu, MenuButton, MenuContainer } from '$lib/holocene/menu';
   import MenuDivider from '$lib/holocene/menu/menu-divider.svelte';
   import MenuItem from '$lib/holocene/menu/menu-item.svelte';
+  import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
   import Option from '$lib/holocene/select/option.svelte';
   import Select from '$lib/holocene/select/select.svelte';
   import TimePicker from '$lib/holocene/time-picker.svelte';
@@ -48,11 +51,11 @@
   let timeUnit = TIME_UNIT_OPTIONS[0];
   let relativeTime = '';
 
-  let type: 'relative' | 'absolute' = 'relative';
+  const type: Writable<'relative' | 'absolute'> = writable('relative');
 
   $: useBetweenDateTimeQuery = isTimeRange || !$supportsAdvancedVisibility;
   $: disabled =
-    type === 'relative' &&
+    $type === 'relative' &&
     !useBetweenDateTimeQuery &&
     (!relativeTime || error(relativeTime));
 
@@ -77,7 +80,7 @@
   };
 
   const onApply = () => {
-    if (type === 'relative' && !useBetweenDateTimeQuery) {
+    if ($type === 'relative' && !useBetweenDateTimeQuery) {
       if (!relativeTime) return;
       $filter.value = toDate(`${relativeTime} ${timeUnit}`);
       $filter.customDate = false;
@@ -181,24 +184,15 @@
           </div>
         </MenuItem>
       {:else}
-        <MenuItem on:click={() => (type = 'relative')}>
+        <MenuItem on:click={() => ($type = 'relative')}>
           <div class="flex flex-col">
-            <label
-              class="flex cursor-pointer flex-row items-center gap-2"
-              for="relative-time"
-            >
-              <input
-                on:click|stopPropagation={() => {
-                  type = 'relative';
-                }}
-                class="h-4 w-4 accent-gray-900"
-                type="radio"
-                checked={type === 'relative'}
-                id="relative-time"
-                tabindex="-1"
-              />
-              {translate('relative')}
-            </label>
+            <RadioInput
+              label={translate('relative')}
+              id="relative-time"
+              value="relative"
+              name="time-filter-type"
+              group={type}
+            />
             <div class="ml-6 flex gap-0 pt-2">
               <Input
                 label={translate('relative')}
@@ -209,7 +203,7 @@
                 error={error(relativeTime)}
                 unroundRight
                 class="h-10"
-                disabled={type !== 'relative'}
+                disabled={$type !== 'relative'}
               />
               <Select
                 unroundLeft
@@ -217,7 +211,7 @@
                 id="relative-datetime-unit-input"
                 label={translate('time-unit')}
                 labelHidden
-                disabled={type !== 'relative'}
+                disabled={$type !== 'relative'}
               >
                 {#each TIME_UNIT_OPTIONS as unit}
                   <Option value={unit}>{unit} {translate('ago')}</Option>
@@ -227,22 +221,15 @@
           </div>
         </MenuItem>
         <MenuDivider />
-        <MenuItem on:click={() => (type = 'absolute')}>
+        <MenuItem on:click={() => ($type = 'absolute')}>
           <div class="flex flex-col gap-2">
-            <label
-              class="flex cursor-pointer flex-row items-center gap-2"
-              for="absolute-time"
-            >
-              <input
-                on:click|stopPropagation={() => (type = 'absolute')}
-                class="h-4 w-4 accent-gray-900"
-                type="radio"
-                checked={type === 'absolute'}
-                id="absolute-time"
-                tabindex="-1"
-              />
-              {translate('absolute')}
-            </label>
+            <RadioInput
+              label={translate('absolute')}
+              id="absolute-time"
+              value="absolute"
+              name="time-filter-type"
+              group={type}
+            />
             <div class="ml-6 flex flex-col gap-2">
               <DatePicker
                 label={''}
@@ -252,14 +239,14 @@
                 todayLabel={translate('today')}
                 closeLabel={translate('close')}
                 clearLabel={translate('clear-input-button-label')}
-                disabled={type !== 'absolute'}
+                disabled={$type !== 'absolute'}
               />
               <TimePicker
                 bind:hour={startHour}
                 bind:minute={startMinute}
                 bind:second={startSecond}
                 twelveHourClock={false}
-                disabled={type !== 'absolute'}
+                disabled={$type !== 'absolute'}
               />
             </div>
           </div>
diff --git a/src/lib/components/workflow/workflow-reset-form.svelte b/src/lib/components/workflow/workflow-reset-form.svelte
index 1db425272..5088d5b3a 100644
--- a/src/lib/components/workflow/workflow-reset-form.svelte
+++ b/src/lib/components/workflow/workflow-reset-form.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+  import type { Writable } from 'svelte/store';
+
   import Input from '$lib/holocene/input/input.svelte';
+  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
+  import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
   import Option from '$lib/holocene/select/option.svelte';
   import Select from '$lib/holocene/select/select.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -8,7 +12,7 @@
 
   export let resetReapplyType: ResetReapplyType = ResetReapplyType.Unspecified;
   export let reason = '';
-  export let eventId: string;
+  export let eventId: Writable<string>;
 
   const resetReapplyTypes = [
     {
@@ -27,34 +31,19 @@
 </script>
 
 <div class="flex w-full flex-col gap-4">
-  <ul class="max-h-40 w-full overflow-y-scroll rounded border border-primary">
+  <RadioGroup
+    name="reset-event-id"
+    group={eventId}
+    class="max-h-40 overflow-auto"
+  >
     {#each $resetEvents as event}
-      <li
-        class="h-10 w-full border-b border-primary from-blue-100 to-purple-100 bg-fixed first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-none hover:bg-gradient-to-br"
-      >
-        <label
-          class="flex h-full w-full cursor-pointer flex-row items-center gap-2 px-4 py-2"
-          for="reset-event-{event.id}"
-        >
-          <input
-            on:click={() => (eventId = event.id)}
-            type="radio"
-            checked={event.id === eventId}
-            name="reset-event-id"
-            id="reset-event-{event.id}"
-          />
-          <p class="grid grid-cols-8">
-            <span class="col-span-1 font-medium text-gray-500">
-              {event.eventId}
-            </span>
-            <span class="font-semibold">
-              {event.eventType}
-            </span>
-          </p>
-        </label>
-      </li>
+      <RadioInput
+        id="reset-event-{event.id}"
+        value={event.id}
+        label="{event.id} - {event.eventType}"
+      />
     {/each}
-  </ul>
+  </RadioGroup>
   <Select
     label={translate('workflows', 'reset-reapply-type-label')}
     id="reset-reapply-type-select"
diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
index f5a9bb9d2..0bed8ad25 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
@@ -18,7 +18,7 @@ exports[`Table_header_cell$ > Start renders 1`] = `"<th class=\\"workflows-summa
 
 exports[`Table_header_cell$ > State Transitions renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-State Transitions\\">State Transitions</th>"`;
 
-exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex grow items-center\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-1paw7hc\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\">All Statuses  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  </div> </li></ul></div></th>"`;
+exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex grow items-center\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-1paw7hc\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\" aria-hidden=\\"true\\"><title></title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\">All Statuses  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-gco0cg\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-gco0cg\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  </div> </li></ul></div></th>"`;
 
 exports[`Table_header_cell$ > Task Queue renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Task Queue\\">Task Queue</th>"`;
 
diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index 56311e49a..1751d9fa9 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -124,7 +124,7 @@
     aria-hidden={disabled ? 'true' : 'false'}
     aria-disabled={disabled}
     tabindex={disabled ? -1 : 0}
-    on:click|preventDefault|stopPropagation={handleClick}
+    on:click={handleClick}
     on:keydown|stopPropagation={handleKeydown}
     {...$$restProps}
   >
@@ -154,7 +154,7 @@
 
 <style lang="postcss">
   .menu-item {
-    @apply m-1 flex cursor-pointer flex-row items-center gap-2 rounded px-3 py-2 font-primary text-sm font-medium hover:bg-indigo-50 focus:bg-indigo-50 focus:shadow-focus focus:shadow-blue-600/50 focus:outline focus:outline-1 focus:outline-indigo-600;
+    @apply m-1 flex cursor-pointer flex-row items-center gap-2 rounded px-3 py-2 font-primary text-sm font-medium hover:bg-indigo-50 focus:outline-none focus-visible:bg-indigo-50 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-indigo-600;
   }
 
   .menu-item-wrapper {
diff --git a/src/lib/holocene/radio-input/index.ts b/src/lib/holocene/radio-input/index.ts
new file mode 100644
index 000000000..6257e42b1
--- /dev/null
+++ b/src/lib/holocene/radio-input/index.ts
@@ -0,0 +1,6 @@
+import RadioGroup, { RADIO_GROUP_CONTEXT } from './radio-group.svelte';
+import RadioInput from './radio-input.svelte';
+
+export type { RadioGroupContext, RadioInputProps } from './types';
+
+export { RADIO_GROUP_CONTEXT, RadioGroup, RadioInput };
diff --git a/src/lib/holocene/radio-input/radio-group.svelte b/src/lib/holocene/radio-input/radio-group.svelte
new file mode 100644
index 000000000..707632fe7
--- /dev/null
+++ b/src/lib/holocene/radio-input/radio-group.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+  export const RADIO_GROUP_CONTEXT = 'radio-group-ctx';
+</script>
+
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  import { setContext } from 'svelte';
+
+  import type { RadioGroupContext, RadioGroupProps } from './types';
+
+  type T = $$Generic;
+  type $$Props = RadioGroupProps<T>;
+
+  let className: string = '';
+
+  export { className as class };
+  export let name: string;
+  export let group: Writable<T>;
+
+  setContext<RadioGroupContext<T>>(RADIO_GROUP_CONTEXT, {
+    name,
+    group,
+  });
+</script>
+
+<div class="flex flex-col gap-2 {className}" {...$$restProps}>
+  <slot />
+</div>
diff --git a/src/lib/holocene/radio-input/radio-input.story.svelte b/src/lib/holocene/radio-input/radio-input.story.svelte
new file mode 100644
index 000000000..b7eb5e99f
--- /dev/null
+++ b/src/lib/holocene/radio-input/radio-input.story.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import type { Hst as HST } from '@histoire/plugin-svelte';
+
+  import RadioGroup from './radio-group.svelte';
+  import RadioInput from './radio-input.svelte';
+
+  export let Hst: HST;
+  const value1 = writable('a');
+  const value2 = writable(1);
+</script>
+
+<Hst.Story title="radio input">
+  <Hst.Variant title="with a radio group">
+    <RadioGroup name="option" group={value1}>
+      <RadioInput id="option-a" label="Option A" value="a" />
+      <RadioInput id="option-b" label="Option B" value="b" />
+      <RadioInput id="option-c" label="Option C" value="c" />
+      <p>The value is {$value1}</p>
+    </RadioGroup>
+  </Hst.Variant>
+  <Hst.Variant title="without a radio group">
+    <div class="flex flex-col gap-2">
+      <RadioInput
+        id="option-1"
+        label="Option 1"
+        value={1}
+        name="number-option"
+        group={value2}
+      />
+      <RadioInput
+        id="option-2"
+        label="Option 2"
+        value={2}
+        name="number-option"
+        group={value2}
+      />
+    </div>
+    <p>The value is {$value2}</p>
+  </Hst.Variant>
+</Hst.Story>
diff --git a/src/lib/holocene/radio-input/radio-input.svelte b/src/lib/holocene/radio-input/radio-input.svelte
new file mode 100644
index 000000000..39ea6a3f1
--- /dev/null
+++ b/src/lib/holocene/radio-input/radio-input.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
+  import { getContext } from 'svelte';
+
+  import type { RadioGroupContext, RadioInputProps } from './types';
+
+  import { RADIO_GROUP_CONTEXT } from './radio-group.svelte';
+
+  type T = $$Generic;
+
+  type $$Props = RadioInputProps<T>;
+  export let value: T;
+  export let id: string;
+  export let label: string;
+  export let labelHidden = false;
+
+  let internalGroup: Writable<T> = writable(value);
+  let internalName: string = '';
+
+  export { internalGroup as group };
+  export { internalName as name };
+
+  const ctx = getContext<RadioGroupContext<T>>(RADIO_GROUP_CONTEXT) ?? {
+    name: internalName,
+    group: internalGroup,
+  };
+
+  const { name, group } = ctx;
+</script>
+
+<label>
+  <input
+    bind:group={$group}
+    type="radio"
+    {name}
+    {value}
+    {id}
+    {...$$restProps}
+  />
+  <span class="label" class:hidden={labelHidden}>
+    {label}
+  </span>
+</label>
+
+<style lang="postcss">
+  label {
+    @apply flex grow cursor-pointer flex-row items-center gap-1 text-sm focus:outline-none;
+  }
+
+  input[type='radio'] {
+    @apply relative box-content h-4 w-4 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white;
+
+    &::after {
+      @apply absolute top-1 left-1 h-0 w-0 scale-0 rounded-full bg-white transition-transform content-[''];
+    }
+  }
+
+  input[type='radio']:checked {
+    @apply border-indigo-600 bg-indigo-600;
+
+    &::after {
+      @apply h-2 w-2 scale-100;
+    }
+  }
+</style>
diff --git a/src/lib/holocene/radio-input/types.ts b/src/lib/holocene/radio-input/types.ts
new file mode 100644
index 000000000..013c117f0
--- /dev/null
+++ b/src/lib/holocene/radio-input/types.ts
@@ -0,0 +1,22 @@
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { Writable } from 'svelte/store';
+
+export interface RadioInputProps<T> extends HTMLInputAttributes {
+  value: T;
+  id: string;
+  label: string;
+  labelHidden?: boolean;
+  group?: Writable<T>;
+  name?: string;
+  'data-testid'?: string;
+}
+
+export interface RadioGroupProps<T> extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  group: Writable<T>;
+}
+
+export type RadioGroupContext<T> = {
+  name: string;
+  group: Writable<T>;
+};