TimeInput

modelValue is the selected time, carried as a real Date — the date part comes along but only the time is read — or a { start, end } object once range is set. Pass it to control the selection yourself; the trigger's text is formatted from it, so there's no separate string to keep in step.

defaultValue is the time the picker starts on while it still owns its own state — the top of the next hour, the start of a working day, whatever saves the reader a scroll.

placeholder is what the trigger reads before a time is chosen, defaulting to “Select a time”. Naming what the time is for — a start, an end, a reminder — is worth more here than restating the control.

disabled switches off the trigger so the picker can't open — for a time that's fixed by something else, or a form that's saving.

clearable adds a button that resets the selection to null. Add it wherever “no time” is a real answer — an optional reminder, an open-ended slot — and leave it off where a value is required.

variant picks between the ringed outline trigger on the page background and the filled, ringless soft one, which has its own section below.

icon is the glyph in the trigger, timer by default. Change it to distinguish two time fields sitting side by side, or to match an icon set you use for scheduling elsewhere.

format forces the twelve- or twenty-four-hour clock. Left unset it follows locale, which is usually what you want — set it only where the convention comes from the content rather than the reader, such as a log viewer that's always in 24h.

minuteStep is the gap between the minute options offered, five by default. Widen it to fifteen or thirty for something booked in slots — it shortens the list as much as it constrains the answer, which is the real benefit on a small screen.

range switches the picker to a start and an end instead of a single time, which also changes modelValue to a { start, end } object.

locale is the BCP 47 tag used to format the displayed time, and — when format is left unset — to decide between the twelve- and twenty-four-hour clock. Setting it alone is usually enough; format is the override for when it isn't.

content positions the picker popover relative to the field: side, align and sideOffset. Reach for it when the field sits low on the page, where the list would otherwise open past the fold.

open controls whether the picker popover is showing. Pass it to drive the list from your own state and bind it with v-model:open so the trigger still works; omit it and the component manages that itself.

defaultOpen starts the picker expanded on mount while leaving the open state uncontrolled — reasonable on a step whose only question is the time, disruptive anywhere the field is one of several.

A filled, tinted background with no ring.