RC-96 | Add Boolean inputs for the item forms

module/handlebarHelpers/inputs/booleanInput.mjs

@@ -0,0 +1,32 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+const { randomID } = foundry.utils;
+
+export function booleanInput(input, data) {
+	const label = localizer(input.label);
+	const id = `${data.meta.idp}-${randomID(10)}`;
+
+	if (data.meta.limited) {
+		return `<div data-input-type="boolean">
+			<span class="label">${label}</span>
+			<div>
+				<span class="value">???</span>
+			</div>
+		</div>`;
+	};
+
+	return `<div data-input-type="boolean">
+		<label for="${id}">
+			${label}
+		</label>
+		<div class="checkbox-container">
+			<input
+				type="checkbox"
+				id="${id}"
+				${input.value ? `checked` : ``}
+				name="${input.path}"
+				${data.meta.editable ? `` : `disabled`}
+			>
+		</div>
+	</div>`;
+};

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,4 +1,5 @@
 import { barInput } from "./barInput.mjs";
+import { booleanInput } from "./booleanInput.mjs";
 import { dropdownInput } from "./dropdownInput.mjs";
 import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
@@ -10,7 +11,7 @@ const inputTypes = {
 	integer: numberInput,
 	bar: barInput,
 	dropdown: dropdownInput,
-	boolean: displayOnly,
+	boolean: booleanInput,
 };
 
 const typesToSanitize = new Set([ `string`, `number` ]);

templates/Apps/AllItemSheetV1/style.css

@@ -61,4 +61,9 @@
 	[data-tag-count="0"] {
 		justify-content: start;
 	}
+
+	[data-input-type="boolean"] > .checkbox-container {
+		display: flex;
+		justify-content: right;
+	}
 }

templates/css/elements/input.css

@@ -16,6 +16,12 @@
 			border-bottom: var(--input-underline);
 		}
 
+		&[type="checkbox"] {
+			all: revert-layer;
+			--checkbox-checked-color: var(--accent-3);
+			--checkbox-background-color: var(--accent-2);
+		}
+
 		&::placeholder {
 			color: var(--input-placeholder-text);
 		}