TimePicker

An input that shows a scrollable dropdown of times in configurable intervals. Supports typing a custom time value. Values are in 24-hour HH:MM format.

ExamplesCodeUsageChangelog

Basic usage

Start time

Value: none

Tailwind v4

<script setup>
import { ref } from 'vue'
const time = ref('')
</script>

<template>
  <TimePicker v-model="time" label="Start time" />
</template>

Pre-selected value

Meeting time

Tailwind v4

<TimePicker v-model="time" label="Meeting time" />
<!-- time = '09:30' displays as "9:30 AM" -->

Custom interval (15 minutes)

Time (15 min intervals)

Tailwind v4

<TimePicker v-model="time" label="Time (15 min intervals)" :interval="15" />

Disabled

Shift start

Tailwind v4

<TimePicker model-value="14:00" label="Shift start" disabled />

Props

Prop	Type	Default	Description
modelValue	string	—	Selected time in 24-hour HH:MM format
label	string	—	Label rendered above the input
placeholder	string	'Select a time'	Placeholder text when no time is selected
disabled	boolean	false	Disables interaction
interval	number	30	Minutes between each generated time option

Emits

Event	Payload	Description
update:modelValue	string	24-hour HH:MM string of the selected time