diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index f89d6ae19..3cb799367 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -54,7 +54,10 @@
 					></BuilderFieldsKeyValue>
 
 					<BuilderFieldsText
-						v-if="fieldValue.type == FieldType.Text"
+						v-if="
+							fieldValue.type == FieldType.Text ||
+							fieldValue.type == FieldType.Boolean
+						"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 						:error="errorsByFields[fieldKey]"
diff --git a/src/ui/src/components/core/content/CoreAnnotatedText.spec.ts b/src/ui/src/components/core/content/CoreAnnotatedText.spec.ts
index 0c5ff93f5..76129ea06 100644
--- a/src/ui/src/components/core/content/CoreAnnotatedText.spec.ts
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.spec.ts
@@ -33,10 +33,10 @@ describe("CoreAnnotatedText", async () => {
 					[injectionKeys.evaluatedFields as symbol]: {
 						text: ref(text),
 						seed: ref(1),
-						useMarkdown: ref("no"),
-						rotateHue: ref("yes"),
+						useMarkdown: ref(false),
+						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
-						copyButtons: ref("yes"),
+						copyButtons: ref(true),
 					},
 				},
 			},
@@ -73,10 +73,10 @@ describe("CoreAnnotatedText", async () => {
 					[injectionKeys.evaluatedFields as symbol]: {
 						text: ref(text),
 						seed: ref(1),
-						useMarkdown: ref("yes"),
-						rotateHue: ref("yes"),
+						useMarkdown: ref(true),
+						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
-						copyButtons: ref("yes"),
+						copyButtons: ref(true),
 					},
 				},
 			},
diff --git a/src/ui/src/components/core/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue
index 6cc6e584e..28f6f1503 100644
--- a/src/ui/src/components/core/content/CoreAnnotatedText.vue
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.vue
@@ -27,7 +27,7 @@
 			</span>
 		</template>
 		<SharedControlBar
-			v-if="fields.copyButtons.value === 'yes'"
+			v-if="fields.copyButtons.value"
 			:copy-raw-content="copyRawContent"
 			:copy-structured-content="copyStructuredContent"
 		/>
