Time Field

A time typed in parts, with the hour, minute, second and AM or PM each stepped by keyboard.

Open 09:00 to 17:30, in steps of 15 minutes.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/time-field.json

Usage

import { TimeField } from "@/components/ui/time-field"

<TimeField value={time} onValueChange={setTime} />
<TimeField hourCycle={24} granularity="second" />
<TimeField minuteStep={15} min="09:00" max="17:00" />

Keyboard

Digits. Type to fill the focused part. Once a part can take no more digits, focus moves to the next one.
Up and Down. Step the focused part. Minutes move by minuteStep, and every part wraps around.
A and P. Set AM or PM on a 12 hour clock.
Left and Right. Move between parts.
Backspace. Clear the part, or move back when it is already empty.

The value is always a 24 hour string, "HH:mm", or "HH:mm:ss" with granularity="second", whatever hourCycle shows. It is an empty string until every part is filled. Outside min or max the field shows as invalid. Pass name to send the value with a form.

Textarea Timeline

On This Page

Installation Usage Keyboard Value