Time Input

<NaviusTimeInput @bind-Value="_time" HourCycle="12"
                class="inline-flex items-center rounded-md border px-3 py-2
                       [&_[data-segment]:focus]:bg-primary
                       [&_[data-segment]:focus]:text-primary-foreground" />

@code { private TimeOnly? _time = new(9, 30); }

Features

• Shares the segment engine of Date Input: each unit is a role="spinbutton", edited from the keyboard.
• HourCycle picks 12 or 24 (defaults from the culture); the day-period segment toggles on arrows and on the a / p keys.
• Granularity adds or drops the seconds column; MinuteStep / SecondStep size the arrow step.
• Owns a TimeOnly?. Controlled via @bind-Value, uncontrolled via DefaultValue; a hidden input submits ISO HH:mm[:ss] under Name.

Installation

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

navius add time-input

Anatomy

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

@using Navius.Primitives.Components.TimeInput

<NaviusTimeInput @bind-Value="_time" Granularity="minute" />

API Reference

NaviusTimeInput

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.

Data attributes

Each editable segment renders a <span role="spinbutton"> carrying data-navius-time-input-segment, data-segment ("hour" | "minute" | "second" | "dayPeriod") and data-placeholder while empty; the separators carry data-segment="literal".

Accessibility

Each segment is an APG spinbutton. The day-period segment exposes aria-valuetext (AM / PM) rather than a numeric range. The group carries aria-invalid and, under a Field, aria-describedby.

Keyboard interactions