Time Picker

A time picked from a list of steps or typed exactly, shown the locale's way, stored as HH:MM.

$ pnpm dlx shadcn@latest add https://dashral.com/r/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/time-picker.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

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

Usage

example.tsx

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

Examples

Office hours, every 15 minutes

min, max and step bound the list; hour12 shows 2:30 PM.

Start

Office hours, 8 AM to 6 PM.

Book a call

A DatePicker and a TimePicker side by side, the summary under them.

Book a call

Day

Time

Pick a day and a time.

API reference

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.	—

Keyboard

Keys	Action
`Enter`or`Space`	Open
`↓`or`↑`	Move through the times
`Page Down`or`Page Up`	Move six at a time
`Home`or`End`	The first or last time
`Enter`	Pick the time (or the one typed at the top)
`Escape`	Close

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
The times are a listbox of options, the picked one aria-selected; opening it puts the focus on the picked time.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.