Time Picker

<NaviusTimePicker @bind-Value="_time" HourCycle="12">
    <div class="inline-flex items-center gap-1 rounded-md border px-3 py-2">
        <NaviusTimePickerInput />
        <NaviusTimePickerTrigger aria-label="Open time picker"><ClockIcon /></NaviusTimePickerTrigger>
    </div>
    <NaviusTimePickerContent class="z-50 flex gap-1 rounded-md border bg-popover p-1 shadow-md">
        <NaviusTimePickerColumn Unit="hour" />
        <NaviusTimePickerColumn Unit="minute" />
        <NaviusTimePickerColumn Unit="dayPeriod" />
    </NaviusTimePickerContent>
</NaviusTimePicker>

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

Features

• Wraps an embedded Time Input for keyboard entry (which works whether or not the popup is open) plus a listbox column per unit.
• Reuses the Popover engine for anchoring and the dismissable layer; the root owns a single open state.
• Each column auto-generates its options for its unit, roves with a single tabindex, and commits the chosen unit while preserving the others.
• Owns a TimeOnly? and an open flag: controlled via @bind-Value / @bind-Open, uncontrolled via DefaultValue / DefaultOpen.

Installation

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

navius add time-picker

Anatomy

Import the parts and assemble them. The root renders no DOM of its own; it cascades state through the wrapped popover.

@using Navius.Primitives.Components.TimePicker

<NaviusTimePicker>
    <NaviusTimePickerInput />
    <NaviusTimePickerTrigger />
    <NaviusTimePickerContent>
        <NaviusTimePickerColumn Unit="hour" />
        <NaviusTimePickerColumn Unit="minute" />
        <NaviusTimePickerColumn Unit="dayPeriod" />
    </NaviusTimePickerContent>
</NaviusTimePicker>

API Reference

Root

NaviusTimePicker. Owns the value and open state and cascades them to the input, trigger and columns. Renders no DOM (wraps a Popover). Value and Open are two-way bindable.

Input

NaviusTimePickerInput. The typed, segmented surface: an embedded Time Input bound to the picker's value. Keyboard entry here works with the popup closed. Renders the Time Input group.

Data attributes

Trigger

NaviusTimePickerTrigger. The clock button that toggles the popup. Delegates to the Popover trigger (aria-haspopup=dialog, aria-expanded, aria-controls). Renders a button.

Data attributes

Content

NaviusTimePickerContent. Portals and anchors the popup (Popover Portal > Positioner > Popup) and hosts the columns. The Popup is role=dialog. Renders the popover popup.

Data attributes

Column

NaviusTimePickerColumn. One scrollable listbox for a single unit; it auto-generates its options and commits through the shared context. Renders a div with role=listbox.

Data attributes

Accessibility

The trigger carries aria-haspopup="dialog" and aria-expanded; the popup is role="dialog". Each column is a role="listbox" of role="option" buttons with a roving tabindex. The segmented input keeps its own spinbutton semantics (see Time Input).

Keyboard interactions (columns)