Time Picker

A clock-style input for selecting hours and minutes.

Install

npx shadcn add @clearly/time-picker

Preview

Live Time Picker component — see usage below.

Usage

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

<TimePicker />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Props

PropTypeDefaultDescription
value{ h: number; m: number; ampm: "AM" | "PM" }Controlled time value.
onChange(value: { h: number; m: number; ampm: "AM" | "PM" }) => voidChange callback.