From ec7341934ddb13cf5401f0bbfd4199db33a79159 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 23 Feb 2026 23:14:23 +0700
Subject: [PATCH 01/12] Time input component

---
 packages/common/src/constants/datetime.ts     | 17 +++++++-
 .../form-elements/input/InputControl.vue      |  4 ++
 .../form-elements/input/InputTime.vue         | 43 +++++++++++++++++++
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-forms/src/components/form-elements/input/InputTime.vue

diff --git a/packages/common/src/constants/datetime.ts b/packages/common/src/constants/datetime.ts
index 79d231433..5be0fda8e 100644
--- a/packages/common/src/constants/datetime.ts
+++ b/packages/common/src/constants/datetime.ts
@@ -6,9 +6,15 @@ const ISO_DATE_LIKE_SUBPATTERN = '\\d{4}-\\d{2}-\\d{2}';
 
 export const ISO_DATE_LIKE_PATTERN = new RegExp(`^${ISO_DATE_LIKE_SUBPATTERN}(?=T|$)`);
 
-const ISO_TIME_LIKE_SUBPATTERN = `(${[
+const STRICT_TIME_FORMATS = [
 	'\\d{2}:\\d{2}:\\d{2}\\.\\d+',
 	'\\d{2}:\\d{2}:\\d{2}',
+];
+
+const STRICT_ISO_TIME_SUBPATTERN = `(${[ ...STRICT_TIME_FORMATS ].join('|')})`;
+
+const ISO_TIME_LIKE_SUBPATTERN = `(${[
+	...STRICT_TIME_FORMATS,
 	'\\d{2}:\\d{2}',
 	'\\d{2}',
 ].join('|')})`;
@@ -50,3 +56,12 @@ export const ISO_DATE_OR_DATE_TIME_LIKE_PATTERN = new RegExp(
 export const ISO_DATE_OR_DATE_TIME_NO_OFFSET_PATTERN = new RegExp(
 	['^', ISO_DATE_LIKE_SUBPATTERN, `(T${ISO_TIME_LIKE_SUBPATTERN})?`, '$'].join('')
 );
+
+export const ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN = new RegExp(
+	[
+		'^',
+		STRICT_ISO_TIME_SUBPATTERN,
+		`(${ISO_OFFSET_SUBPATTERN})?`,
+		'$',
+	].join('')
+);
diff --git a/packages/web-forms/src/components/form-elements/input/InputControl.vue b/packages/web-forms/src/components/form-elements/input/InputControl.vue
index 85d0b362c..1e11ae07e 100644
--- a/packages/web-forms/src/components/form-elements/input/InputControl.vue
+++ b/packages/web-forms/src/components/form-elements/input/InputControl.vue
@@ -10,6 +10,7 @@ import InputGeoMultiPoint from '@/components/form-elements/input/InputGeoMultiPo
 import InputInt from '@/components/form-elements/input/InputInt.vue';
 import InputNumbersAppearance from '@/components/form-elements/input/InputNumbersAppearance.vue';
 import InputText from '@/components/form-elements/input/InputText.vue';
+import InputTime from '@/components/form-elements/input/InputTime.vue';
 import { IS_FORM_EDIT_MODE } from '@/lib/constants/injection-keys.ts';
 import type { AnyInputNode } from '@getodk/xforms-engine';
 import { inject } from 'vue';
@@ -49,6 +50,9 @@ const isFormEditMode = inject(IS_FORM_EDIT_MODE);
 		<template v-else-if="node.valueType === 'date'">
 			<InputDate :question="node" />
 		</template>
+		<template v-else-if="node.valueType === 'time'">
+			<InputTime :question="node" />
+		</template>
 		<template v-else>
 			<InputText :node="node" />
 		</template>
diff --git a/packages/web-forms/src/components/form-elements/input/InputTime.vue b/packages/web-forms/src/components/form-elements/input/InputTime.vue
new file mode 100644
index 000000000..7772ddfc1
--- /dev/null
+++ b/packages/web-forms/src/components/form-elements/input/InputTime.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN } from '@getodk/common/constants/datetime.ts';
+import type { TimeInputNode } from '@getodk/xforms-engine';
+import DatePicker from 'primevue/datepicker';
+import { computed } from 'vue';
+
+const props = defineProps<{ readonly question: TimeInputNode }>();
+
+const isDisabled = computed(() => props.question.currentState.readonly === true);
+
+const value = computed({
+	get: () => {
+		if (props.question.currentState.value == null) {
+			return null;
+		}
+
+		const temporalValue = props.question.currentState.value.toString();
+		if (!ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN.test(temporalValue)) {
+			return null;
+		}
+
+		const today = new Date();
+		const yyyy = today.getFullYear();
+		const mm = String(today.getMonth() + 1).padStart(2, '0');
+		const dd = String(today.getDate()).padStart(2, '0');
+		return new Date(`${yyyy}-${mm}-${dd}T${temporalValue}`);
+	},
+	set: (newTime) => {
+		props.question.setValue(newTime);
+	},
+});
+</script>
+
+<template>
+	<DatePicker v-model="value" time-only hour-format="12" :disabled="isDisabled" />
+</template>
+
+<style lang="scss">
+.p-datepicker-input:disabled,
+.p-datepicker-input:disabled + .p-datepicker-input-icon-container {
+	cursor: not-allowed;
+}
+</style>

From 43e7f67c45b13b347d04b7030c13ec0f817dfed5 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 24 Feb 2026 02:04:32 +0700
Subject: [PATCH 02/12] Time codec

---
 packages/common/src/constants/datetime.ts     | 22 ++---
 .../xforms-engine/src/client/InputNode.ts     |  4 +
 packages/xforms-engine/src/client/NoteNode.ts |  4 +
 .../src/lib/codecs/TimeValueCodec.ts          | 84 +++++++++++++++++++
 .../src/lib/codecs/getSharedValueCodec.ts     |  7 +-
 5 files changed, 102 insertions(+), 19 deletions(-)
 create mode 100644 packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts

diff --git a/packages/common/src/constants/datetime.ts b/packages/common/src/constants/datetime.ts
index 5be0fda8e..e639ced00 100644
--- a/packages/common/src/constants/datetime.ts
+++ b/packages/common/src/constants/datetime.ts
@@ -6,18 +6,13 @@ const ISO_DATE_LIKE_SUBPATTERN = '\\d{4}-\\d{2}-\\d{2}';
 
 export const ISO_DATE_LIKE_PATTERN = new RegExp(`^${ISO_DATE_LIKE_SUBPATTERN}(?=T|$)`);
 
-const STRICT_TIME_FORMATS = [
-	'\\d{2}:\\d{2}:\\d{2}\\.\\d+',
-	'\\d{2}:\\d{2}:\\d{2}',
-];
+const STRICT_TIME_FORMATS = ['\\d{2}:\\d{2}:\\d{2}\\.\\d+', '\\d{2}:\\d{2}:\\d{2}'];
 
-const STRICT_ISO_TIME_SUBPATTERN = `(${[ ...STRICT_TIME_FORMATS ].join('|')})`;
+const STRICT_ISO_TIME_SUBPATTERN = `(${[...STRICT_TIME_FORMATS].join('|')})`;
 
-const ISO_TIME_LIKE_SUBPATTERN = `(${[
-	...STRICT_TIME_FORMATS,
-	'\\d{2}:\\d{2}',
-	'\\d{2}',
-].join('|')})`;
+const ISO_TIME_LIKE_SUBPATTERN = `(${[...STRICT_TIME_FORMATS, '\\d{2}:\\d{2}', '\\d{2}'].join(
+	'|'
+)})`;
 
 export const ISO_TIME_LIKE_PATTERN = new RegExp(`^${ISO_TIME_LIKE_SUBPATTERN}$`);
 
@@ -58,10 +53,5 @@ export const ISO_DATE_OR_DATE_TIME_NO_OFFSET_PATTERN = new RegExp(
 );
 
 export const ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN = new RegExp(
-	[
-		'^',
-		STRICT_ISO_TIME_SUBPATTERN,
-		`(${ISO_OFFSET_SUBPATTERN})?`,
-		'$',
-	].join('')
+	['^', STRICT_ISO_TIME_SUBPATTERN, `(${ISO_OFFSET_SUBPATTERN})?`, '$'].join('')
 );
diff --git a/packages/xforms-engine/src/client/InputNode.ts b/packages/xforms-engine/src/client/InputNode.ts
index f665d948c..1205402d8 100644
--- a/packages/xforms-engine/src/client/InputNode.ts
+++ b/packages/xforms-engine/src/client/InputNode.ts
@@ -85,6 +85,7 @@ export type StringInputValue = InputValue<'string'>;
 export type IntInputValue = InputValue<'int'>;
 export type DecimalInputValue = InputValue<'decimal'>;
 export type DateInputValue = InputValue<'date'>;
+export type TimeInputValue = InputValue<'time'>;
 export type GeopointInputValue = InputValue<'geopoint'>;
 export type GeoshapeInputValue = InputValue<'geoshape'>;
 export type GeotraceInputValue = InputValue<'geotrace'>;
@@ -93,6 +94,7 @@ export type StringInputNode = InputNode<'string'>;
 export type IntInputNode = InputNode<'int'>;
 export type DecimalInputNode = InputNode<'decimal'>;
 export type DateInputNode = InputNode<'date'>;
+export type TimeInputNode = InputNode<'time'>;
 export type GeopointInputNode = InputNode<'geopoint'>;
 export type GeoshapeInputNode = InputNode<'geoshape'>;
 export type GeotraceInputNode = InputNode<'geotrace'>;
@@ -104,6 +106,7 @@ type SupportedInputValueType =
 	| 'int'
 	| 'decimal'
 	| 'date'
+	| 'time'
 	| 'geopoint'
 	| 'geoshape'
 	| 'geotrace';
@@ -119,6 +122,7 @@ export type AnyInputNode =
 	| IntInputNode
 	| DecimalInputNode
 	| DateInputNode
+	| TimeInputNode
 	| GeopointInputNode
 	| GeoshapeInputNode
 	| GeotraceInputNode
diff --git a/packages/xforms-engine/src/client/NoteNode.ts b/packages/xforms-engine/src/client/NoteNode.ts
index 0a2ee41b0..147e1b931 100644
--- a/packages/xforms-engine/src/client/NoteNode.ts
+++ b/packages/xforms-engine/src/client/NoteNode.ts
@@ -82,6 +82,7 @@ export type StringNoteValue = NoteValue<'string'>;
 export type IntNoteValue = NoteValue<'int'>;
 export type DecimalNoteValue = NoteValue<'decimal'>;
 export type DateNoteValue = NoteValue<'date'>;
+export type TimeNoteValue = NoteValue<'time'>;
 export type GeopointNoteValue = NoteValue<'geopoint'>;
 export type GeoshapeNoteValue = NoteValue<'geoshape'>;
 export type GeotraceNoteValue = NoteValue<'geotrace'>;
@@ -90,6 +91,7 @@ export type StringNoteNode = NoteNode<'string'>;
 export type IntNoteNode = NoteNode<'int'>;
 export type DecimalNoteNode = NoteNode<'decimal'>;
 export type DateNoteNode = NoteNode<'date'>;
+export type TimeNoteNode = NoteNode<'time'>;
 export type GeopointNoteNode = NoteNode<'geopoint'>;
 export type GeoshapeNoteNode = NoteNode<'geoshape'>;
 export type GeotraceNoteNode = NoteNode<'geotrace'>;
@@ -101,6 +103,7 @@ type SupportedNoteValueType =
 	| 'int'
 	| 'decimal'
 	| 'date'
+	| 'time'
 	| 'geopoint'
 	| 'geoshape'
 	| 'geotrace';
@@ -116,6 +119,7 @@ export type AnyNoteNode =
 	| IntNoteNode
 	| DecimalNoteNode
 	| DateNoteNode
+	| TimeNoteNode
 	| GeopointNoteNode
 	| GeoshapeNoteNode
 	| GeotraceNoteNode
diff --git a/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
new file mode 100644
index 000000000..17987b82a
--- /dev/null
+++ b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
@@ -0,0 +1,84 @@
+import { ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN } from '@getodk/common/constants/datetime.ts';
+import { Temporal } from 'temporal-polyfill';
+import { type CodecDecoder, type CodecEncoder, ValueCodec } from './ValueCodec.ts';
+
+export type TimeRuntimeValue = string | null;
+
+export type TimeInputValue =
+	| Date
+	| Temporal.PlainDateTime
+	| Temporal.PlainTime
+	| Temporal.ZonedDateTime
+	| string
+	| null;
+
+const validateTimeString = (value: string): TimeRuntimeValue => {
+	if (value == null || !ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN.test(value)) {
+		return null;
+	}
+
+	return value;
+};
+
+const parseZonedDateTimeToString = (value: Temporal.ZonedDateTime): string => {
+	if (!value) {
+		return '';
+	}
+	const time = value.toPlainTime().toString();
+	const offset = value.offset;
+	return `${time}${offset === '+00:00' ? 'Z' : offset}`;
+};
+
+/**
+ * Converts a time-like value ({@link TimeInputValue}) to a strict time string.
+ * Honors timezones/offsets if present on the input objects.
+ *
+ * @param value - The value to convert.
+ * @returns A time string or empty string if invalid.
+ */
+const toTimeString = (value: TimeInputValue): string => {
+	if (value == null) {
+		return '';
+	}
+
+	try {
+		if (value instanceof Date) {
+			const zonedTime = Temporal.Instant.fromEpochMilliseconds(value.getTime()).toZonedDateTimeISO(
+				Temporal.Now.timeZoneId()
+			);
+			return parseZonedDateTimeToString(zonedTime);
+		}
+
+		if (value instanceof Temporal.PlainTime) {
+			return value.toString();
+		}
+
+		if (value instanceof Temporal.PlainDateTime) {
+			return value.toPlainTime().toString();
+		}
+
+		if (value instanceof Temporal.ZonedDateTime) {
+			return parseZonedDateTimeToString(value);
+		}
+
+		return validateTimeString(value) ?? '';
+	} catch (error) {
+		// eslint-disable-next-line no-console
+		console.warn('Error parsing time value:', error);
+		return '';
+	}
+};
+
+export class TimeValueCodec extends ValueCodec<'time', TimeRuntimeValue, TimeInputValue> {
+	constructor() {
+		const encodeValue: CodecEncoder<TimeInputValue> = (value) => {
+			return toTimeString(value);
+		};
+
+		const decodeValue: CodecDecoder<TimeRuntimeValue> = (value: string) => {
+			return validateTimeString(value);
+		};
+
+		super('time', encodeValue, decodeValue);
+	}
+}
diff --git a/packages/xforms-engine/src/lib/codecs/getSharedValueCodec.ts b/packages/xforms-engine/src/lib/codecs/getSharedValueCodec.ts
index 02fb74321..e62019677 100644
--- a/packages/xforms-engine/src/lib/codecs/getSharedValueCodec.ts
+++ b/packages/xforms-engine/src/lib/codecs/getSharedValueCodec.ts
@@ -24,6 +24,7 @@ import {
 } from './geolocation/Geotrace.ts';
 import { type IntInputValue, type IntRuntimeValue, IntValueCodec } from './IntValueCodec.ts';
 import { StringValueCodec } from './StringValueCodec.ts';
+import { type TimeInputValue, type TimeRuntimeValue, TimeValueCodec } from './TimeValueCodec.ts';
 import type { ValueCodec } from './ValueCodec.ts';
 import { ValueTypePlaceholderCodec } from './ValueTypePlaceholderCodec.ts';
 
@@ -33,7 +34,7 @@ interface RuntimeValuesByType {
 	readonly decimal: DecimalRuntimeValue;
 	readonly boolean: string;
 	readonly date: DatetimeRuntimeValue;
-	readonly time: string;
+	readonly time: TimeRuntimeValue;
 	readonly dateTime: string;
 	readonly geopoint: GeopointRuntimeValue;
 	readonly geotrace: GeotraceRuntimeValue;
@@ -51,7 +52,7 @@ interface RuntimeInputValuesByType {
 	readonly decimal: DecimalInputValue;
 	readonly boolean: string;
 	readonly date: DatetimeInputValue;
-	readonly time: string;
+	readonly time: TimeInputValue;
 	readonly dateTime: string;
 	readonly geopoint: GeopointInputValue;
 	readonly geotrace: GeotraceInputValue;
@@ -80,7 +81,7 @@ export const sharedValueCodecs: SharedValueCodecs = {
 	decimal: new DecimalValueCodec(),
 	boolean: new ValueTypePlaceholderCodec('boolean'),
 	date: new DateValueCodec(),
-	time: new ValueTypePlaceholderCodec('time'),
+	time: new TimeValueCodec(),
 	dateTime: new ValueTypePlaceholderCodec('dateTime'),
 	binary: new ValueTypePlaceholderCodec('binary'),
 	barcode: new ValueTypePlaceholderCodec('barcode'),

From 13d27834f1893eb97cf169cd7bf2f953179fc951 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 24 Feb 2026 02:15:36 +0700
Subject: [PATCH 03/12] test forms

---
 .../date.xml => date-and-time/date-and-time.xml}      | 11 +++++++++++
 .../src/fixtures/notes/2-all-possible-notes.xml       |  5 +++++
 2 files changed, 16 insertions(+)
 rename packages/common/src/fixtures/{date/date.xml => date-and-time/date-and-time.xml} (87%)

diff --git a/packages/common/src/fixtures/date/date.xml b/packages/common/src/fixtures/date-and-time/date-and-time.xml
similarity index 87%
rename from packages/common/src/fixtures/date/date.xml
rename to packages/common/src/fixtures/date-and-time/date-and-time.xml
index f1d443dfc..944a952dd 100644
--- a/packages/common/src/fixtures/date/date.xml
+++ b/packages/common/src/fixtures/date-and-time/date-and-time.xml
@@ -20,6 +20,9 @@
           <text id="/data/dates/vegetables_date:label">
             <value>When was the last time you ate vegetables?</value>
           </text>
+          <text id="/data/dates/time:label">
+            <value>What time is your first meal?</value>
+          </text>
         </translation>
         <translation lang="French (fr)">
           <text id="/data/dates/survey_date:label">
@@ -34,6 +37,9 @@
           <text id="/data/dates/vegetables_date:label">
             <value>Quand est-ce que vous avez mangé des légumes pour la dernière fois ?</value>
           </text>
+          <text id="/data/dates/time:label">
+            <value>À quelle heure prends-tu ton premier repas ?</value>
+          </text>
         </translation>
       </itext>
       <instance>
@@ -43,6 +49,7 @@
             <date_of_birth/>
             <fruits_date/>
             <vegetables_date/>
+            <time>22:02:10.562+06:00</time>
           </dates>
           <meta>
             <instanceID/>
@@ -55,6 +62,7 @@
             relevant=" /data/dates/date_of_birth  != &quot;&quot;"/>
       <bind nodeset="/data/dates/vegetables_date" type="date" required="false()"
             relevant=" /data/dates/date_of_birth  != &quot;&quot;" readonly="/data/dates/date_of_birth &lt;= today()"/>
+      <bind nodeset="/data/dates/time" type="time" required="true()" />
       <bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid"/>
     </model>
   </h:head>
@@ -72,6 +80,9 @@
       <input ref="/data/dates/vegetables_date">
         <label ref="jr:itext('/data/dates/vegetables_date:label')"/>
       </input>
+      <input ref="/data/dates/time">
+        <label ref="jr:itext('/data/dates/time:label')"/>
+      </input>
     </group>
   </h:body>
 </h:html>
diff --git a/packages/common/src/fixtures/notes/2-all-possible-notes.xml b/packages/common/src/fixtures/notes/2-all-possible-notes.xml
index 259022fb7..ad53ee438 100644
--- a/packages/common/src/fixtures/notes/2-all-possible-notes.xml
+++ b/packages/common/src/fixtures/notes/2-all-possible-notes.xml
@@ -20,6 +20,7 @@
             <read_only_int_value>3</read_only_int_value>
             <note_calc_decimal_from_int />
             <date_note>2025-12-21T23:30:05</date_note>
+            <time_note>22:02:10.562+06:00</time_note>
             <geopoint_note>38.253094215699576 21.756382658677467 0 150</geopoint_note>
             <geotrace_note>37.7749 -122.4194 0 0; 37.775 -122.419 0 0; 37.774 -122.420 0 0</geotrace_note>
             <geoshape_note>37.7749 -122.4194 0 0; 37.775 -122.419 0 0; 37.774 -122.420 0 0; 37.7749 -122.4194 0 0</geoshape_note>
@@ -42,6 +43,7 @@
       <bind nodeset="/data/group/note_calc_decimal_from_int" type="decimal"
         calculate="/data/group/read_only_int_value + 1.5" readonly="true()" />
       <bind nodeset="/data/group/date_note" type="date" readonly="true()" />
+      <bind nodeset="/data/group/time_note" type="time" readonly="true()" />
       <bind nodeset="/data/group/geopoint_note" type="geopoint" readonly="true()" />
       <bind nodeset="/data/group/geotrace_note" type="geotrace" readonly="true()" />
       <bind nodeset="/data/group/geoshape_note" type="geoshape" readonly="true()" />
@@ -87,6 +89,9 @@
       <input ref="/data/group/date_note">
         <label>A note with date type</label>
       </input>
+      <input ref="/data/group/time_note">
+        <label>A note with time type</label>
+      </input>
       <input ref="/data/group/geopoint_note">
         <label>A note with geopoint type</label>
       </input>

From 7fa0e76fa9db8d9ae918f2eed37567a408ba432a Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 24 Feb 2026 23:02:55 +0700
Subject: [PATCH 04/12] test coverage

---
 packages/common/src/constants/datetime.ts     |   2 +-
 packages/scenario/test/time-bind-type.test.ts | 135 ++++++++++++++++++
 .../src/lib/codecs/TimeValueCodec.ts          |  17 ++-
 3 files changed, 150 insertions(+), 4 deletions(-)
 create mode 100644 packages/scenario/test/time-bind-type.test.ts

diff --git a/packages/common/src/constants/datetime.ts b/packages/common/src/constants/datetime.ts
index e639ced00..4c604aaa4 100644
--- a/packages/common/src/constants/datetime.ts
+++ b/packages/common/src/constants/datetime.ts
@@ -26,7 +26,7 @@ const ISO_OFFSET_SUBPATTERN = `(${TIMEZONE_OFFSET_SUBPATTERN}|Z)`;
  * Validates a timezone offset (e.g., "+01:00", "-12:30") in the format ±HH:MM.
  * Ensures hours are between 00 and 14, and minutes are between 00 and 59, matching standard timezone offset ranges.
  */
-export const VALID_OFFSET_VALUE = new RegExp('^[+-]([0][0-9]|1[0-4]):([0-5][0-9])$');
+export const VALID_OFFSET_VALUE = new RegExp('^([+-]([0][0-9]|1[0-4]):([0-5][0-9])|Z)$', 'i');
 
 export const ISO_DATE_TIME_LIKE_PATTERN = new RegExp(
 	[
diff --git a/packages/scenario/test/time-bind-type.test.ts b/packages/scenario/test/time-bind-type.test.ts
new file mode 100644
index 000000000..ab7c814fc
--- /dev/null
+++ b/packages/scenario/test/time-bind-type.test.ts
@@ -0,0 +1,135 @@
+import {
+	bind,
+	body,
+	head,
+	html,
+	input,
+	mainInstance,
+	model,
+	t,
+	title,
+} from '@getodk/common/test/fixtures/xform-dsl/index.ts';
+import { assert, beforeEach, describe, expect, it } from 'vitest';
+import { InputNodeAnswer } from '../src/answer/InputNodeAnswer.ts';
+import { ModelValueNodeAnswer } from '../src/answer/ModelValueNodeAnswer.ts';
+import { Scenario } from '../src/jr/Scenario.ts';
+
+describe('Time bind type', () => {
+	const formTitle = 'Time bind types';
+	const relevancePath = '/root/relevance-trigger';
+	const relevanceExpression = `${relevancePath} = 'yes'`;
+
+	const formDefinition = html(
+		head(
+			title(formTitle),
+			model(
+				mainInstance(
+					t(
+						'root id="time-types"',
+						t('relevance-trigger', 'yes'),
+						t('model-only-time', '22:02:55.124'),
+						t('input-time', '14:02:10')
+					)
+				),
+				bind('/root/model-only-time').type('time').relevant(relevanceExpression),
+				bind('/root/input-time').type('time').relevant(relevanceExpression)
+			)
+		),
+		body(input(relevancePath), input('/root/input-time'))
+	);
+
+	let scenario: Scenario;
+	beforeEach(async () => {
+		scenario = await Scenario.init(formTitle, formDefinition);
+	});
+
+	describe('model-only values', () => {
+		const getModelAnswer = () => {
+			const answer = scenario.answerOf('/root/model-only-time');
+			assert(answer instanceof ModelValueNodeAnswer);
+			assert(answer.valueType === 'time');
+			return answer as ModelValueNodeAnswer<'time'>;
+		};
+
+		it('has correct static type', () => {
+			const answer = getModelAnswer();
+			expect(answer.value).toBeTypeOf('string');
+		});
+
+		it('has a time populated value', () => {
+			const answer = getModelAnswer();
+			expect(answer.value).to.equal('22:02:55.124');
+		});
+
+		it('has null as a blank value when not relevant', () => {
+			scenario.answer(relevancePath, 'no');
+			const answer = getModelAnswer();
+			expect(answer.value).toBeNull();
+		});
+	});
+
+	describe('inputs', () => {
+		const getInputAnswer = () => {
+			const answer = scenario.answerOf('/root/input-time');
+			assert(answer instanceof InputNodeAnswer);
+			assert(answer.valueType === 'time');
+			return answer as InputNodeAnswer<'time'>;
+		};
+
+		it('has correct static type', () => {
+			const answer = getInputAnswer();
+			expect(answer.value).toBeTypeOf('string');
+		});
+
+		it('has a time populated value', () => {
+			const answer = getInputAnswer();
+			expect(answer.value).to.equal('14:02:10');
+			expect(answer.stringValue).toEqual('14:02:10');
+		});
+
+		it('has null as a blank value when not relevant', () => {
+			scenario.answer(relevancePath, 'no');
+			const answer = getInputAnswer();
+			expect(answer.value).toBeNull();
+			expect(answer.stringValue).toBe('');
+		});
+
+		it.each([
+			'22:02:00.000+07:00',
+			'22:02:00+07:00',
+			'22:02:00.000-07:00',
+			'22:02:00-07:00',
+			'22:02:00.000Z',
+			'22:02:00Z',
+			'22:02:00.000',
+			'22:02:00',
+		])('sets value with valid time (%s)', (expression) => {
+			scenario.answer('/root/input-time', expression);
+			const answer = getInputAnswer();
+
+			expect(answer.value).to.deep.equal(expression);
+			expect(answer.stringValue).toEqual(expression);
+		});
+
+		it.each([
+			'25:02:00',
+			'24:00:00',
+			'22:60:00',
+			'22:02:61',
+			'22:02',
+			'22',
+			'22:02:00+25:00',
+			'22:02:00+invalid',
+			'22:02:00.Z', // Malformed decimal/Z combination
+			'noon',
+			'XX:YY:ZZ',
+			'2026-02-24T22:02:00',
+		])('has null when incorrect value %s is passed', (expression) => {
+			scenario.answer('/root/input-time', expression);
+			const answer = getInputAnswer();
+
+			expect(answer.value).toBeNull();
+			expect(answer.stringValue).toBe('');
+		});
+	});
+});
diff --git a/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
index 17987b82a..e5f88fb95 100644
--- a/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
+++ b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
@@ -1,4 +1,7 @@
-import { ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN } from '@getodk/common/constants/datetime.ts';
+import {
+	ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN,
+	VALID_OFFSET_VALUE,
+} from '@getodk/common/constants/datetime.ts';
 import { Temporal } from 'temporal-polyfill';
 import { type CodecDecoder, type CodecEncoder, ValueCodec } from './ValueCodec.ts';
 
@@ -13,11 +16,19 @@ export type TimeInputValue =
 	| null;
 
 const validateTimeString = (value: string): TimeRuntimeValue => {
-	if (value == null || !ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN.test(value)) {
+	const match = ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN.exec(value ?? '');
+	if (!match?.length) {
 		return null;
 	}
 
-	return value;
+	try {
+		const [, timeOnly = '', offset] = match;
+		// Delegate bounds checking to Temporal
+		Temporal.PlainTime.from(timeOnly);
+		return offset && !VALID_OFFSET_VALUE.test(offset) ? null : value;
+	} catch {
+		return null;
+	}
 };
 
 const parseZonedDateTimeToString = (value: Temporal.ZonedDateTime): string => {

From 5543ee6720f36277f08c25e0bc98811dd07d88e3 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 25 Feb 2026 00:54:02 +0700
Subject: [PATCH 05/12] css

---
 packages/web-forms/src/assets/styles/inputs.scss           | 6 ++++++
 .../src/components/form-elements/input/InputDate.vue       | 5 -----
 .../src/components/form-elements/input/InputTime.vue       | 7 -------
 3 files changed, 6 insertions(+), 12 deletions(-)
 create mode 100644 packages/web-forms/src/assets/styles/inputs.scss

diff --git a/packages/web-forms/src/assets/styles/inputs.scss b/packages/web-forms/src/assets/styles/inputs.scss
new file mode 100644
index 000000000..47b3a3021
--- /dev/null
+++ b/packages/web-forms/src/assets/styles/inputs.scss
@@ -0,0 +1,6 @@
+.odk-form {
+	.p-datepicker-input:disabled,
+	.p-datepicker-input:disabled + .p-datepicker-input-icon-container {
+		cursor: not-allowed;
+	}
+}
diff --git a/packages/web-forms/src/components/form-elements/input/InputDate.vue b/packages/web-forms/src/components/form-elements/input/InputDate.vue
index ceb4ea3b1..e2ab19162 100644
--- a/packages/web-forms/src/components/form-elements/input/InputDate.vue
+++ b/packages/web-forms/src/components/form-elements/input/InputDate.vue
@@ -41,11 +41,6 @@ const isDisabled = computed(() => props.question.currentState.readonly === true)
 	font-size: var(--odk-hint-font-size);
 }
 
-.p-datepicker-input:disabled,
-.p-datepicker-input:disabled + .p-datepicker-input-icon-container {
-	cursor: not-allowed;
-}
-
 .p-datepicker .p-datepicker-input-icon-container {
 	top: 19px;
 
diff --git a/packages/web-forms/src/components/form-elements/input/InputTime.vue b/packages/web-forms/src/components/form-elements/input/InputTime.vue
index 7772ddfc1..dcf497836 100644
--- a/packages/web-forms/src/components/form-elements/input/InputTime.vue
+++ b/packages/web-forms/src/components/form-elements/input/InputTime.vue
@@ -34,10 +34,3 @@ const value = computed({
 <template>
 	<DatePicker v-model="value" time-only hour-format="12" :disabled="isDisabled" />
 </template>
-
-<style lang="scss">
-.p-datepicker-input:disabled,
-.p-datepicker-input:disabled + .p-datepicker-input-icon-container {
-	cursor: not-allowed;
-}
-</style>

From 0a6829a9d939125445783d847aef455401ef5f46 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 25 Feb 2026 01:02:01 +0700
Subject: [PATCH 06/12] changeset

---
 .changeset/empty-views-stop.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/empty-views-stop.md

diff --git a/.changeset/empty-views-stop.md b/.changeset/empty-views-stop.md
new file mode 100644
index 000000000..520bc5339
--- /dev/null
+++ b/.changeset/empty-views-stop.md
@@ -0,0 +1,8 @@
+---
+'@getodk/xforms-engine': minor
+'@getodk/web-forms': minor
+'@getodk/scenario': patch
+'@getodk/common': patch
+---
+
+Adds time question type

From 28f8b560b29f3948839640c5580061be9fb3f5df Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 25 Feb 2026 02:21:55 +0700
Subject: [PATCH 07/12] match enketo and collect edit/create behavior

---
 .../src/components/form-elements/input/InputTime.vue         | 5 +++++
 packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts      | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/form-elements/input/InputTime.vue b/packages/web-forms/src/components/form-elements/input/InputTime.vue
index dcf497836..1a9c44ba6 100644
--- a/packages/web-forms/src/components/form-elements/input/InputTime.vue
+++ b/packages/web-forms/src/components/form-elements/input/InputTime.vue
@@ -26,6 +26,11 @@ const value = computed({
 		return new Date(`${yyyy}-${mm}-${dd}T${temporalValue}`);
 	},
 	set: (newTime) => {
+		// Clear seconds and milliseconds to match Collect and Enketo behavior (a client's responsibility).
+		if (newTime) {
+			newTime.setMilliseconds(0);
+			newTime.setSeconds(0);
+		}
 		props.question.setValue(newTime);
 	},
 });
diff --git a/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
index e5f88fb95..03e1d7e26 100644
--- a/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
+++ b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
@@ -35,7 +35,8 @@ const parseZonedDateTimeToString = (value: Temporal.ZonedDateTime): string => {
 	if (!value) {
 		return '';
 	}
-	const time = value.toPlainTime().toString();
+	const MILLISECONDS = 3;
+	const time = value.toPlainTime().toString({ fractionalSecondDigits: MILLISECONDS });
 	const offset = value.offset;
 	return `${time}${offset === '+00:00' ? 'Z' : offset}`;
 };

From 0d3d7f660d8fdf00141ecb3579015f542d5d11b1 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 25 Feb 2026 10:10:33 +0000
Subject: [PATCH 08/12] Feedback in codec

---
 packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
index 03e1d7e26..9189f2f4c 100644
--- a/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
+++ b/packages/xforms-engine/src/lib/codecs/TimeValueCodec.ts
@@ -21,24 +21,25 @@ const validateTimeString = (value: string): TimeRuntimeValue => {
 		return null;
 	}
 
+	const [, timeOnly = '', offset] = match;
 	try {
-		const [, timeOnly = '', offset] = match;
 		// Delegate bounds checking to Temporal
 		Temporal.PlainTime.from(timeOnly);
-		return offset && !VALID_OFFSET_VALUE.test(offset) ? null : value;
 	} catch {
 		return null;
 	}
+
+	return offset && !VALID_OFFSET_VALUE.test(offset) ? null : value;
 };
 
 const parseZonedDateTimeToString = (value: Temporal.ZonedDateTime): string => {
 	if (!value) {
 		return '';
 	}
+
 	const MILLISECONDS = 3;
 	const time = value.toPlainTime().toString({ fractionalSecondDigits: MILLISECONDS });
-	const offset = value.offset;
-	return `${time}${offset === '+00:00' ? 'Z' : offset}`;
+	return `${time}${value.offset}`;
 };
 
 /**

From 1d0c0b35a9b30749808f97c85ed602f1bb5e06d1 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 25 Feb 2026 18:29:41 +0700
Subject: [PATCH 09/12] Add icon to time component

---
 packages/web-forms/src/assets/styles/inputs.scss |  6 ------
 .../web-forms/src/assets/styles/primevue.scss    | 15 +++++++++++++++
 packages/web-forms/src/assets/styles/style.scss  |  1 +
 packages/web-forms/src/components/OdkWebForm.vue |  1 +
 .../web-forms/src/components/common/IconSVG.vue  | 16 +++++++++++++++-
 .../components/common/map/MapConfirmDialog.vue   |  5 -----
 .../components/form-elements/input/InputTime.vue |  7 ++++++-
 7 files changed, 38 insertions(+), 13 deletions(-)
 delete mode 100644 packages/web-forms/src/assets/styles/inputs.scss
 create mode 100644 packages/web-forms/src/assets/styles/primevue.scss

diff --git a/packages/web-forms/src/assets/styles/inputs.scss b/packages/web-forms/src/assets/styles/inputs.scss
deleted file mode 100644
index 47b3a3021..000000000
--- a/packages/web-forms/src/assets/styles/inputs.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.odk-form {
-	.p-datepicker-input:disabled,
-	.p-datepicker-input:disabled + .p-datepicker-input-icon-container {
-		cursor: not-allowed;
-	}
-}
diff --git a/packages/web-forms/src/assets/styles/primevue.scss b/packages/web-forms/src/assets/styles/primevue.scss
new file mode 100644
index 000000000..1a5a75faa
--- /dev/null
+++ b/packages/web-forms/src/assets/styles/primevue.scss
@@ -0,0 +1,15 @@
+.odk-form {
+	.p-datepicker-input:disabled,
+	.p-datepicker-input:disabled + .p-datepicker-input-icon-container {
+		cursor: not-allowed;
+	}
+}
+
+// Modals and dropdowns are outside the .odk-form class scope.
+.p-datepicker-panel,
+.p-dialog {
+	.p-button.p-button-secondary:focus-visible {
+		outline: none;
+		outline-offset: unset;
+	}
+}
diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss
index 4fdd05862..a7408e8ae 100644
--- a/packages/web-forms/src/assets/styles/style.scss
+++ b/packages/web-forms/src/assets/styles/style.scss
@@ -40,6 +40,7 @@
 	--odk-text-color: var(--p-surface-900);
 	--odk-inverted-text-color: var(--p-surface-0);
 	--odk-muted-text-color: var(--p-surface-500);
+	--odk-light-muted-text-color: var(--p-surface-400);
 
 	--odk-base-background-color: var(--p-surface-0);
 	--odk-light-background-color: var(--p-surface-50);
diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index debd1f4b8..d690fd64f 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -526,6 +526,7 @@ onUnmounted(() => {
 
 <style lang="scss">
 @use 'primeflex/core/_variables.scss' as pf;
+@use '../assets/styles/primevue';
 
 :root {
 	// This variable is used to assert the breakpoint from PrimeFlex are loaded
diff --git a/packages/web-forms/src/components/common/IconSVG.vue b/packages/web-forms/src/components/common/IconSVG.vue
index 21809fed0..930d445cc 100644
--- a/packages/web-forms/src/components/common/IconSVG.vue
+++ b/packages/web-forms/src/components/common/IconSVG.vue
@@ -12,6 +12,7 @@ import {
 	mdiCheckCircle,
 	mdiChevronDown,
 	mdiChevronUp,
+	mdiClockTimeThreeOutline,
 	mdiClose,
 	mdiCogOutline,
 	mdiContentSave,
@@ -52,6 +53,7 @@ const iconMap: Record<string, string> = {
 	mdiCheckCircle,
 	mdiChevronDown,
 	mdiChevronUp,
+	mdiClockTimeThreeOutline,
 	mdiClose,
 	mdiCogOutline,
 	mdiContentSave,
@@ -80,7 +82,15 @@ const iconMap: Record<string, string> = {
 };
 
 type IconName = keyof typeof iconMap;
-type IconVariant = 'base' | 'error' | 'inverted' | 'muted' | 'primary' | 'success' | 'warning';
+type IconVariant =
+	| 'base'
+	| 'error'
+	| 'inverted'
+	| 'light-muted'
+	| 'muted'
+	| 'primary'
+	| 'success'
+	| 'warning';
 type IconSize = 'md' | 'sm';
 
 /**
@@ -131,6 +141,10 @@ const iconSize = computed(() => props.size ?? 'md');
 	fill: var(--odk-inverted-text-color);
 }
 
+.odk-icon.light-muted path {
+	fill: var(--odk-light-muted-text-color);
+}
+
 .odk-icon.muted path {
 	fill: var(--odk-muted-text-color);
 }
diff --git a/packages/web-forms/src/components/common/map/MapConfirmDialog.vue b/packages/web-forms/src/components/common/map/MapConfirmDialog.vue
index 153075896..fe5631b9a 100644
--- a/packages/web-forms/src/components/common/map/MapConfirmDialog.vue
+++ b/packages/web-forms/src/components/common/map/MapConfirmDialog.vue
@@ -61,10 +61,5 @@ const emit = defineEmits(['update:visible', 'deleteFeature']);
 	.p-dialog-footer button {
 		font-size: var(--odk-base-font-size);
 	}
-
-	button.p-button-secondary:focus-visible {
-		outline: none;
-		outline-offset: unset;
-	}
 }
 </style>
diff --git a/packages/web-forms/src/components/form-elements/input/InputTime.vue b/packages/web-forms/src/components/form-elements/input/InputTime.vue
index 1a9c44ba6..c7a9def0d 100644
--- a/packages/web-forms/src/components/form-elements/input/InputTime.vue
+++ b/packages/web-forms/src/components/form-elements/input/InputTime.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import IconSVG from '@/components/common/IconSVG.vue';
 import { ISO_TIME_WITH_OPTIONAL_OFFSET_PATTERN } from '@getodk/common/constants/datetime.ts';
 import type { TimeInputNode } from '@getodk/xforms-engine';
 import DatePicker from 'primevue/datepicker';
@@ -37,5 +38,9 @@ const value = computed({
 </script>
 
 <template>
-	<DatePicker v-model="value" time-only hour-format="12" :disabled="isDisabled" />
+	<DatePicker v-model="value" time-only hour-format="12" :disabled="isDisabled" show-icon icon-display="input">
+		<template #inputicon="slotProps">
+			<IconSVG name="mdiClockTimeThreeOutline" variant="light-muted" @click="slotProps.clickCallback"/>
+		</template>
+	</DatePicker>
 </template>

From 9554face99639585e80d4226b485a6dce7f22b75 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 25 Feb 2026 18:38:57 +0700
Subject: [PATCH 10/12] lint

---
 .../web-forms/src/components/form-elements/input/InputTime.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/form-elements/input/InputTime.vue b/packages/web-forms/src/components/form-elements/input/InputTime.vue
index c7a9def0d..207bd1b7b 100644
--- a/packages/web-forms/src/components/form-elements/input/InputTime.vue
+++ b/packages/web-forms/src/components/form-elements/input/InputTime.vue
@@ -40,7 +40,7 @@ const value = computed({
 <template>
 	<DatePicker v-model="value" time-only hour-format="12" :disabled="isDisabled" show-icon icon-display="input">
 		<template #inputicon="slotProps">
-			<IconSVG name="mdiClockTimeThreeOutline" variant="light-muted" @click="slotProps.clickCallback"/>
+			<IconSVG name="mdiClockTimeThreeOutline" variant="light-muted" @click="slotProps.clickCallback" />
 		</template>
 	</DatePicker>
 </template>

From dc74aaec1178907032e1d2e5d656b9dd1c43e9b5 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:11:26 +0700
Subject: [PATCH 11/12] updates feature matrix

---
 README.md           | 4 ++--
 feature-matrix.json | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index dd3d3ae8b..5bae9eb18 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ This section is auto generated. Please update `feature-matrix.json` and then run
   <summary>
 
 <!-- prettier-ignore -->
-  ##### Question types (basic functionality)<br/>🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜ 82\%
+  ##### Question types (basic functionality)<br/>🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜ 85\%
 
   </summary>
   <br/>
@@ -63,7 +63,7 @@ This section is auto generated. Please update `feature-matrix.json` and then run
 | video                                                  |    ✅    |
 | [file](https://github.com/getodk/web-forms/issues/370) |          |
 | date                                                   |    ✅    |
-| time                                                   |          |
+| time                                                   |    ✅    |
 | datetime                                               |          |
 | rank                                                   |    ✅    |
 | csv-external                                           |    ✅    |
diff --git a/feature-matrix.json b/feature-matrix.json
index adc6dcacc..5fccb770d 100644
--- a/feature-matrix.json
+++ b/feature-matrix.json
@@ -21,7 +21,7 @@
     "video": "✅",
     "[file](https://github.com/getodk/web-forms/issues/370)": "",
     "date": "✅",
-    "time": "",
+    "time": "✅",
     "datetime": "",
     "rank": "✅",
     "csv-external": "✅",

From 4c532aff469764a64ad17cec91caa759b0fad42e Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:25:06 +0700
Subject: [PATCH 12/12] kick CI

---
 packages/common/src/fixtures/date-and-time/date-and-time.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/common/src/fixtures/date-and-time/date-and-time.xml b/packages/common/src/fixtures/date-and-time/date-and-time.xml
index 944a952dd..aa9509975 100644
--- a/packages/common/src/fixtures/date-and-time/date-and-time.xml
+++ b/packages/common/src/fixtures/date-and-time/date-and-time.xml
@@ -49,7 +49,7 @@
             <date_of_birth/>
             <fruits_date/>
             <vegetables_date/>
-            <time>22:02:10.562+06:00</time>
+            <time>22:02:10.562+07:00</time>
           </dates>
           <meta>
             <instanceID/>