Time Picker
Live preview and documentation for the Time Picker component.
Preview
componentPreview.loading
About
Time selector: a text field (same style as KasyTextField) that, when tapped, opens a panel with wheels (hour / minute / AM-PM) to pick a time. Adaptive: popover on desktop, bottom sheet on phone/tablet, just like KasyDatePicker.
presentation:popover,dialog, orbottomSheet; if omitted, uses popover on large screens and bottom sheet elsewhere.value/onChanged: the selected time (TimeOfDay) and change callback.use24HourFormat: forces 24h or 12h; if omitted, follows the device setting.minuteInterval: step size of the minute wheel (1, 5, 10, 15, 30...), with automatic snapping.formatTime: custom formatter for the text shown in the field.label,placeholder,description,errorText,isInvalid,showRequiredIndicator: the same state fields as aKasyTextField.variant,focusBorder,showSuffix: control the appearance of the trigger field (clock icon by default).showBarrier: in popover mode, shows/hides the darkened scrim behind the panel.
There's also the imperative function showKasyTimePicker(context: ..., initialTime: ...), which opens the same panel without needing a trigger field (dialog on desktop, bottom sheet on mobile) and returns the chosen TimeOfDay.
Last updated on 08/23/2026