From 3b785f37e36cb2f43cf0a03ff18e3b7268d9ce40 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 10:43:08 +0100
Subject: [PATCH 1/7] feat: Boolean field input

---
 .../components/input/Boolean.vue              | 64 +++++++++++++++++++
 .../components/input/Radio.vue                |  4 +-
 .../components/input/RadioGroup.vue           | 60 ++++++++++-------
 .../pages/input/Boolean.story.vue             | 19 ++++++
 apps/tailwind-components/types/types.ts       |  6 ++
 5 files changed, 128 insertions(+), 25 deletions(-)
 create mode 100644 apps/tailwind-components/components/input/Boolean.vue
 create mode 100644 apps/tailwind-components/pages/input/Boolean.story.vue

diff --git a/apps/tailwind-components/components/input/Boolean.vue b/apps/tailwind-components/components/input/Boolean.vue
new file mode 100644
index 0000000000..7bf147d505
--- /dev/null
+++ b/apps/tailwind-components/components/input/Boolean.vue
@@ -0,0 +1,64 @@
+<template>
+  <InputRadioGroup
+    :id="id"
+    :modelValue="props.modelValue"
+    @update:modelValue="onInput"
+    @focus="$emit('focus')"
+    @blur="$emit('blur')"
+    :radioOptions="radioOptions"
+    align="horizontal"
+    :showClearButton="true"
+  />
+
+  {{ modelValue }}
+</template>
+
+<script lang="ts" setup>
+import type { RadioOptionsDataIF } from "~/types/types";
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    label?: string;
+    modelValue: boolean | null;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    valid?: boolean;
+    hasError?: boolean;
+  }>(),
+  {
+    disabled: false,
+    required: false,
+    hasError: false,
+    valid: false,
+  }
+);
+
+const emit = defineEmits(["focus", "blur", "error", "update:modelValue"]);
+defineExpose({ validate });
+
+function validate(value: boolean | null) {
+  if (props.required && value === null) {
+    emit("error", [
+      { message: `${props.label || props.id} required to complete the form` },
+    ]);
+  } else {
+    emit("error", []);
+  }
+}
+
+const radioOptions = ref<RadioOptionsDataIF[]>([
+  { value: true, label: "True" },
+  { value: false, label: "False" },
+]);
+
+const modelValue = ref<boolean | undefined>(undefined);
+
+function onInput(value: string | boolean) {
+  const booleanValue =
+    value === "true" ? true : value === "false" ? false : null;
+  emit("update:modelValue", booleanValue);
+  validate(booleanValue);
+}
+</script>
diff --git a/apps/tailwind-components/components/input/Radio.vue b/apps/tailwind-components/components/input/Radio.vue
index 95fd10a23b..408c36ef78 100644
--- a/apps/tailwind-components/components/input/Radio.vue
+++ b/apps/tailwind-components/components/input/Radio.vue
@@ -9,8 +9,8 @@
 
 <script lang="ts" setup>
 defineProps<{
-  value?: string | boolean;
+  value?: string | boolean | null;
 }>();
 
-const modelValue = defineModel<string | boolean>();
+const modelValue = defineModel<string | boolean | null>();
 </script>
diff --git a/apps/tailwind-components/components/input/RadioGroup.vue b/apps/tailwind-components/components/input/RadioGroup.vue
index 70b223be09..bb8814a2a5 100644
--- a/apps/tailwind-components/components/input/RadioGroup.vue
+++ b/apps/tailwind-components/components/input/RadioGroup.vue
@@ -1,19 +1,27 @@
 <template>
-  <div :id="`${id}-radio-group`">
+  <div
+    :id="`${id}-radio-group`"
+    class="flex gap-1"
+    :class="{
+      'flex-row': align === 'horizontal',
+      'flex-col': align === 'vertical',
+    }"
+  >
     <div v-for="option in radioOptions" class="flex justify-start align-center">
       <InputRadio
         :id="`${id}-radio-group-${option.value}`"
         class="sr-only"
         :name="id"
         :value="option.value"
-        v-model="modelValue"
-        :checked="option.value === modelValue"
+        :modelValue="props.modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+        :checked="option.value === props.modelValue"
       />
       <InputLabel
         :for="`${id}-radio-group-${option.value}`"
-        class="hover:cursor-pointer flex flex-row gap-1"
+        class="hover:cursor-pointer flex flex-row gap-1 text-title"
       >
