1 files changed, 14 insertions, 4 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx b/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx
index 3bce0123f..c37984368 100644
--- a/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx
@@ -3,15 +3,15 @@ import { Fragment, VNode, h } from "preact";
 import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
 import { useField } from "./useField.js";
 
-export interface Choice {
+export interface Choice<V> {
   label: TranslatedString;
   description?: TranslatedString;
-  value: string;
+  value: V;
 }
 
 export function InputChoiceStacked<T extends object, K extends keyof T>(
   props: {
-    choices: Choice[];
+    choices: Choice<T[K]>[];
   } & UIFormProps<T, K>,
 ): VNode {
   const {
@@ -41,6 +41,10 @@ export function InputChoiceStacked<T extends object, K extends keyof T>(
       <fieldset class="mt-2">
         <div class="space-y-4">
           {choices.map((choice) => {
+            // const currentValue = !converter
+            //   ? choice.value
+            //   : converter.fromStringUI(choice.value) ?? "";
+
             let clazz =
               "border relative block cursor-pointer rounded-lg bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between";
             if (choice.value === value) {
@@ -49,12 +53,18 @@ export function InputChoiceStacked<T extends object, K extends keyof T>(
             } else {
               clazz += " border-gray-300";
             }
+
             return (
               <label class={clazz}>
                 <input
                   type="radio"
                   name="server-size"
-                  defaultValue={choice.value}
+                  // defaultValue={choice.value}
+                  value={
+                    (!converter
+                      ? (choice.value as string)
+                      : converter?.toStringUI(choice.value)) ?? ""
+                  }
                   onClick={(e) => {
                     onChange(
                       (value === choice.value