1Sponsor

Time Picker

Time picker with hour/minute/second spinners

Terminal

Installation

pnpm dlx shadcn@latest add https://termcn.dev/r/time-picker.json

Usage

import { TimePicker } from "@/components/ui/time-picker";
<TimePicker
  label="Meeting time"
  value={{ hours: 14, minutes: 30 }}
  onChange={(time) => console.log("Changed:", time)}
  onSubmit={(time) => console.log("Submitted:", time)}
/>

API Reference

TimePicker

PropTypeDefault
value{ hours: number; minutes: number }undefined
onChange(time: { hours: number; minutes: number }) => voidundefined
onSubmit(time: { hours: number; minutes: number }) => voidundefined
labelstringundefined
format12 | 2424
autoFocusbooleanfalse
idstringundefined