Time Picker

ProNew

A native time input with a clock icon and optional preset buttons for common times.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/time-picker

Prop	Type	Default	Description
`value`	`string`	-	Controlled time in `HH:mm` format.
`defaultValue`	`string`	`""`	Initial time when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called with the new `HH:mm` time.
`label`	`string`	`"Time"`	Accessible name of the input.
`presets`	`TimePreset[]`	`[]`	Buttons that set a common time.

Other <input> props (such as min, max, step, name) are passed to the time input.

TimePreset is { label: string; value: string }.

The time format (12 or 24 hour) follows the browser and operating system locale.
The active preset has aria-pressed="true".