TimeInput
v1.0.3Updated 20 Jul 2026Keyboard-first 24-hour `HH:MM` time field with real range constraints — hours cap at 23 and minutes at 59, so `87:95` can never be typed. `autofix: 'pad'` pads a leading `9` to `09` instead of rejecting the keystroke. Use it when typing a time is faster than spinning a clock; reach for TimePicker or TimeClock for a picker UI.
Preview
Live · 6 stories▸Why this is recommendedformmaskinputtime+6
TimeInput — twenty four hour time.
- ✓Typing a time without opening a picker
- ✓Opening and closing hours entry
- ✓Appointment or booking time fields
- ✓Shift start/end times on a scheduling form
- ✓Fast keyboard time entry on data-heavy admin forms
- `HH:MM` mask with MaskedRange hours 0-23 and minutes 0-59
- autofix 'pad' turns a leading 9 into 09 rather than rejecting it
- inputMode="numeric" for a mobile number pad
- Monospace tabular-nums so digits do not jitter while typing
- No picker dependency — far lighter than TimePicker
- Sanitised masked value via onAccept
- i18n: 12/24-hour cycle follows the app LocaleProvider locale via Intl — 12-hour locales get a locale-positioned AM/PM enum block (base "en" keeps 24-hour HH:MM)
- ✕Choosing a time from a dropdown or clock face (use TimePicker or TimeClock)
- ✕12-hour AM/PM entry (use TimePicker)
- ✕Date + time together (use DateTimePicker)
- ✕Duration entry rather than a time of day
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
valueCurrent masked time, e.g. '16:30'
—onAcceptFires whenever the masked value changes
—onCompleteFires when the full time is entered
—aria-invalidRenders the destructive border and ring
—disabledDisables the field; the value stays masked
—