@@ -36,6 +36,7 @@
 
 <script lang="ts">
 import {
+	baseYesNoField,
 	buttonColor,
 	buttonTextColor,
 	cssClasses,
@@ -72,34 +73,22 @@ export default {
 				category: FieldCategory.Style,
 			},
 			rotateHue: {
+				...baseYesNoField,
 				name: "Rotate hue",
 				desc: "If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "yes",
 				category: FieldCategory.Style,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			copyButtons: {
+				...baseYesNoField,
 				name: "Copy buttons",
 				desc: "If active, adds a control bar with both copy text and JSON buttons.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 				category: FieldCategory.Style,
 			},
@@ -117,7 +106,6 @@ import { FieldCategory, FieldType } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
 import { computed, inject, readonly, ref, watch } from "vue";
 import chroma, { Color } from "chroma-js";
-import { useFieldValueAsYesNo } from "@/composables/useFieldValue";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdownRaw from "../base/BaseMarkdownRaw.vue";
 
@@ -132,7 +120,7 @@ const isBeingEdited = inject(injectionKeys.isBeingEdited);
 const componentId = inject(injectionKeys.componentId);
 const isEmpty = computed(() => !fields.text.value);
 const shouldDisplay = computed(() => !isEmpty.value || isBeingEdited.value);
-const useMarkdown = useFieldValueAsYesNo(fields, "useMarkdown");
+const useMarkdown = computed(() => Boolean(fields.useMarkdown.value));
 
 const COLOR_STEPS = [
 	{ h: -78, s: -34, l: 16 },
@@ -229,7 +217,7 @@ function getAnnotationBgColor(content: AnnotatedTextElementArray) {
 }
 
 function generateColor(s: string) {
-	if (fields.rotateHue.value == "no") {
+	if (!fields.rotateHue.value) {
 		return fields.referenceColor.value;
 	}
 
diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
index c944c3730..806334954 100644
--- a/src/ui/src/components/core/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -13,7 +13,7 @@ See the stubs for more details.
 					v-for="(message, messageId) in messages"
 					:key="messageId"
 					:message="message"
-					:use-markdown="fields.useMarkdown.value == 'yes'"
+					:use-markdown="fields.useMarkdown.value"
 					:assistant-role-color="fields.assistantRoleColor.value"
 					:initials="
 						message.role === 'assistant'
@@ -99,6 +99,7 @@ See the stubs for more details.
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
+	baseYesNoField,
 	buttonColor,
 	buttonTextColor,
 	containerBackgroundColor,
@@ -212,14 +213,10 @@ export default {
 				type: FieldType.Text,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			enableFileUpload: {
 				name: "Enable file upload",
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index 4f3289a48..0fda8f0ef 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -10,7 +10,7 @@
 				/>
 			</div>
 			<WdsControl
-				v-if="fields.enableDownload.value === 'yes'"
+				v-if="fields.enableDownload.value"
 				title="Download"
 				class="download"
 				@click="download"
@@ -137,6 +137,7 @@ import {
 	secondaryTextColor,
 	accentColor,
 	separatorColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
@@ -215,51 +216,31 @@ export default {
 				default: DEFAULT_DATA_FRAME,
 			},
 			showIndex: {
+				...baseYesNoField,
 				name: "Show index",
 				desc: "Shows the dataframe's index. If an Arrow table is used, shows the zero-based integer index.",
-				type: FieldType.Text,
 				default: "yes",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableSearch: {
+				...baseYesNoField,
 				name: "Enable search",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableRecordAdd: {
+				...baseYesNoField,
 				name: "Enable adding a record",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableRecordUpdate: {
+				...baseYesNoField,
 				name: "Enable updating a record",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableDownload: {
+				...baseYesNoField,
 				name: "Enable download",
 				desc: "Allows the user to download the data as CSV.",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			actions: {
 				name: "Actions",
@@ -269,13 +250,9 @@ export default {
 				validator: validatorObjectRecordNotNested,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
-				type: FieldType.Text,
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			displayRowCount: {
@@ -287,14 +264,10 @@ export default {
 				validator: validatorPositiveNumber,
 			},
 			wrapText: {
+				...baseYesNoField,
 				name: "Wrap text",
-				type: FieldType.Text,
 				category: FieldCategory.Style,
 				desc: "Not wrapping text allows for an uniform grid, but may be inconvenient if your data contains longer text fields.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			primaryTextColor,
@@ -408,12 +381,12 @@ const displayRowCount = computed(() =>
 const hasActions = computed(
 	() => Object.keys(fields.actions.value || {}).length > 0,
 );
-const useMarkdown = computed(() => fields.useMarkdown.value == "yes");
-const enableRecordUpdate = computed(
-	() => fields.enableRecordUpdate.value == "yes",
+const useMarkdown = computed(() => Boolean(fields.useMarkdown.value));
+const enableRecordUpdate = computed(() =>
+	Boolean(fields.enableRecordUpdate.value),
 );
-const enableRecordAdd = computed(() => fields.enableRecordAdd.value == "yes");
-const wrapText = computed(() => fields.wrapText.value === "yes");
+const enableRecordAdd = computed(() => Boolean(fields.enableRecordAdd.value));
+const wrapText = computed(() => Boolean(fields.wrapText.value));
 
 const rowOffset = computed(() => {
 	let maxOffset: number;
diff --git a/src/ui/src/components/core/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
index 40de32155..e8cafae64 100644
--- a/src/ui/src/components/core/content/CoreJsonViewer.vue
+++ b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -3,8 +3,8 @@
 		<SharedJsonViewer
 			:data="data ?? {}"
 			:initial-depth="initialDepth"
-			:enable-copy-to-json="fields.copy.value === 'yes'"
-			:hide-root="fields.hideRoot.value === 'yes'"
+			:enable-copy-to-json="fields.copy.value"
+			:hide-root="fields.hideRoot.value"
 		/>
 	</div>
 </template>
@@ -12,6 +12,7 @@
 <script lang="ts">
 import {
 	accentColor,
+	baseYesNoField,
 	cssClasses,
 	secondaryTextColor,
 	separatorColor,
@@ -61,24 +62,16 @@ const definition: WriterComponentDefinition = {
 			validator: validatorPositiveNumber,
 		},
 		hideRoot: {
+			...baseYesNoField,
 			name: "Hide root",
 			desc: "Don't show the type of the root node when it's an Object or an Array.",
-			type: FieldType.Text,
-			options: {
-				yes: "yes",
-				no: "no",
-			},
 			default: "no",
 			category: FieldCategory.Style,
 		},
 		copy: {
+			...baseYesNoField,
 			name: "Copy",
 			desc: "If active, adds a control bar with copy JSON button.",
-			type: FieldType.Text,
-			options: {
-				yes: "yes",
-				no: "no",
-			},
 			default: "no",
 			category: FieldCategory.Style,
 		},
diff --git a/src/ui/src/components/core/content/CoreProgressBar.vue b/src/ui/src/components/core/content/CoreProgressBar.vue
index c36d71d8b..9f5f50683 100644
--- a/src/ui/src/components/core/content/CoreProgressBar.vue
+++ b/src/ui/src/components/core/content/CoreProgressBar.vue
@@ -47,6 +47,7 @@ import {
 	accentColor,
 	primaryTextColor,
 	separatorColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 
 const clickHandlerStub = `
@@ -81,14 +82,10 @@ const definition: WriterComponentDefinition = {
 			default: "1",
 		},
 		displayPercentage: {
+			...baseYesNoField,
 			name: "Display percentage",
 			default: "no",
-			type: FieldType.Text,
 			category: FieldCategory.Style,
-			options: {
-				yes: "Yes",
-				no: "No",
-			},
 		},
 		accentColor,
 		primaryTextColor,
@@ -109,7 +106,6 @@ export default { writer: definition };
 <script setup lang="ts">
 import { CSSProperties, computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
-import { useFieldValueAsYesNo } from "@/composables/useFieldValue";
 import { getClick } from "@/renderer/syntheticEvents";
 import { usePercentageFormatter } from "@/composables/useFormatter";
 
@@ -122,7 +118,9 @@ const label = computed(() => String(fields.label?.value));
 const value = computed(() => Number(fields.value.value));
 const min = computed(() => Number(fields.min.value));
 const max = computed(() => Number(fields.max.value));
-const displayPercentage = useFieldValueAsYesNo(fields, "displayPercentage");
+const displayPercentage = computed(() =>
+	Boolean(fields.displayPercentage.value),
+);
 
 const progression = computed<number | undefined>(() => {
 	if (value.value === undefined || Number.isNaN(value.value)) {
diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
index 0f9fa78b4..4d8280c08 100644
--- a/src/ui/src/components/core/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -25,7 +25,11 @@
 
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
-import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import {
+	baseYesNoField,
+	cssClasses,
+	primaryTextColor,
+} from "@/renderer/sharedStyleFields";
 import { WdsColor } from "@/wds/tokens";
 
 const clickHandlerStub = `
@@ -61,13 +65,9 @@ export default {
 				category: FieldCategory.Style,
 			},
 			rotateHue: {
+				...baseYesNoField,
 				name: "Rotate hue",
 				desc: "If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "yes",
 				category: FieldCategory.Style,
 			},
@@ -113,7 +113,7 @@ const isClickable = computed(() => {
 });
 
 function generateColor(s: string) {
-	if (fields.rotateHue.value == "no") {
+	if (!fields.rotateHue.value) {
 		return fields.referenceColor.value;
 	}
 	const baseColor = chroma(fields.referenceColor.value);
diff --git a/src/ui/src/components/core/content/CoreText.spec.ts b/src/ui/src/components/core/content/CoreText.spec.ts
new file mode 100644
index 000000000..1ca6a1721
--- /dev/null
+++ b/src/ui/src/components/core/content/CoreText.spec.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it, beforeEach, beforeAll } from "vitest";
+import BaseMarkdown from "../base/BaseMarkdown.vue";
+import CoreText from "./CoreText.vue";
+import injectionKeys from "@/injectionKeys";
+import { buildMockComponent, buildMockCore, mockProvides } from "@/tests/mocks";
+import { shallowMount } from "@vue/test-utils";
+import { ref } from "vue";
+import { Core } from "@/writerTypes";
+
+describe("CoreText", async () => {
+	const text = `# Hello\n\nI'm the **content**.`;
+	let core: Core;
+
+	beforeAll(() => {
+		core = buildMockCore().core;
+
+		core.addComponent(
+			buildMockComponent({
+				handlers: { "wf-click": "python_handler" },
+			}),
+		);
+	});
+
+	it("should render in non-markdown mode", () => {
+		const wrapper = shallowMount(CoreText, {
+			global: {
+				provide: {
+					...mockProvides,
+					[injectionKeys.core as symbol]: core,
+					[injectionKeys.isBeingEdited as symbol]: ref(false),
+					[injectionKeys.evaluatedFields as symbol]: {
+						text: ref(text),
+						alignment: ref("center"),
+						useMarkdown: ref(false),
+					},
+				},
+			},
+		});
+
+		expect(wrapper.element).toMatchSnapshot();
+	});
+
+	it("should render in markdown mode", () => {
+		const wrapper = shallowMount(CoreText, {
+			global: {
+				provide: {
+					...mockProvides,
+					[injectionKeys.core as symbol]: core,
+					[injectionKeys.isBeingEdited as symbol]: ref(false),
+					[injectionKeys.evaluatedFields as symbol]: {
+						text: ref(text),
+						alignment: ref("center"),
+						useMarkdown: ref(true),
+					},
+				},
+			},
+		});
+
+		expect(wrapper.findComponent(BaseMarkdown).exists()).toBe(true);
+
+		expect(wrapper.element).toMatchSnapshot();
+	});
+});
diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index cdd686167..4efa3cfdd 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -9,7 +9,7 @@
 		<BaseEmptiness v-if="isEmpty" :component-id="componentId" />
 		<template v-else>
 			<BaseMarkdown
-				v-if="fields.useMarkdown.value == 'yes'"
+				v-if="fields.useMarkdown.value"
 				:raw-text="fields.text.value"
 				:style="contentStyle"
 			>
@@ -22,7 +22,11 @@
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import {
+	baseYesNoField,
+	cssClasses,
+	primaryTextColor,
+} from "@/renderer/sharedStyleFields";
 import { getClick } from "@/renderer/syntheticEvents";
 import { FieldCategory, FieldControl, FieldType } from "@/writerTypes";
 
@@ -50,14 +54,10 @@ export default {
 				control: FieldControl.Textarea,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
 				desc: "The Markdown output will be sanitised; unsafe elements will be removed.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			alignment: {
 				name: "Alignment",
@@ -83,6 +83,7 @@ export default {
 	},
 };
 </script>
+
 <script setup lang="ts">
 import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
diff --git a/src/ui/src/components/core/content/CoreVideoPlayer.vue b/src/ui/src/components/core/content/CoreVideoPlayer.vue
index 8226abe90..d5bb624ae 100644
--- a/src/ui/src/components/core/content/CoreVideoPlayer.vue
+++ b/src/ui/src/components/core/content/CoreVideoPlayer.vue
@@ -14,10 +14,10 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 	<div class="CoreVideoPlayer">
 		<video
 			:src="fields.src.value"
-			:controls="fields.controls.value === 'yes'"
-			:autoplay="fields.autoplay.value === 'yes'"
-			:loop="fields.loop.value === 'yes'"
-			:muted="fields.muted.value === 'yes'"
+			:controls="fields.controls.value"
+			:autoplay="fields.autoplay.value"
+			:loop="fields.loop.value"
+			:muted="fields.muted.value"
 		></video>
 		<div class="mask" />
 	</div>
@@ -25,8 +25,8 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
-import { cssClasses } from "@/renderer/sharedStyleFields";
 import { validatorUri } from "@/constants/validators";
+import { baseYesNoField, cssClasses } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -45,44 +45,28 @@ export default {
 				validator: validatorUri,
 			},
 			controls: {
+				...baseYesNoField,
 				name: "Controls",
 				desc: "Display video player controls.",
 				default: "yes",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			autoplay: {
+				...baseYesNoField,
 				name: "Autoplay",
 				desc: "Autoplay the video when the component is loaded.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			loop: {
+				...baseYesNoField,
 				name: "Loop",
 				desc: "Loop the video when it reaches the end.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			muted: {
+				...baseYesNoField,
 				name: "Muted",
 				desc: "Mute the video by default.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			cssClasses,
 		},
diff --git a/src/ui/src/components/core/content/__snapshots__/CoreText.spec.ts.snap b/src/ui/src/components/core/content/__snapshots__/CoreText.spec.ts.snap
new file mode 100644
index 000000000..37b15e4cf
--- /dev/null
+++ b/src/ui/src/components/core/content/__snapshots__/CoreText.spec.ts.snap
@@ -0,0 +1,39 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CoreText > should render in markdown mode 1`] = `
+<div
+  class="CoreText"
+  data-v-810f69c0=""
+  style="cursor: pointer;"
+>
+  
+  <base-markdown-stub
+    data-v-810f69c0=""
+    rawtext="# Hello
+
+I'm the **content**."
+    style="text-align: center;"
+  />
+  
+</div>
+`;
+
+exports[`CoreText > should render in non-markdown mode 1`] = `
+<div
+  class="CoreText"
+  data-v-810f69c0=""
+  style="cursor: pointer;"
+>
+  
+  <div
+    class="plainText"
+    data-v-810f69c0=""
+    style="text-align: center;"
+  >
+    # Hello
+
+I'm the **content**.
+  </div>
+  
+</div>
+`;
diff --git a/src/ui/src/components/core/embed/CoreMapbox.vue b/src/ui/src/components/core/embed/CoreMapbox.vue
index dfa271a0e..f43a6d605 100644
--- a/src/ui/src/components/core/embed/CoreMapbox.vue
+++ b/src/ui/src/components/core/embed/CoreMapbox.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
-import { cssClasses } from "@/renderer/sharedStyleFields";
+import { baseYesNoField, cssClasses } from "@/renderer/sharedStyleFields";
 import { useLogger } from "@/composables/useLogger";
 import {
 	validatorGpsLat,
@@ -68,13 +68,9 @@ export default {
 				validator: validatorGpsMarkers,
 			},
 			controls: {
+				...baseYesNoField,
 				name: "Controls visible",
 				default: "yes",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show map controls",
 			},
 			cssClasses,
@@ -139,7 +135,7 @@ const initMap = async () => {
 			rootEl.value.dispatchEvent(event);
 		});
 		controls = new mapboxgl.NavigationControl();
-		if (fields.controls.value === "yes") {
+		if (fields.controls.value) {
 			map.value.addControl(controls);
 		}
 		if (fields.markers.value) {
@@ -177,7 +173,7 @@ const renderMarkers = async () => {
 
 watch(fields.controls, () => {
 	if (map.value) {
-		if (fields.controls.value === "yes") {
+		if (fields.controls) {
 			map.value.addControl(controls);
 		} else {
 			map.value.removeControl(controls);
diff --git a/src/ui/src/components/core/embed/CorePDF.vue b/src/ui/src/components/core/embed/CorePDF.vue
index db9ed7a0d..f8b4bbd05 100644
--- a/src/ui/src/components/core/embed/CorePDF.vue
+++ b/src/ui/src/components/core/embed/CorePDF.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="rootEl" class="CorePDF">
-		<div v-if="fields.controls.value === 'yes'" class="controls">
+		<div v-if="fields.controls.value" class="controls">
 			<WdsControl @click="() => gotoPage(page - 1)">
 				<i class="material-symbols-outlined">arrow_upward</i>
 			</WdsControl>
@@ -51,6 +51,7 @@ import {
 	separatorColor,
 	primaryTextColor,
 	containerBackgroundColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import WdsControl from "@/wds/WdsControl.vue";
 import { validatorArrayOfString } from "@/constants/validators";
@@ -87,12 +88,8 @@ export default {
 				desc: "The page to be displayed.",
 			},
 			controls: {
+				...baseYesNoField,
 				name: "Controls",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show controls to navigate the PDF.",
 				default: "yes",
 			},
diff --git a/src/ui/src/components/core/input/CoreFileInput.vue b/src/ui/src/components/core/input/CoreFileInput.vue
index 19fe2849e..5749036a3 100644
--- a/src/ui/src/components/core/input/CoreFileInput.vue
+++ b/src/ui/src/components/core/input/CoreFileInput.vue
@@ -48,7 +48,7 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "@/renderer/sharedStyleFields";
+import { baseYesNoField, cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
@@ -94,13 +94,9 @@ export default {
 				desc: "Provides hints for browsers to select the correct file types. You can specify extensions and MIME types separated by comma, or leave empty to accept any file.",
 			},
 			allowMultipleFiles: {
+				...baseYesNoField,
 				name: "Allow multiple files",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			cssClasses,
 		},
@@ -145,7 +141,7 @@ const selectedFiles = computed<SavedFile[]>(() =>
 const allowFileTypes = computed(() => fields.allowFileTypes?.value ?? "");
 
 const allowMultipleFilesFlag = computed(() => {
-	return fields.allowMultipleFiles.value == "yes" ? true : undefined;
+	return fields.allowMultipleFiles.value || undefined;
 });
 
 const encodeFile = async (file: File) => {
diff --git a/src/ui/src/components/core/input/CoreTextInput.vue b/src/ui/src/components/core/input/CoreTextInput.vue
index 0d9b2fd34..4ac645f03 100644
--- a/src/ui/src/components/core/input/CoreTextInput.vue
+++ b/src/ui/src/components/core/input/CoreTextInput.vue
@@ -5,7 +5,7 @@
 		class="CoreTextInput"
 	>
 		<input
-			:type="fields.passwordMode.value == 'yes' ? 'password' : 'text'"
+			:type="fields.passwordMode.value ? 'password' : 'text'"
 			:value="formValue"
 			:placeholder="fields.placeholder.value"
 			aria-autocomplete="none"
@@ -29,7 +29,11 @@
 
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
-import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
+import {
+	accentColor,
+	baseYesNoField,
+	cssClasses,
+} from "@/renderer/sharedStyleFields";
 import { ComponentPublicInstance } from "vue";
 
 const description =
@@ -58,13 +62,9 @@ export default {
 				type: FieldType.Text,
 			},
 			passwordMode: {
+				...baseYesNoField,
 				name: "Password mode",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				category: FieldCategory.Style,
 			},
 			accentColor,
diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index af3b64056..15b212900 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -3,7 +3,7 @@
 		class="CoreColumn"
 		:style="rootStyle"
 		:class="{
-			sticky: isSticky,
+			sticky: fields.isSticky.value,
 			collapsible: isCollapsible,
 			collapsibleToRight: isCollapsibleToRight,
 			collapsed: isCollapsed,
@@ -47,6 +47,7 @@ import {
 	separatorColor,
 	startCollapsed,
 	isCollapsible as isCollapsibleField,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { validatorPositiveNumber } from "@/constants/validators";
 
@@ -75,13 +76,9 @@ export default {
 				validator: validatorPositiveNumber,
 			},
 			isSticky: {
+				...baseYesNoField,
 				name: "Sticky",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				category: FieldCategory.Style,
 			},
 			isCollapsible: isCollapsibleField,
@@ -111,11 +108,10 @@ const wf = inject(injectionKeys.core);
 const componentId = inject(injectionKeys.componentId);
 
 const fields = inject(injectionKeys.evaluatedFields);
-const isCollapsible = computed(() => fields.isCollapsible.value == "yes");
-const isCollapsed: Ref<boolean> = ref(
-	fields.isCollapsible.value == "yes" && fields.startCollapsed.value == "yes",
+const isCollapsible = computed(() => Boolean(fields.isCollapsible.value));
+const isCollapsed = ref(
+	fields.isCollapsible.value && fields.startCollapsed.value,
 );
-const isSticky = computed(() => fields.isSticky.value == "yes");
 
 const rootStyle = computed(() => {
 	let flex: string;
diff --git a/src/ui/src/components/core/layout/CoreSection.vue b/src/ui/src/components/core/layout/CoreSection.vue
index 516ae3c8c..26d7aa05f 100644
--- a/src/ui/src/components/core/layout/CoreSection.vue
+++ b/src/ui/src/components/core/layout/CoreSection.vue
@@ -93,9 +93,9 @@ import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 
-const isCollapsible = computed(() => fields.isCollapsible.value === "yes");
+const isCollapsible = computed(() => fields.isCollapsible.value);
 const isCollapsed = ref<boolean>(
-	isCollapsible.value && fields.startCollapsed.value === "yes",
+	isCollapsible.value && fields.startCollapsed.value,
 );
 </script>
 
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index 946ec7369..1b1511178 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -75,7 +75,7 @@ import { computed, inject, onMounted, Ref, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
-const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value == "yes");
+const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value);
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const componentId = inject(injectionKeys.componentId);
diff --git a/src/ui/src/components/core/layout/CoreStep.vue b/src/ui/src/components/core/layout/CoreStep.vue
index 28efff027..836ff9ace 100644
--- a/src/ui/src/components/core/layout/CoreStep.vue
+++ b/src/ui/src/components/core/layout/CoreStep.vue
@@ -18,7 +18,7 @@
 			:disabled="!isBeingEdited"
 			:class="{
 				active: isStepActive,
-				completed: fields.isCompleted.value == 'yes',
+				completed: fields.isCompleted.value,
 			}"
 			stepindex="0"
 			@click="activateStep"
@@ -28,11 +28,11 @@
 				<div
 					class="status"
 					:class="{
-						completed: fields.isCompleted.value == 'yes',
+						completed: fields.isCompleted.value,
 					}"
 				>
 					<i
-						v-if="fields.isCompleted.value == 'yes'"
+						v-if="fields.isCompleted.value"
 						class="material-symbols-outlined"
 					>
 						done
@@ -72,6 +72,7 @@ import {
 	contentHAlign,
 	cssClasses,
 	contentPadding,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { onBeforeUnmount } from "vue";
 
@@ -97,14 +98,10 @@ export default {
 				default: "16px",
 			},
 			isCompleted: {
+				...baseYesNoField,
 				name: "Completed",
 				desc: "Use a state reference to dynamically mark this step as complete.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			contentHAlign,
 			cssClasses,
@@ -203,7 +200,7 @@ function activateNextStep() {
 	const subsequentSteps = stepContainerData.value.steps.slice(
 		currentStepIndex + 1,
 	);
-	let nextStep = subsequentSteps.find((step) => step.isCompleted != "yes");
+	let nextStep = subsequentSteps.find((step) => !step.isCompleted);
 	if (!nextStep) {
 		const lastStep = stepContainerData.value.steps.at(-1);
 		nextStep = lastStep;
@@ -222,7 +219,7 @@ function checkIfStepIsParent(childId: Component["id"]): boolean {
 }
 
 function activateDefaultStep() {
-	if (fields.isCompleted.value != "yes") {
+	if (!fields.isCompleted.value) {
 		activateStep();
 		return;
 	}
@@ -270,7 +267,7 @@ Prevent a step of being active while completed.
 watch([isStepActive, fields.isCompleted], () => {
 	if (isBeingEdited.value) return;
 	if (!isStepActive.value) return;
-	if (fields.isCompleted.value == "yes") {
+	if (fields.isCompleted.value) {
 		activateNextStep();
 	}
 });
@@ -278,9 +275,9 @@ watch([isStepActive, fields.isCompleted], () => {
 /*
 Activate any step that was previously complete but switched to non-completed.
 */
-watch(fields.isCompleted, (value: string, oldValue: string) => {
-	if (oldValue !== "yes") return;
-	if (value !== "no") return;
+watch(fields.isCompleted, (value: boolean, oldValue: boolean) => {
+	if (!oldValue) return;
+	if (value) return;
 	activateDefaultStep();
 });
 
diff --git a/src/ui/src/components/core/other/CoreButton.vue b/src/ui/src/components/core/other/CoreButton.vue
index 8d572f697..9f5bf0d1e 100644
--- a/src/ui/src/components/core/other/CoreButton.vue
+++ b/src/ui/src/components/core/other/CoreButton.vue
@@ -25,6 +25,7 @@ import {
 	buttonShadow,
 	separatorColor,
 	cssClasses,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { watch } from "vue";
 import { getClick } from "@/renderer/syntheticEvents";
@@ -57,13 +58,9 @@ export default {
 				type: FieldType.Text,
 			},
 			isDisabled: {
+				...baseYesNoField,
 				name: "Disabled",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Disables all event handlers.",
 			},
 			buttonColor,
@@ -92,8 +89,8 @@ const isDisabled = inject(injectionKeys.isDisabled);
 
 watch(
 	fields.isDisabled,
-	(newFieldValue: string) => {
-		isDisabled.value = newFieldValue == "yes";
+	(newFieldValue: boolean) => {
+		isDisabled.value = newFieldValue;
 	},
 	{
 		immediate: true,
diff --git a/src/ui/src/components/core/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
index 69b9dc968..bcac48baa 100644
--- a/src/ui/src/components/core/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -74,6 +74,7 @@
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { validatorPositiveNumber } from "@/constants/validators";
+import { baseYesNoField } from "@/renderer/sharedStyleFields";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -131,23 +132,15 @@ export default {
 				desc: "A comma-separated list of page size options. If it's empty, the user can't change the page size. Set your default page size as the first option.",
 			},
 			pageSizeShowAll: {
+				...baseYesNoField,
 				name: "Show All Option",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show an option to show all records.",
 			},
 			jumpTo: {
+				...baseYesNoField,
 				name: "Jump To",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show an option to jump to a specific page.",
 			},
 			// Disabled for now, I am waiting functions to manipulate Hash params from the URL
@@ -205,11 +198,9 @@ const { handleInput: handlePageSizeInput } = useFormValueBroker(
 	rootEl,
 );
 const pagesizeEnabled = computed(
-	() =>
-		fields.pageSizeOptions.value !== "" ||
-		fields.pageSizeShowAll.value === "yes",
+	() => fields.pageSizeOptions.value !== "" || fields.pageSizeShowAll.value,
 );
-const jumptoEnabled = computed(() => fields.jumpTo.value === "yes");
+const jumptoEnabled = computed(() => fields.jumpTo.value);
 
 const firstItem = computed(() => {
 	if (fields.totalItems.value == 0) {
@@ -237,7 +228,7 @@ const pageSizeOptions = computed(() => {
 		const n = parseInt(inputs[o], 10);
 		options.push({ value: n, label: `${n} items` });
 	}
-	if (fields.pageSizeShowAll.value === "yes") {
+	if (fields.pageSizeShowAll.value) {
 		options.push({ value: totalItem.value, label: "All items" });
 	}
 
diff --git a/src/ui/src/components/core/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
index 8ca0c87b6..20734401f 100644
--- a/src/ui/src/components/core/other/CoreTimer.vue
+++ b/src/ui/src/components/core/other/CoreTimer.vue
@@ -9,8 +9,12 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
-import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
 import { validatorPositiveNumber } from "@/constants/validators";
+import {
+	accentColor,
+	baseYesNoField,
+	cssClasses,
+} from "@/renderer/sharedStyleFields";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -35,14 +39,10 @@ export default {
 				validator: validatorPositiveNumber,
 			},
 			isActive: {
+				...baseYesNoField,
 				name: "Active",
 				default: "yes",
 				desc: "Whether the timer should trigger tick events.",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			accentColor,
 			cssClasses,
@@ -76,7 +76,7 @@ const wf = inject(injectionKeys.core);
 const rootEl = useTemplateRef("rootEl");
 
 const intervalMs = computed(() => fields.intervalMs.value);
-const isActive = computed(() => fields.isActive.value == "yes");
+const isActive = computed(() => fields.isActive.value);
 const isFailing = ref(false);
 const componentId = inject(injectionKeys.componentId);
 const isTickHandlerSet = computed(
diff --git a/src/ui/src/composables/useFieldValue.ts b/src/ui/src/composables/useFieldValue.ts
deleted file mode 100644
index 595f1f93a..000000000
--- a/src/ui/src/composables/useFieldValue.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ComputedRef, computed } from "vue";
-
-type Fields = Record<string, ComputedRef<unknown>>;
-
-export function useFieldValueAsYesNo(
-	fields: Fields,
-	key: string,
-): ComputedRef<boolean> {
-	return computed(() => fields[key].value === "yes");
-}
diff --git a/src/ui/src/renderer/sharedStyleFields.ts b/src/ui/src/renderer/sharedStyleFields.ts
index 173d087c4..8702e4e42 100644
--- a/src/ui/src/renderer/sharedStyleFields.ts
+++ b/src/ui/src/renderer/sharedStyleFields.ts
@@ -117,21 +117,27 @@ export const contentPadding: WriterComponentDefinitionField = {
 	category: FieldCategory.Style,
 };
 
-const yesNoOptions = { yes: "Yes", no: "No" };
+export const baseYesNoField = Object.freeze<
+	Pick<WriterComponentDefinitionField, "type" | "validator" | "options">
+>({
+	type: FieldType.Boolean,
+	options: { yes: "Yes", no: "No" },
+	validator: {
+		type: "boolean",
+	},
+});
 
 export const isCollapsible: WriterComponentDefinitionField = {
+	...baseYesNoField,
 	name: "Collapsible",
 	default: "no",
-	type: FieldType.Text,
-	options: yesNoOptions,
 	category: FieldCategory.Style,
 };
 
 export const startCollapsed: WriterComponentDefinitionField = {
+	...baseYesNoField,
 	name: "Start collapsed",
-	type: FieldType.Text,
 	category: FieldCategory.Style,
 	default: "no",
-	options: yesNoOptions,
 	desc: "Only applied when the component is collapsible.",
 };
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index ec82916e3..99ba2c4f7 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -17,7 +17,7 @@ export function useEvaluator(wf: Core) {
 			s = "";
 		let level = 0;
 
-		let i = 0
+		let i = 0;
 		while (i < expr.length) {
 			const c = expr.charAt(i);
 			if (c == "\\") {
@@ -51,7 +51,7 @@ export function useEvaluator(wf: Core) {
 				s += c;
 			}
 
-			i++
+			i++;
 		}
 
 		if (s) {
@@ -173,7 +173,11 @@ export function useEvaluator(wf: Core) {
 			typeof evaluated == "undefined" ||
 			evaluated === null ||
 			evaluated === "";
-		if (fieldType == FieldType.Object || fieldType == FieldType.KeyValue || fieldType == FieldType.Tools) {
+		if (
+			fieldType == FieldType.Object ||
+			fieldType == FieldType.KeyValue ||
+			fieldType == FieldType.Tools
+		) {
 			if (!evaluated) {
 				return JSON.parse(defaultValue ?? null);
 			}
@@ -194,6 +198,9 @@ export function useEvaluator(wf: Core) {
 			if (typeof n === "undefined" || Number.isNaN(n))
 				return floatDefaultValue ?? null;
 			return n;
+		} else if (fieldType == FieldType.Boolean) {
+			const value = isValueEmpty ? defaultValue : evaluated;
+			return value === "yes" || value === "true";
 		} else if (fieldType == FieldType.IdKey) {
 			return contentValue;
 		} else {
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index befd78005..8eb3fc42b 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -123,6 +123,7 @@ export const enum ClipboardOperation {
 
 export const enum FieldType {
 	Text = "Text",
+	Boolean = "Boolean",
 	KeyValue = "Key-Value",
 	Color = "Color",
 	Shadow = "Shadow",
diff --git a/tests/e2e/tests/builderFieldValidation.spec.ts b/tests/e2e/tests/builderFieldValidation.spec.ts
index dbbec0cae..69764b64f 100644
--- a/tests/e2e/tests/builderFieldValidation.spec.ts
+++ b/tests/e2e/tests/builderFieldValidation.spec.ts
@@ -24,18 +24,6 @@ test.describe("Builder field validation", () => {
 			.dragTo(page.locator(".CoreSection"));
 		await page.locator(`button.CoreButton.component`).click();
 
-		// is disabled
-
-		const isDisabledInput = page.locator(
-			'.BuilderFieldsText[data-automation-key="isDisabled"] input',
-		);
-
-		await isDisabledInput.fill("maybe");
-		expect(await isDisabledInput.getAttribute("aria-invalid")).toBe("true");
-
-		await isDisabledInput.fill("yes");
-		expect(await isDisabledInput.getAttribute("aria-invalid")).toBe("false");
-
 		// css classes
 
 		const cssClasses = page.locator(