Time Input

Overview

TimeInput renders NaviusTimeInput, the headless primitive that owns segment parsing and spinbutton navigation, and layers a bordered, focus-within field row on top: hh : mm [: ss] [AM/PM] spinbutton segments plus a trailing clock icon (mirrors ZitsDateInput’s composition). The wrapper owns its own controlled/uncontrolled value mirror, so @bind-Value and DefaultValue both work through it.

Install

navius add time-input --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

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

@code {
    private TimeOnly? _time;
}

Parts and props

TimeInput is a single control with no part tree. Granularity, HourCycle, MinuteStep, SecondStep, MinValue, MaxValue, PlaceholderValue, Disabled, ReadOnly, Required, Invalid, ForceLeadingZeros, Culture, Dir, Name, and Attributes pass through to NaviusTimeInput unchanged. The styled wrapper adds:

Prop	Type	Default	Description
`Value`	`TimeOnly?`	`null`	Controlled value. Bind with `@bind-Value`.
`DefaultValue`	`TimeOnly?`	`null`	Uncontrolled initial value.
`ChildContent`	`RenderFragment?`	`null`	Overrides the default trailing clock glyph.

Styling surface

Attributes on ZitsTimeInput is merged with the field-row class set via Cn.Merge, with the caller’s classes applied last.

Parameter	Values
`Granularity`	`"minute"` (default), see the primitive manifest for the full set

Data attribute hooks

Part	Attribute	Description
Root	`data-disabled`	Present when `Disabled` is true, emitted by `NaviusTimeInput`.
Root	`data-invalid`	Present when `Invalid` is true, emitted by `NaviusTimeInput`.
Segment	`data-placeholder`	Present on an empty segment, emitted by `NaviusTimeInput`.
Segment	`data-segment="literal"`	Marks a non-editable separator glyph (e.g. `:`), emitted by `NaviusTimeInput`.

Underlying primitives

NaviusTimeInput