Time Field

Accessible, unstyled segmented time input with 12/24-hour clocks and hour/minute/second granularity.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { TimeField } from "@vizejs/ui/time-field";

Or copy the source into your project with vize lib pull time-field (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Controlled segmented time field with a fixed locale, business-hour bounds, and ISO output. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { createPlainTime, formatIsoTime, TimeField } from "@vizejs/ui/time-field";
import type { PlainTime } from "@vizejs/ui/time-field";

const start = ref<PlainTime | null>(createPlainTime(9, 30));
const labelId = useId();
</script>

<template>
  <div>
    <span :id="labelId">Meeting start</span>
    <TimeField
      v-model="start"
      name="start"
      locale="en-US"
      :min="createPlainTime(8)"
      :max="createPlainTime(18)"
      :aria-labelledby="labelId"
    />
    <output>{{ start ? formatIsoTime(start) : "No time selected" }}</output>
  </div>
</template>

API

TimeField

Source: src/families/date-time/time-field/time-field.vue

Props

Events

Slots

Behavior

Normative state x input -> outcome table for time-field.vue (@vizejs/ui/time-field). TimeField shares the DateField segment engine, so DateField rows F2–F8, F10–F12, and F15 (native required validation) apply to hour, minute, second, and day-period segments. Every row below is proven by the named test.

Root data adds data-hour-cycle (12/24) and data-granularity to the DateField hooks, with data-vize-ui="time-field", time-field-segment, and time-field-literal. The hidden input submits HH:MM, or HH:MM:SS for second granularity.