Time Input

Overview

TimeInput is a single low-level segmented editor sharing the segment machinery of Date Input: hour, minute and optional second as individually focusable spinbutton segments, plus a day-period (AM/PM) segment in 12-hour mode. It owns a TimeOnly? value, controlled via @bind-Value or uncontrolled via DefaultValue. HourCycle picks 12 or 24 (defaulting from the culture); Granularity adds or drops the seconds column.

Anatomy

@using Navius.Primitives.Components.TimeInput

<NaviusTimeInput />

Root

The segmented time field. Renders a div with role="group" holding the auto-generated segments and a hidden bubble input. Value is two-way bindable.

Prop	Type	Default	Description
Value	TimeOnly?	-	Controlled value. Pair with ValueChanged (@bind-Value).
ValueChanged	EventCallback<TimeOnly?>	-	Fires when the controlled Value should change.
DefaultValue	TimeOnly?	-	Uncontrolled initial value.
Granularity	string	"minute"	Smallest edited unit: hour, minute, or second.
HourCycle	int?	culture default	12 or 24. Defaults to the culture’s short-time pattern.
MinuteStep	int	1	Arrow-key step size for the minute segment.
SecondStep	int	1	Arrow-key step size for the second segment.
MinValue	TimeOnly?	-	Minimum accepted value. Out-of-range surfaces as data-invalid without snapping the value.
MaxValue	TimeOnly?	-	Maximum accepted value. Out-of-range surfaces as data-invalid without snapping the value.
PlaceholderValue	TimeOnly?	now	Seeds which value an empty segment jumps to on the first arrow key.
Disabled	bool	false	Disables every segment.
ReadOnly	bool	false	Prevents value changes while keeping segments focusable.
Required	bool	false	Marks the hidden bubble input required for native form validation.
Invalid	bool	false	Forces the field invalid regardless of native validity.
ForceLeadingZeros	bool	false	Pads segments with leading zeros.
Culture	CultureInfo?	current culture	Drives segment order, separators, and the default hour cycle.
Dir	string?	-	Reading direction, "ltr" or "rtl". Falls back to the cascaded direction, then "ltr".
Name	string?	-	Form field name for the hidden bubble input, which submits ISO HH:mm[:ss].
ChildContent	RenderFragment?	-	Optional trailing content.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered div.

Data attributes

Part	Attribute	Description
Root	data-navius-time-input	Present on the group.
Root	data-disabled	Present when disabled.
Root	data-readonly	Present when read-only.
Root	data-invalid	Present when invalid or out of range.
Root	data-filled	Present when any segment holds a value.
Root	data-dirty	Present after the first edit.
Root	data-focused	Present while a segment has focus.
Root	data-touched	Present after focus has left the group.
Root	data-navius-time-input-segment	Present on each editable segment span.
Root	data-segment	"hour" | "minute" | "second" | "dayPeriod" on an editable segment, or "literal" on a separator.
Root	data-placeholder	Present on an editable segment while it holds no value.

Keyboard interactions

Key	Behavior
Arrow Up / Arrow Down	Steps the focused segment, wrapping at its min/max; toggles AM/PM on the day-period segment.
Page Up / Page Down	Steps by a larger amount (2 hours, 15 minutes / seconds).
Home / End	Jumps the focused numeric segment to its minimum / maximum.
a / p	On the day-period segment, sets AM / PM directly.
0-9	Types into the focused segment and auto-advances once it can hold no more digits.
Backspace / Delete	Clears the focused segment.
Arrow Left / Arrow Right	Moves between segments, mirrored under rtl.

ARIA mechanism

Each segment wires the spinbutton WAI-ARIA APG pattern: role="spinbutton" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext. The day-period segment exposes aria-valuetext (AM / PM) rather than a numeric range. The group wires role="group", aria-invalid when out of range or forced invalid, and, when nested under a Field, aria-describedby pointing at the field’s description. When nested under a Field with a mounted Label, the group also wires aria-labelledby to the Field’s label id, since a role="group" div is not a target a native label’s for can reach. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.