Duration Field

Accessible, unstyled segmented duration input that reads and writes ISO 8601 durations.

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 { DurationField } from "@vizejs/ui/duration-field";

Or copy the source into your project with vize lib pull duration-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

<!-- Duration field editing hours and minutes and submitting an ISO 8601 duration. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { DurationField, formatIsoDuration } from "@vizejs/ui/duration-field";
import type { DurationValue } from "@vizejs/ui/duration-field";

const estimate = ref<DurationValue | null>({ hours: 1, minutes: 30 });
const labelId = useId();
</script>

<template>
  <div>
    <span :id="labelId">Estimated effort</span>
    <DurationField
      v-model="estimate"
      name="estimate"
      locale="en-US"
      :fields="['hours', 'minutes']"
      unit-display="short"
      :aria-labelledby="labelId"
    />
    <output>{{ estimate ? formatIsoDuration(estimate) : "Not set" }}</output>
  </div>
</template>

API

DurationField

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

Props

Events

Slots

Behavior

Normative state x input -> outcome table for duration-field.vue (@vizejs/ui/duration-field): segmented spinbuttons for whole-unit durations that read and write typed ISO 8601 durations (IsoDuration = `P${string}`). Every row is proven by the named test.