Time picker

Updated November 2, 2026

TimePicker is a select-style field that opens scrolling hour, minute and AM/PM columns in the dithered popup. Arrow keys move within a column and Left and Right between them; it shows the time in the reader's locale and submits "HH:mm". Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Starts

Standup

Office hours, every 15 minutes.

Reminder

Pick a reminder time

Locked

import "@/components/dithercharts/controls.css"
import { TimePicker } from "@/components/dithercharts/time-picker"

<TimePicker
  label="Standup"
  name="standup"
  minuteStep={15}
  min="08:00"
  max="18:00"
  onValueChange={(time) => setStandup(time)} // "HH:mm"
/>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add time-picker

Props

It renders a native element, so every other attribute that element takes passes through.

TimePicker props
Prop	Type	Default	Description
labelrequired	Type ReactNode	Default –	The caption above the field, and its accessible name.
placeholder	Type string	Default `"Pick a time"`	Shown while nothing is chosen.
name	Type string	Default –	The form field name for the time's hidden input.
disabled	Type boolean	Default `false`
collisionPadding	Type { top?: number; bottom?: number }	Default 8 each	Space in px the popup keeps clear at the window's top and bottom, e.g. a sticky header's height. It opens on the side with more room.
className	Type string	Default –
value	Type string	Default –	The chosen time as 24-hour "HH:mm", for a controlled picker; pair it with `onValueChange`.
defaultValue	Type string	Default –	The time chosen at first, for an uncontrolled picker.
onValueChange	Type (value: string) => void	Default –	Called with the time as "HH:mm" each time a column changes it.
min	Type string	Default –	The earliest time that can be chosen, as "HH:mm".
max	Type string	Default –	The latest time that can be chosen, as "HH:mm".
minuteStep	Type number	Default `5`	The gap between the minutes offered.
hourCycle	Type 12 \| 24	Default the locale's	12 adds an AM/PM column; 24 doesn't.
locale	Type string	Default the browser's	The BCP 47 locale for the field's time and the day periods.
hint	Type ReactNode	Default –	Help text under the field, read after its label.
error	Type ReactNode	Default –	An error under the field; it also marks the field invalid.