Date Input

Overview

DateInput is a single low-level segmented editor: day, month and year as individually focusable spinbutton segments, ordered and separated per Culture, edited entirely in C# with no popup. It owns a DateOnly? value, controlled via @bind-Value or uncontrolled via DefaultValue. Granularity trims which units are edited; when nested under a NaviusField it adopts the field’s control id and reports filled/dirty/touched/valid state.

Anatomy

@using Navius.Primitives.Components.DateInput

<NaviusDateInput />

Root

The segmented date 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	DateOnly?	-	Controlled value. Pair with ValueChanged (@bind-Value).
ValueChanged	EventCallback<DateOnly?>	-	Fires when the controlled Value should change.
DefaultValue	DateOnly?	-	Uncontrolled initial value.
Granularity	string	"day"	Which units the field edits: day (y/m/d), month (y/m) or year.
MinValue	DateOnly?	-	Minimum accepted value. Out-of-range surfaces as data-invalid without snapping the value.
MaxValue	DateOnly?	-	Maximum accepted value. Out-of-range surfaces as data-invalid without snapping the value.
PlaceholderValue	DateOnly?	today	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 month/day (and year to 4 digits) with leading zeros.
Culture	CultureInfo?	current culture	Drives segment order and separators.
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 yyyy-MM-dd.
ChildContent	RenderFragment?	-	Optional trailing content, such as a decorative calendar glyph.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered div.

Data attributes

Part	Attribute	Description
Root	data-navius-date-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-date-input-segment	Present on each editable segment span.
Root	data-segment	"year" | "month" | "day" 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 by one, wrapping at the segment’s min/max.
Page Up / Page Down	Steps by a larger amount (5 years, 3 months, 7 days).
Home / End	Jumps the focused segment to its minimum / maximum.
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 group wires role="group", aria-invalid when out of range or forced invalid, and, when nested under a Field, aria-labelledby pointing at the Field’s label id and aria-describedby pointing at the field’s description. Left/Right segment navigation mirrors under rtl. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.