Time Input
Keyboard-driven segmented time field with optional clock picker. Each time part (hour, minute, optional second, AM/PM) is individually focusable and editable.
Default (24-hour)
A basic 24-hour time input with clock picker button.
Value: None
12-Hour Format
AM/PM segment appended for 12-hour clock.
Value: None
With Seconds
Optional seconds segment for full HH:MM:SS display.
Value: None
Minute Step
Constrains minute selection to 15-minute intervals in the picker and ArrowUp/Down.
Value: None
Without Picker Button
Keyboard-only input, no clock popover.
Value: None
Disabled State
Input is non-interactive when disabled.
Placeholder
Shows placeholder text when the value is empty and the input is not focused. Clicking the placeholder or tabbing in reveals the segments.
Value: None
Validation
Integrated with Blazor EditForm and DataAnnotations.
Keyboard Support
All keyboard interactions supported by the time input.
| Key | Behavior |
|---|---|
| ↑ | Increments the focused segment. If any segment is empty, all unset segments are first filled from the current time, then the focused segment is incremented. For AM/PM on an empty field, the first press seeds from now without toggling. |
| ↓ | Decrements the focused segment with the same auto-fill behavior. Wraps at boundary (e.g. 59 min → 0 min). |
| ← | Moves focus to the previous segment. |
| → | Moves focus to the next segment. |
| 0–9 | Types a digit into the active segment. Auto-advances to the next segment when filled. |
| A / a | Sets AM on the AM/PM segment (12-hour mode only). |
| P / p | Sets PM on the AM/PM segment (12-hour mode only). |
| C | Sets all segments to the current time. Does not fire when combined with Ctrl or ⌘. If MinuteStep > 1, the minute is floored to the nearest step. |
| Backspace / Del | Clears the active segment value. |
| Tab / Shift+Tab | Navigates between segments using native browser focus. |
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | TimeOnly? | null | The selected time. Supports two-way binding via @bind-Value. |
| ValueChanged | EventCallback<TimeOnly?> | — | Invoked when the value changes. |
| Culture | CultureInfo? | CurrentCulture | Culture for localization. |
| Use12Hour | bool? | from culture | When true, shows AM/PM segment. Defaults to culture's AM designator presence. |
| ShowSeconds | bool | false | Shows the seconds segment when true. |
| MinuteStep | int | 1 | Minute increment step for picker and ArrowUp/Down. |
| Disabled | bool | false | When true, the input is non-interactive. |
| Required | bool | false | Marks the input as required. |
| ShowPickerButton | bool | true | Shows or hides the clock picker button. |
| Id | string? | null | HTML id attribute for the container. |
| Name | string? | null | Name for the hidden form input. |
| Class | string? | null | Additional CSS classes for the container. |
| AriaLabel | string? | "Time" | ARIA label for the group container. |
| AriaDescribedBy | string? | null | ARIA describedby for the group container. |
| AriaInvalid | bool? | null | When true, applies destructive border styling. |
| Placeholder | string? | null | Text shown when the value is empty and the input is not focused. |