TimePicker

import { TimePicker } from '@lunisolar-picker/react/pickers';

<TimePicker aria-label="Start time" value={time} onValueChange={(next) => setTime(next)} minuteStep={15} />;

The field always shows 24-hour time, whatever the device locale. Type 930 for 09:30. Arrow keys on the minute segment move by minuteStep, and the button next to the field opens a list of times at that step. Typed minutes do not have to match the step.

Prop	Type	Default	Description
value, defaultValue	string | null	null	Canonical HH:mm.
onValueChange	(value: TimeString | null, details) => void		Called when the user changes the time.
onPick	(value: TimeString) => void		Called after every accepted pick in the list.
minuteStep	number	30	Step for the list and the minute arrow keys. Must divide 60.
isEndOfDayAllowed	boolean	false	Accept 24:00 as the end of a day. It is never turned into the next day.
presentation	'auto' | 'popover' | 'sheet'	'auto'	As on DatePicker.
open, defaultOpen, onOpenChange	boolean		Control the list.
isClearable, renderTrigger, placeholder, ref, onBlur, onInvalidValue			As on DatePicker.
name, form, required, disabled, readOnly, invalid			Same as native inputs.

A well-formed 24:00 that is not allowed stays in the field and marks it invalid; the reported value is null.