Time Picker

Installation

npx shadcn@latest add @blank/time-picker

Usage

import { TimePicker } from "@/components/ui/time-picker"

<TimePicker defaultValue="09:30" onValueChange={setTime} />

Each segment is a spin button. Type digits and focus moves on once the number is complete; the arrow keys step and wrap around; Home and End jump to the ends; Backspace clears a segment and, on an empty one, steps back. : or Space skips to the next segment.

The value is a 24-hour HH:mm string — HH:mm:ss with seconds — the same shape a native <input type="time"> gives, and "" until every segment is filled. hourCycle={12} only changes what is shown.

Put id on TimePicker to point a FieldLabel at its first segment.

Examples

12-hour with seconds

Disabled and invalid

API Reference

TimePicker

TimePickerSegment

Render segments yourself — to reorder them or add an icon — by passing TimePickerSegment and TimePickerSeparator as children.