feat(Form Builder): show default value for "Select" and "Check" fields (#34050)

frappe/public/js/form_builder/FormBuilder.vue

@@ -144,7 +144,7 @@ onMounted(() => store.fetch());
 			}
 
 			.editable {
-				input,
+				input:not([type="checkbox"]),
 				textarea,
 				select,
 				.ace_editor,
@@ -258,7 +258,7 @@ onMounted(() => store.fetch());
 			border-color: transparent;
 		}
 
-		input,
+		input:not([type="checkbox"]),
 		textarea,
 		select,
 		.ace_editor,
@@ -269,10 +269,6 @@ onMounted(() => store.fetch());
 		.ql-editor {
 			background-color: var(--control-bg) !important;
 		}
-
-		input[type="checkbox"] {
-			background-color: var(--fg-bg) !important;
-		}
 	}
 
 	.form-main > :deep(div:first-child:not(.tab-header)) {

frappe/public/js/form_builder/components/controls/CheckControl.vue

@@ -1,8 +1,18 @@
 <script setup>
-import { useSlots } from "vue";
+import { useSlots, computed } from "vue";
 
 const props = defineProps(["df", "value", "read_only"]);
 let slots = useSlots();
+
+// Get the display value considering both current value and default
+let display_checked = computed(() => {
+	// Use current value if explicitly set, otherwise fall back to default
+	const value =
+		props.value !== undefined && props.value !== null ? props.value : props.df.default;
+
+	// Frappe checkboxes use "1"/"0" strings or 1/0 numbers
+	return value === "1" || value === 1;
+});
 </script>
 
 <template>
@@ -10,7 +20,7 @@ let slots = useSlots();
 		<!-- checkbox -->
 		<label v-if="slots.label" class="field-controls">
 			<div class="checkbox">
-				<input type="checkbox" disabled />
+				<input type="checkbox" :checked="display_checked" disabled />
 				<slot name="label" />
 			</div>
 			<slot name="actions" />
@@ -18,7 +28,7 @@ let slots = useSlots();
 		<label v-else>
 			<input
 				type="checkbox"
-				:checked="value"
+				:checked="display_checked"
 				:disabled="read_only"
 				@change="(event) => $emit('update:modelValue', event.target.checked)"
 			/>
@@ -42,7 +52,6 @@ label .checkbox {
 	align-items: center;
 
 	input {
-		background-color: var(--fg-color);
 		box-shadow: none;
 		border: 1px solid var(--gray-400);
 		pointer-events: none;

frappe/public/js/form_builder/components/controls/SelectControl.vue

@@ -67,10 +67,20 @@ let select_control = computed(() => {
 });
 
 let content = computed({
-	get: () => props.modelValue,
+	get: () => props.modelValue ?? props.df.default,
 	set: (value) => emit("update:modelValue", value),
 });
 
+// Get the display label for the current selected value
+let display_value = computed(() => {
+	const current_value = content.value;
+	if (!current_value) return "";
+
+	const options = get_options();
+	const selected_option = options?.find((opt) => opt.value === current_value);
+	return selected_option ? selected_option.label : current_value;
+});
+
 onMounted(() => {
 	if (select.value) select_control.value;
 });
@@ -101,7 +111,7 @@ watch(
 
 		<!-- select input -->
 		<div class="select-input">
-			<input class="form-control" readonly />
+			<input class="form-control" readonly :value="display_value" />
 			<div class="select-icon" v-html="frappe.utils.icon('select', 'sm')"></div>
 		</div>