TimePicker

A time of day, chosen from two columns.

Import it from rei-kit: import { TimePicker } from 'rei-kit'

Open TimePicker in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { TimePicker } from 'rei-kit'

const at = ref<string | undefined>('09:30')
</script>

<template>
  <TimePicker
    v-model="at"
    label="Reminder"
    hours-label="Hour"
    minutes-label="Minute"
    placeholder="Choose a time"
    :step="15"
    min="07:00"
    max="22:00"
    hint="Stored as HH:mm, shown in your own clock."
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`label`	`string`	yes
`hoursLabel`	`string`	yes	The hour column's accessible name, e.g. "Hour".
`minutesLabel`	`string`	yes	The minute column's accessible name.
`placeholder`	`string`	''	What the field shows while nothing is chosen.
`step`	`number`	15	Minutes between the choices in the second column.
`min`	`string`	undefined	The earliest time that can be chosen, as `HH:mm`.
`max`	`string`	undefined
`error`	`string`	''
`hint`	`string`	''
`size`	`'sm' \| 'md'`	'md'
`labelHidden`	`boolean`	false
`disabled`	`boolean`	false
`fieldId`	`string`	undefined	Ties the generated id to a name you choose, so `ErrorSummary` can link to this field. Its links point at nothing without it, and the kit's own `FormField` has taken one since 2.22.0 while the fields built on it did not — which left building a form out of these and summarising its errors impossible without hand-writing the control.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub