TimeField

Overview

A segment-based time input built on Reka UI's TimeFieldRoot. Users tab through individual hour, minute, and optional second segments. Supports 12-hour and 24-hour formats via the hourCycle prop.

Theme entry: TimeField

Props

Name	Type	Required	Default	Description
themeOverride	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
class	import('vue').HTMLAttributes['class']		undefined	Additional CSS classes to apply to the root element.
modelValue	object		undefined	The controlled time value. Can be bound as v-model.
defaultValue	object		undefined	The default value when uncontrolled.
placeholder	object		undefined	The placeholder time used to determine initial display when no value is set.
defaultPlaceholder	object		undefined	The default placeholder time.
granularity	string		undefined	The granularity of the time field ("hour", "minute", or "second").
hourCycle	number		undefined	The hour cycle for time formatting (12 or 24).
step	object		undefined	The stepping interval for the time segments.
stepSnapping	boolean		undefined	Whether to enforce snapping the value to the nearest step increment.
hideTimeZone	boolean		undefined	Whether to hide the time zone segment.
maxValue	object		undefined	The maximum selectable time.
minValue	object		undefined	The minimum selectable time.
locale	string		undefined	The locale used for formatting times.
disabled	boolean		undefined	When true, prevents interaction with the time field.
readonly	boolean		undefined	When true, the field is read-only.
id	string		undefined	The id of the underlying element.
name	string		undefined	The name submitted with form data.
required	boolean		false	When true, the field is required.
size	string		"default"	Size variant of the segment field shell.
as	string|object		undefined	The element or component to render as.
asChild	boolean		false	When true, merges props onto the child element instead of rendering a wrapper.

Slots

default

Scoped slot.

Events

Name	Description
update:modelValue	Emitted when the value changes.
update:placeholder	Emitted when the placeholder date changes.

Full event reference

Source

client/lib/controls/time-field/TimeField.vue