TimePicker
Lets users select a specific time from a list or enter a custom value. Supports 12/24-hour formats, custom intervals, and optional time ranges.
Basic
24 Hour Format
Custom Options
Min / Max Range
Props
| Name | Default | Type |
|---|---|---|
value | "" | string Selected time (uncontrolled) |
modelValue | "" | string Selected time (v-model) |
interval | 15 | number Minute interval between options |
options | [] | { value: string; label?: string; }[] | undefined Custom time options |
placement | "bottom-start" as Placement | Placement Popover placement |
placeholder | "Select time" | string Placeholder text when no value is selected |
variant | "subtle" as Variant | Variant Visual style variant |
allowCustom | true | boolean Allow entering custom time values |
autoClose | true | boolean Close picker automatically after selection |
use12Hour | true | boolean Use 12-hour (AM/PM) format |
disabled | false | boolean Disable the time picker |
scrollMode | "center" as const | "start" | "center" | "nearest" Scroll behavior when opening the list |
minTime | "" | string Minimum selectable time |
maxTime | "" | string Maximum selectable time |
Slots
| Slot | Payload |
|---|---|
prefix | - Slot rendered before the input value. Useful for icons or indicators. |
suffix | { togglePopover: () => void; isOpen: boolean; } Slot rendered after the input value. Exposes popover controls. |
Emit Events
| Event | Payload |
|---|---|
update:modelValue | [value: string] |
change | [value: string] |
open | [] |
close | [] |
input-invalid | [input: string] |
invalid-change | [invalid: boolean] |