-        <InputRadioIcon :checked="modelValue === option.value" class="mr-2.5" />
+        <InputRadioIcon :checked="modelValue === option.value" class="mr-1" />
         <template v-if="option.label">
           {{ option.label }}
         </template>
@@ -22,40 +30,46 @@
         </template>
       </InputLabel>
     </div>
-    <div class="mt-2" v-if="showClearButton">
-      <button
-        type="reset"
-        :id="`${id}-radio-group-clear`"
-        :form="`${id}-radio-group`"
-        @click.prevent="resetModelValue"
-      >
-        Clear
-      </button>
-    </div>
+
+    <button
+      v-show="
+        showClearButton &&
+        (modelValue === true ||
+          modelValue === false ||
+          (typeof modelValue === 'string' && modelValue.length > 0))
+      "
+      class="ml-2 w-8 text-center text-button-outline hover:text-button-outline hover:underline"
+      :class="{ 'ml-2': align === 'horizontal', 'mt-2': align === 'vertical' }"
+      type="reset"
+      :id="`${id}-radio-group-clear`"
+      :form="`${id}-radio-group`"
+      @click.prevent="resetModelValue"
+    >
+      Clear
+    </button>
   </div>
 </template>
 
 <script lang="ts" setup>
-interface RadioOptionsDataIF {
-  value: string | boolean;
-  label?: string;
-  checked?: boolean | undefined;
-}
+import type { RadioOptionsDataIF } from "~/types/types";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     id: string;
+    modelValue: boolean | string | null;
     radioOptions: RadioOptionsDataIF[];
     showClearButton?: boolean;
+    align?: "horizontal" | "vertical";
   }>(),
   {
     showClearButton: false,
+    align: "vertical",
   }
 );
 
-const modelValue = defineModel<string | boolean>();
+const emit = defineEmits(["update:modelValue"]);
 
 function resetModelValue() {
-  modelValue.value = undefined;
+  emit("update:modelValue", null);
 }
 </script>
diff --git a/apps/tailwind-components/pages/input/Boolean.story.vue b/apps/tailwind-components/pages/input/Boolean.story.vue
new file mode 100644
index 0000000000..ecf309ba38
--- /dev/null
+++ b/apps/tailwind-components/pages/input/Boolean.story.vue
@@ -0,0 +1,19 @@
+<template>
+  <InputBoolean id="boolean-story-id" v-model="modelValue1" />
+
+  <div class="my-4">intit empty: {{ modelValue1 }}</div>
+
+  <InputBoolean id="boolean-story-id2" v-model="modelValue2" />
+
+  <div class="my-4">init true: {{ modelValue2 }}</div>
+
+  <InputBoolean id="boolean-story-id3" v-model="modelValue3" />
+
+  <div class="my-4">init false: {{ modelValue3 }}</div>
+</template>
+
+<script lang="ts" setup>
+const modelValue1 = ref<boolean | undefined>(null);
+const modelValue2 = ref<boolean | undefined>(true);
+const modelValue3 = ref<boolean | undefined>(false);
+</script>
diff --git a/apps/tailwind-components/types/types.ts b/apps/tailwind-components/types/types.ts
index 1795d5ee3d..3a51a77fd7 100644
--- a/apps/tailwind-components/types/types.ts
+++ b/apps/tailwind-components/types/types.ts
@@ -91,4 +91,10 @@ export interface IDocumentation {
   file: IFile;
 }
 
+export interface RadioOptionsDataIF {
+  value: string | boolean;
+  label?: string;
+  checked?: boolean | undefined;
+}
+
   
\ No newline at end of file

From a7c0c64c96926f4e30a59f7dff691f1893e300df Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 11:00:30 +0100
Subject: [PATCH 2/7] add to form wip

---
 .../components/form/FieldInput.vue                | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/components/form/FieldInput.vue b/apps/tailwind-components/components/form/FieldInput.vue
