Date Input

<NaviusDateInput @bind-Value="_date" Granularity="day"
                class="inline-flex items-center rounded-md border px-3 py-2
                       [&_[data-segment]:focus]:bg-primary
                       [&_[data-segment]:focus]:text-primary-foreground
                       [&_[data-placeholder]]:text-muted-foreground" />

@code { private DateOnly? _date = new(2026, 7, 4); }

Features

• Each unit is an APG role="spinbutton" segment; segment order and separators follow the culture's short-date pattern (Culture).
• Arrows step (and wrap), digits type and auto-advance to the next segment, Backspace clears; all value logic runs in C#, no popup.
• Owns a DateOnly?. Controlled via @bind-Value, uncontrolled via DefaultValue.
• Granularity trims to day / month / year; MinValue / MaxValue surface as data-invalid without snapping the value.
• Field-aware: adopts a NaviusField's control id and reports filled / dirty / touched / valid. A hidden input submits ISO yyyy-MM-dd under Name.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add date-input

Anatomy

A single element. The segments are rendered internally from the culture and granularity.

@using Navius.Primitives.Components.DateInput

<NaviusDateInput @bind-Value="_date" />

API Reference

NaviusDateInput

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.

Data attributes

Each editable segment renders a <span role="spinbutton"> carrying data-navius-date-input-segment, data-segment ("year" | "month" | "day") and data-placeholder while empty; the separators carry data-segment="literal". Style off these hooks.

Accessibility

Each segment is an APG spinbutton with aria-valuenow / aria-valuemin / aria-valuemax / aria-valuetext; the group carries aria-invalid and, under a Field, aria-describedby. Left / Right navigation mirrors under rtl.

Keyboard interactions