Time Picker

TimePicker with motion: the list springs out of its trigger, one highlight glides over the times, the tick draws, and a new time rises into the trigger.

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-time-picker.json

Reminder

Every 30 minutes; type at the top for an exact time.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-time-picker.json

Adds components/dashral/motion/time-picker.tsx, the Time Picker it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:

$ pnpm dlx shadcn@latest add @dashral/motion-time-picker

Usage

The same as Time Picker, imported from components/dashral/motion/: swap the import and it moves.

example.tsx

1import { TimePicker } from "@/components/dashral/motion/time-picker"
2
3<TimePicker label="Start" value={start} onValueChange={setStart} min="08:00" max="18:00" step={15} />

Examples

Book a call

A day toggle that springs between days, a time list that glides, and Book that works before the confirmation pops in.

Book a call

Time

Opening hours

Every 15 minutes, 12-hour, two of them; arrow down the list and the highlight glides with the focus.

Opens

Closes

Compared with Default

Default

The list fades in; the highlight jumps from time to time; a new time replaces the old in the trigger.

Motion

The list springs out; one highlight glides over the times without a blink; the picked tick draws; a new time rises into the trigger.

How the two editions differ in general, and which to use where: Motion.

API reference

Every prop of Time Picker, and every attribute of the element it renders. The Motion edition adds no props of its own.

TimePicker

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`value / defaultValue`	`string` The time as "HH:MM", 24-hour ("14:30"), whatever the display.	—
`onValueChange`	`(time: string \| undefined) => void` Called when a time is picked or typed.	—
`step`	`number` Minutes between the times in the list.	`30`
`min / max`	`string` The earliest and latest times offered.	`"00:00" / "23:59"`
`hour12`	`boolean` 12-hour (2:30 PM) or 24-hour (14:30) display.	`the locale's`
`placeholder`	`string` Shown while nothing is picked (translated by default).	`"Pick a time"`
`locale`	`string` BCP 47 locale for the display.	—
`disabled / required / id`	As on any field.	—
`classNames`	`{ root, label, description, error, trigger, content, option }` Classes for each part.	—
`className`	`string` The trigger's classes.	—

Motion

The list springs out of its trigger (--duration-standard, a hint of overshoot) with the picked time in view, and leaves quickly.
The highlight is one pill gliding from time to time after the pointer or the arrow keys, without going out between them; the arrow keys scroll smoothly.
The picked time's tick draws itself; a new time rises into the trigger as the old one leaves upward.
With reduced motion it only fades, and the list scrolls at once.