index b15b55b1b6..3056bdd8bd 100644
--- a/apps/tailwind-components/components/form/FieldInput.vue
+++ b/apps/tailwind-components/components/form/FieldInput.vue
@@ -51,7 +51,7 @@ function validate(value: columnValue) {
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
-  ></LazyInputString>
+  />
   <LazyInputTextArea
     v-else-if="type === 'TEXT'"
     ref="input"
@@ -62,6 +62,17 @@ function validate(value: columnValue) {
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
-  ></LazyInputTextArea>
+  />
+  <LazyInputBoolean
+    v-else-if="type === 'BOOL'"
+    ref="input"
+    :id="id"
+    :label="label"
+    :required="required"
+    :modelValue="data as boolean"
+    @focus="$emit('focus')"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    @error="$emit('error', $event)"
+  />
   <LazyInputPlaceHolder v-else ref="input" :type="type" />
 </template>

From 62c96e301eb2075c6c213d7c5f205105181ebb4a Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 15:29:16 +0100
Subject: [PATCH 3/7] add boolean field

---
 apps/metadata-utils/src/types.ts              |  2 +-
 .../components/form/FieldInput.vue            |  2 +-
 .../components/input/Boolean.vue              | 24 ++++++++++++-------
 apps/tailwind-components/pages/Form.story.vue | 12 ++++++----
 .../pages/input/Boolean.story.vue             | 15 +++++++++---
 .../tests/components/form/renderForm.spec.ts  | 18 +++++++-------
 6 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/apps/metadata-utils/src/types.ts b/apps/metadata-utils/src/types.ts
index c31dd39a4f..10c3b47120 100644
--- a/apps/metadata-utils/src/types.ts
+++ b/apps/metadata-utils/src/types.ts
@@ -92,7 +92,7 @@ export interface IFieldError {
 }
 
 export type columnId = string;
-export type columnValue = string | number | boolean | columnValueObject;
+export type columnValue = string | number | boolean | null | columnValueObject;
 
 interface columnValueObject {
   [x: string]: columnValue;
diff --git a/apps/tailwind-components/components/form/FieldInput.vue b/apps/tailwind-components/components/form/FieldInput.vue
index 3056bdd8bd..a8137ff618 100644
--- a/apps/tailwind-components/components/form/FieldInput.vue
+++ b/apps/tailwind-components/components/form/FieldInput.vue
@@ -69,7 +69,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :modelValue="data as boolean"
+    :modelValue="data === true || data === false ? data : null"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
diff --git a/apps/tailwind-components/components/input/Boolean.vue b/apps/tailwind-components/components/input/Boolean.vue
index 7bf147d505..27c6fbad02 100644
--- a/apps/tailwind-components/components/input/Boolean.vue
+++ b/apps/tailwind-components/components/input/Boolean.vue
@@ -2,15 +2,13 @@
   <InputRadioGroup
     :id="id"
     :modelValue="props.modelValue"
+    :radioOptions="radioOptions"
+    :showClearButton="true"
+    align="horizontal"
     @update:modelValue="onInput"
     @focus="$emit('focus')"
     @blur="$emit('blur')"
-    :radioOptions="radioOptions"
-    align="horizontal"
-    :showClearButton="true"
   />
-
-  {{ modelValue }}
 </template>
 
 <script lang="ts" setup>
@@ -26,16 +24,26 @@ const props = withDefaults(
     required?: boolean;
     valid?: boolean;
     hasError?: boolean;
+    trueLabel?: string;
+    falseLabel?: string;
   }>(),
   {
     disabled: false,
     required: false,
     hasError: false,
     valid: false,
+    trueLabel: "True",
+    falseLabel: "False",
   }
 );
 
-const emit = defineEmits(["focus", "blur", "error", "update:modelValue"]);
+const emit = defineEmits([
+  "focus",
+  "blur",
+  "error",
+  "update:modelValue",
+  "input",
+]);
 defineExpose({ validate });
 
 function validate(value: boolean | null) {
@@ -49,8 +57,8 @@ function validate(value: boolean | null) {
 }
 
 const radioOptions = ref<RadioOptionsDataIF[]>([
-  { value: true, label: "True" },
-  { value: false, label: "False" },
+  { value: true, label: props.trueLabel },
+  { value: false, label: props.falseLabel },
 ]);
 
 const modelValue = ref<boolean | undefined>(undefined);
diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index 38410566c5..2b1d802de9 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -90,19 +90,21 @@ function onErrors(newErrors: Record<string, IFieldError[]>) {
         <div class="mt-4 flex flex-row">
           <div v-if="Object.keys(formValues).length" class="basis-1/2">
             <h3 class="text-label">Values</h3>
-            <dl class="flex">
+            <dl class="flex flex-col">
               <template v-for="(value, key) in formValues">
-                <dt v-if="value" class="font-bold">{{ key }}:</dt>
-                <dd v-if="value" class="ml-1">{{ value }}</dd>
+                <dt class="font-bold">{{ key }}:</dt>
+                <dd v-if="value !== null && value !== undefined" class="pl-3">
+                  {{ value }}
+                </dd>
               </template>
             </dl>
           </div>
           <div v-if="Object.keys(errors).length" class="basis-1/2">
             <h3 class="text-label">Errors</h3>
 
-            <dl class="flex">
+            <dl class="flex flex-col">
               <template v-for="(value, key) in errors">
-                <dt v-if="value.length" class="font-bold">{{ key }}:</dt>
+                <dt class="font-bold">{{ key }}:</dt>
                 <dd v-if="value.length" class="ml-1">{{ value }}</dd>
               </template>
             </dl>
diff --git a/apps/tailwind-components/pages/input/Boolean.story.vue b/apps/tailwind-components/pages/input/Boolean.story.vue
index ecf309ba38..45a7750731 100644
--- a/apps/tailwind-components/pages/input/Boolean.story.vue
+++ b/apps/tailwind-components/pages/input/Boolean.story.vue
@@ -10,10 +10,19 @@
   <InputBoolean id="boolean-story-id3" v-model="modelValue3" />
 
   <div class="my-4">init false: {{ modelValue3 }}</div>
+
+  <InputBoolean
+    id="boolean-story-id4"
+    v-model="politeBoolean"
+    true-label="Yes please !"
+    false-label="No thank you"
+  />
+  <div class="my-4">Be polite: {{ modelValue3 }}</div>
 </template>
 
 <script lang="ts" setup>
-const modelValue1 = ref<boolean | undefined>(null);
-const modelValue2 = ref<boolean | undefined>(true);
-const modelValue3 = ref<boolean | undefined>(false);
+const modelValue1 = ref<null>(null);
+const modelValue2 = ref<boolean>(true);
+const modelValue3 = ref<boolean>(false);
+const politeBoolean = ref<boolean>(false);
 </script>
diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index afea50f44e..f782e9545a 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -7,13 +7,15 @@ const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
 
 test("it should render the form", async ({ page }) => {
   await page.goto(`${route}Form.story`);
-  await page.goto(
-    "https://emx2.dev.molgenis.org/apps/tailwind-components/#/Form.story"
-  );
-  await expect(page.getByRole("main")).toContainText("bool");
-  await expect(page.getByRole("main")).toContainText(
-    "place holder for field type BOOL"
-  );
+  await page.goto("http://localhost:3000/");
+  await page.getByRole("link", { name: "Form" }).click();
+  await page.getByLabel("name").click();
+  await page.getByLabel("name").fill("test");
+  await expect(page.getByText("test")).toBeVisible();
+  await expect(page.getByRole("main")).toContainText("test");
+  await page.goto("http://localhost:3000/Form.story");
+  await expect(page.getByRole("main")).toContainText("name");
+  await expect(page.getByRole("main")).toContainText("the name");
   await expect(page.getByRole("main")).toContainText("date");
   await expect(page.getByRole("main")).toContainText("name");
   await expect(page.getByRole("main")).toContainText("Required");
@@ -26,6 +28,4 @@ test("it should handle input", async ({ page }) => {
   await page.getByLabel("name").click({ delay: 500 }); // wait for hydration to complete
   await page.getByLabel("name").pressSequentially("test");
   await expect(page.getByLabel("name")).toHaveValue("test");
-  await page.getByRole("heading", { name: "Values" }).click();
-  await expect(page.getByRole("definition")).toContainText("test");
 });

From 1a514805d50f29ada8537073c111594fe250cc66 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Thu, 23 Jan 2025 16:02:02 +0100
Subject: [PATCH 4/7] fix test

---
 .../tests/components/form/renderForm.spec.ts           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index f782e9545a..d9ec6614ea 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -5,15 +5,17 @@ const route = playwrightConfig?.use?.baseURL?.startsWith("http://localhost")
   ? ""
   : "/apps/tailwind-components/#/";
 
-test("it should render the form", async ({ page }) => {
+test.beforeEach(async ({ page }) => {
   await page.goto(`${route}Form.story`);
-  await page.goto("http://localhost:3000/");
+  await page.getByLabel("name").click({ delay: 500 }); // wait for hydration to complete
+});
+
+test("it should render the form", async ({ page }) => {
   await page.getByRole("link", { name: "Form" }).click();
   await page.getByLabel("name").click();
   await page.getByLabel("name").fill("test");
   await expect(page.getByText("test")).toBeVisible();
   await expect(page.getByRole("main")).toContainText("test");
-  await page.goto("http://localhost:3000/Form.story");
   await expect(page.getByRole("main")).toContainText("name");
   await expect(page.getByRole("main")).toContainText("the name");
   await expect(page.getByRole("main")).toContainText("date");
@@ -24,8 +26,6 @@ test("it should render the form", async ({ page }) => {
 });
 
 test("it should handle input", async ({ page }) => {
-  await page.goto(`${route}Form.story`);
-  await page.getByLabel("name").click({ delay: 500 }); // wait for hydration to complete
   await page.getByLabel("name").pressSequentially("test");
   await expect(page.getByLabel("name")).toHaveValue("test");
 });

From aa5e348ee52a4ae3ea7b8c4bafa7672f1d2f2984 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Fri, 24 Jan 2025 08:44:47 +0100
Subject: [PATCH 5/7] fix merge issue

---
 .../tests/components/form/renderForm.spec.ts                    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index b9142215cd..74601776e7 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -11,8 +11,6 @@ test.beforeEach(async ({ page }) => {
 });
 
 test("it should render the form", async ({ page }) => {
-  await expect(page.getByText("test")).toBeVisible();
-  await expect(page.getByRole("main")).toContainText("test");
   await expect(page.getByRole("main")).toContainText("name");
   await expect(page.getByRole("main")).toContainText("the name");
   await expect(page.getByRole("main")).toContainText("date");

From c4912e97e2eb0839ec09610fdb7d85d08c2a6088 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 27 Jan 2025 16:08:24 +0100
Subject: [PATCH 6/7] fix for unwanted scroll issue

see https://github.com/tailwindlabs/tailwindcss/discussions/12429
---
 apps/tailwind-components/components/input/RadioGroup.vue | 2 +-
 apps/tailwind-components/pages/input/Boolean.story.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/components/input/RadioGroup.vue b/apps/tailwind-components/components/input/RadioGroup.vue
index bb8814a2a5..faf7adb09d 100644
--- a/apps/tailwind-components/components/input/RadioGroup.vue
+++ b/apps/tailwind-components/components/input/RadioGroup.vue
@@ -10,7 +10,7 @@
     <div v-for="option in radioOptions" class="flex justify-start align-center">
       <InputRadio
         :id="`${id}-radio-group-${option.value}`"
-        class="sr-only"
+        class="sr-only fixed"
         :name="id"
         :value="option.value"
         :modelValue="props.modelValue"
diff --git a/apps/tailwind-components/pages/input/Boolean.story.vue b/apps/tailwind-components/pages/input/Boolean.story.vue
index 45a7750731..e8dc10278a 100644
--- a/apps/tailwind-components/pages/input/Boolean.story.vue
+++ b/apps/tailwind-components/pages/input/Boolean.story.vue
@@ -17,7 +17,7 @@
     true-label="Yes please !"
     false-label="No thank you"
   />
-  <div class="my-4">Be polite: {{ modelValue3 }}</div>
+  <div class="my-4">Be polite: {{ politeBoolean }}</div>
 </template>
 
 <script lang="ts" setup>

From 408b6965848f6692094f0a2b8a23722f95499471 Mon Sep 17 00:00:00 2001
From: connoratrug <c.stroomberg@rug.nl>
Date: Mon, 27 Jan 2025 16:45:23 +0100
Subject: [PATCH 7/7] fixed from code comments

---
 .../components/input/Boolean.vue              | 22 ++++++++++++++-----
 .../components/input/Radio.vue                |  6 +++--
 .../components/input/RadioGroup.vue           | 20 ++++++++++-------
 .../pages/input/Boolean.story.vue             |  3 ---
 apps/tailwind-components/types/types.ts       |  5 +++--
 5 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/apps/tailwind-components/components/input/Boolean.vue b/apps/tailwind-components/components/input/Boolean.vue
index 27c6fbad02..0d0ff6f247 100644
--- a/apps/tailwind-components/components/input/Boolean.vue
+++ b/apps/tailwind-components/components/input/Boolean.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { RadioOptionsDataIF } from "~/types/types";
+import type { IRadioOptionsData } from "~/types/types";
 
 const props = withDefaults(
   defineProps<{
@@ -56,16 +56,28 @@ function validate(value: boolean | null) {
   }
 }
 
-const radioOptions = ref<RadioOptionsDataIF[]>([
+const radioOptions = ref<IRadioOptionsData[]>([
   { value: true, label: props.trueLabel },
   { value: false, label: props.falseLabel },
 ]);
 
 const modelValue = ref<boolean | undefined>(undefined);
 
-function onInput(value: string | boolean) {
-  const booleanValue =
-    value === "true" ? true : value === "false" ? false : null;
+function toBoolean(value: string) {
+  switch (value) {
+    case "true":
+      return true;
+
+    case "false":
+      return false;
+
+    default:
+      return null;
+  }
+}
+
+function onInput(value: string) {
+  const booleanValue = toBoolean(value);
   emit("update:modelValue", booleanValue);
   validate(booleanValue);
 }
diff --git a/apps/tailwind-components/components/input/Radio.vue b/apps/tailwind-components/components/input/Radio.vue
index 408c36ef78..454f58e2f7 100644
--- a/apps/tailwind-components/components/input/Radio.vue
+++ b/apps/tailwind-components/components/input/Radio.vue
@@ -8,9 +8,11 @@
 </template>
 
 <script lang="ts" setup>
+import type { columnValue } from "../../../metadata-utils/src/types";
+
 defineProps<{
-  value?: string | boolean | null;
+  value?: columnValue;
 }>();
 
-const modelValue = defineModel<string | boolean | null>();
+const modelValue = defineModel<columnValue>();
 </script>
diff --git a/apps/tailwind-components/components/input/RadioGroup.vue b/apps/tailwind-components/components/input/RadioGroup.vue
index faf7adb09d..0e3cda6a6a 100644
--- a/apps/tailwind-components/components/input/RadioGroup.vue
+++ b/apps/tailwind-components/components/input/RadioGroup.vue
@@ -32,12 +32,7 @@
     </div>
 
     <button
-      v-show="
-        showClearButton &&
-        (modelValue === true ||
-          modelValue === false ||
-          (typeof modelValue === 'string' && modelValue.length > 0))
-      "
+      v-show="isClearBtnShow"
       class="ml-2 w-8 text-center text-button-outline hover:text-button-outline hover:underline"
       :class="{ 'ml-2': align === 'horizontal', 'mt-2': align === 'vertical' }"
       type="reset"
@@ -51,13 +46,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { RadioOptionsDataIF } from "~/types/types";
+import type { IRadioOptionsData } from "~/types/types";
 
 const props = withDefaults(
   defineProps<{
     id: string;
     modelValue: boolean | string | null;
-    radioOptions: RadioOptionsDataIF[];
+    radioOptions: IRadioOptionsData[];
     showClearButton?: boolean;
     align?: "horizontal" | "vertical";
   }>(),
@@ -72,4 +67,13 @@ const emit = defineEmits(["update:modelValue"]);
 function resetModelValue() {
   emit("update:modelValue", null);
 }
+
+const isClearBtnShow = computed(() => {
+  return (
+    props.showClearButton &&
+    (props.modelValue === true ||
+      props.modelValue === false ||
+      (typeof props.modelValue === "string" && props.modelValue.length > 0))
+  );
+});
 </script>
diff --git a/apps/tailwind-components/pages/input/Boolean.story.vue b/apps/tailwind-components/pages/input/Boolean.story.vue
index e8dc10278a..194f19c25d 100644
--- a/apps/tailwind-components/pages/input/Boolean.story.vue
+++ b/apps/tailwind-components/pages/input/Boolean.story.vue
@@ -1,14 +1,11 @@
 <template>
   <InputBoolean id="boolean-story-id" v-model="modelValue1" />
-
   <div class="my-4">intit empty: {{ modelValue1 }}</div>
 
   <InputBoolean id="boolean-story-id2" v-model="modelValue2" />
-
   <div class="my-4">init true: {{ modelValue2 }}</div>
 
   <InputBoolean id="boolean-story-id3" v-model="modelValue3" />
-
   <div class="my-4">init false: {{ modelValue3 }}</div>
 
   <InputBoolean
diff --git a/apps/tailwind-components/types/types.ts b/apps/tailwind-components/types/types.ts
index 3a51a77fd7..324180c596 100644
--- a/apps/tailwind-components/types/types.ts
+++ b/apps/tailwind-components/types/types.ts
@@ -1,4 +1,5 @@
 import type { IColumn } from "../../metadata-utils/dist";
+import type { columnValue } from "../../metadata-utils/src/types";
 
 export type Resp<T> = {
   data: Record<string, T[]>;
@@ -91,8 +92,8 @@ export interface IDocumentation {
   file: IFile;
 }
 
-export interface RadioOptionsDataIF {
-  value: string | boolean;
+export interface IRadioOptionsData {
+  value: columnValue;
   label?: string;
   checked?: boolean | undefined;
 }