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 ​

Value: —

24 Hour Format ​

Value: 13:30

Custom Options ​

Value: 09:00

Min / Max Range ​

Value:

API Reference ​

Show types
typescript
// Shared type definitions for TimePicker component

export type Placement =
  | 'bottom-start'
  | 'top-start'
  | 'top-end'
  | 'bottom-end'
  | 'right-start'
  | 'right-end'
  | 'left-start'
  | 'left-end'

// Variant aligns with TextInput variants (ghost not supported there)
export type Variant = 'outline' | 'subtle'

export interface Option {
  value: string
  label: string
}

export interface ParsedTimeValid {
  valid: true
  hh24: string
  mm: string
  ss?: string
  total: number
}
export interface ParsedTimeInvalid {
  valid: false
}
export type ParsedTime = ParsedTimeValid | ParsedTimeInvalid

export interface TimePickerProps {
  /** Selected time (uncontrolled) */
  value?: string

  /** Selected time (v-model) */
  modelValue?: string

  /** Minute interval between options */
  interval?: number

  /** Custom time options */
  options?: Array<{ value: string; label?: string }>

  /** Popover placement */
  placement?: Placement

  /** Placeholder text when no value is selected */
  placeholder?: string

  /** Visual style variant */
  variant?: Variant

  /** Allow entering custom time values */
  allowCustom?: boolean

  /** Close picker automatically after selection */
  autoClose?: boolean

  /** Use 12-hour (AM/PM) format */
  use12Hour?: boolean

  /** Disable the time picker */
  disabled?: boolean

  /** Scroll behavior when opening the list */
  scrollMode?: 'center' | 'start' | 'nearest'

  /** Minimum selectable time */
  minTime?: string

  /** Maximum selectable time */
  maxTime?: string
}

export type TimePickerEmits = {
  /** Emitted when v-model value changes */
  (e: 'update:modelValue', value: string): void

  /** Emitted when the time value changes */
  (e: 'change', value: string): void

  /** Emitted when user input is invalid */
  (e: 'input-invalid', input: string): void

  /** Emitted when invalid state changes */
  (e: 'invalid-change', invalid: boolean): void

  /** Emitted when the picker is opened */
  (e: 'open'): void

  /** Emitted when the picker is closed */
  (e: 'close'): void
}
Prop 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

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.

Event Payload
update:modelValue
[value: string]

Fired when the model value changes.

change
[value: string]

Fired after the value is committed.

open
[]

Fired when the component opens.

close
[]

Fired when the component closes.

input-invalid
[input: string]
invalid-change
[invalid: boolean]
TextareaToast