ITimeField ​

A time entered one segment at a time — hour, minute, optionally seconds — each its own arrow-key control.

<script setup lang="ts">
const start = ref('09:00')
</script>

<template>
  <ITimeField v-model="start" aria-label="Start time" />
</template>

The model is a string ​

HH:mm, or HH:mm:ss when there are seconds — on a 24-hour clock, zero-padded, and carrying no date or time zone. Padded that way it sorts and compares as a plain string.

const start = ref('09:00') //     not new Date(...)
const exact = ref('09:30:15') //  with granularity="second"

A malformed value is treated as no selection rather than an error, so a stale draft or a URL parameter cannot break the render.

Granularity ​

<ITimeField v-model="start" aria-label="To the minute" />
<ITimeField v-model="exact" granularity="second" aria-label="To the second" />

Hour cycle ​

Left unset it follows the locale. The model stays 24-hour either way.

<ITimeField v-model="value" :hour-cycle="12" aria-label="12-hour" />
<ITimeField v-model="value" :hour-cycle="24" aria-label="24-hour" />

Bounds and steps ​

min-value and max-value take the same HH:mm form. step sets how far each arrow key press moves a segment.

<ITimeField
  v-model="slot"
  min-value="09:00"
  max-value="17:00"
  :step="{ minute: 15 }"
  aria-label="Appointment"
/>

Sizes and states ​

<ITimeField v-model="value" size="sm" aria-label="Small" />
<ITimeField v-model="value" size="md" aria-label="Medium" />
<ITimeField v-model="value" size="lg" aria-label="Large" />

<ITimeField v-model="value" invalid aria-label="Invalid" />
<ITimeField v-model="value" disabled aria-label="Disabled" />

Inside an IFormField the id, the invalid state and the error's aria-describedby are all inherited.

Props ​

Helpers ​

toTime() and toIsoTime() are exported for converting at your own boundaries — see the date helpers.

Accessibility ​

Each segment is a spinbutton: arrow keys change it, left and right move between segments, and typing digits fills it and advances. A screen reader announces each part by name rather than reading one opaque string.

The separator between segments is plain text rather than another stop on the way through the field, and the digits are tabular so the segments do not jitter while they change.