Time picker

When to use #

Use it for

Meeting and reminder times.
Forms where typing a time is error-prone.

Skip it when

You need a duration, not a clock time; use number fields.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/time-picker.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from TimePicker and formatTime.

example.tsx

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

export function MeetingTime() {
  const [time, setTime] = useState("09:30");
  return (
    <div className="w-full max-w-xs">
      <TimePicker label="Meeting time" value={time} onValueChange={setTime} minuteStep={30} />
    </div>
  );
}

API reference #

TimePicker

component

PropTypeDefault

label *string—

valuestring—

defaultValuestring"09:00"

onValueChange((value: string) => void)—

minuteStep1 | 5 | 10 | 15 | 3015

format"12h" | "24h""12h"

namestring—

disabledboolean—

classNamestring—

formatTime

component

No props of its own; it accepts the native props of its root element.

It exposes listbox and option semantics, with aria-selected, aria-haspopup, aria-expanded, aria-controls and aria-label kept in step with state.

KeyBehaviour

EscapeCloses or cancels, then returns focus to where it came from.

↓Moves to the next item or value.

↑Moves to the previous item or value.

EnterActivates the focused control.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.