TimePicker

A scrollable time picker component with 24-hour format. Opens a popover with hour and minute columns, scrolls to the selected value automatically, and closes on outside click.

Basic Usage

Demo

Appointment Time

09:30

Selected: 09:30

<script setup>
import { ref } from 'vue'
import { PraxisTimePicker } from 'praxis-vue-ui'

const time = ref('09:30')
</script>

<template>
  <PraxisTimePicker
    v-model="time"
    label="Appointment Time"
  />
</template>

Disabled State

Disabled

Read-only Time

14:45

<PraxisTimePicker
  v-model="time"
  label="Read-only Time"
  :disabled="true"
/>

Without Label

No Label

09:30

<PraxisTimePicker v-model="time" placeholder="Select time" />

Props

Props

Prop	Type	Default	Description
modelValue	string | null	null	The selected time value in HH:mm format (24h). Use with v-model.
label	string	undefined	Text label displayed above the input field.
required	boolean	false	Marks the field as required. Shows a red asterisk next to the label.
disabled	boolean	false	Disables the picker, preventing user interaction.
placeholder	string	'00:00'	Placeholder shown when no value is selected.

Emits

Emits

Event	Payload	Description
update:modelValue	string | null	Emitted when the user selects a new hour or minute. Value is in HH:mm format.
change	string | null	Also emitted on every selection change. Useful when you cannot use v-model.

Accessibility

• The trigger element is keyboard-accessible via click.
• Closes automatically on outside click via @vueuse/core onClickOutside.
• Popover uses z-50 so it always renders above other content.