Time Picker

Time selection. Free, MIT · Forms and input › Date and time

Installation

npx valyro-cli@latest add time-picker

npx shadcn@latest add https://valyro.xyz/r/time-picker.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { TimePicker } from 'valyro-ui';

Props

Prop	Type	Default
`value`	`string \| null`		24-hour "HH:mm" string.
`defaultValue`	`string \| null`	`null`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string \| null) => void`		Called with the new `value` when it changes.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`hourCycle`	`12 \| 24`		Display and pick in 12-hour (AM/PM) or 24-hour format; defaults to the locale's clock. The value is always 24-hour.
`minuteStep`	`number`	`5`	Minutes between options in the minute column.
`placeholder`	`string`	`'Pick a time'`	Text shown in the trigger while no time is picked.
`locale`	`string`		Locale for digits and AM/PM names. Defaults to the `ThemeProvider` locale, then the browser's.
`size`	`'sm' \| 'md' \| 'lg'`		Trigger height and text size.
`invalid`	`boolean`		Danger border on the trigger. Also shown after a submit attempt while a required time is missing.
`name`	`string`		Submits the time with the surrounding form as 24-hour `HH:mm` (empty when unset).
`required`	`boolean`		Blocks native form submission while no time is picked.
`inline`	`boolean`	`false`	Keeps the columns open in the page flow under the field instead of in a popover (a settings page, a showcase). `open`, `defaultOpen` and `onOpenChange` do not apply, and the columns never take focus by themselves: the field moves focus into them on click or ArrowDown.
`labels`	`Partial<TimePickerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Date Picker — Date selection
Date Range Picker — Date range selection
Date Field — Date typed segment by segment in the locale order
Time Field — Time typed segment by segment, 24-hour or AM/PM
Wheel Picker — iOS-style picker wheel: momentum, 3D cylinder, date and time presets
Date Of Birth Input — Date of birth as three selects in locale order
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list

Previous: Date Field · Next: Time Field · All Forms and input