/// Inputs
TimeInput
Segmented HH:MM(:SS) field where each part is an ARIA spinbutton — arrow keys step it and typed digits auto-advance.
import { TimeInput } from "@protocore/pds";Basics
Each segment is a spinbutton: focus one and press Up/Down to step it, or type digits (they auto-advance to the next segment). Controllable via value / defaultValue / onValueChange with a TimeValue of 24-hour fields.
12-hour and seconds
Set hour12 to add an AM/PM segment (type a / p to toggle it), and withSeconds to expose a seconds segment. The emitted TimeValue is always 24-hour regardless of display.
When to use it
Use TimeInput when a time is known and typed — a meeting start, a cron hour. It is keyboard-first and screen-reader-friendly. When browsing rounded slots is easier, wrap it in TimePicker for a scrollable column overlay; to pick a date and time together use DateTimePicker.
Usage
Do
- Give the field an accessible name via a `Field` label or `aria-label`.
- Read the 24-hour `TimeValue` from `onValueChange` — it fires only when every required segment is filled.
- Set `hour12` to match the surrounding locale's convention.
- Use `withSeconds` only when second-level precision is meaningful.
Don't
- Don't parse the displayed string — the `TimeValue` is the source of truth.
- Don't leave the group unlabelled when no visible field label wraps it.
- Don't reach for it to pick a fuzzy time of day — offer TimePicker's columns instead.
- Don't assume a value exists mid-edit; `onValueChange` passes `null` until complete.
Accessibility
| Keys | Action |
|---|---|
| Arrow Up / Down | Step the focused segment (wraps at its bounds). |
| Arrow Left / Right | Move between segments. |
| 0–9 | Type into the focused segment; auto-advances when full. |
| a / p | Set AM / PM on the period segment (12-hour mode). |
| Backspace / Delete | Clear the focused segment. |
| Home / End | Jump to the first / last segment. |
- The field is a `role="group"`; each segment is a `role="spinbutton"` with `aria-valuenow`, `aria-valuemin/max`, and an `aria-valuetext`.
- `invalid` sets `aria-invalid` on the group and paints a danger border.
- Segments never trap a text caret — they respond to arrows and digits, mirroring native time fields.