Getting started

Install

npm install semantic-duration-input

Vue 3.5 or newer is required.

Use it

<script setup lang="ts">
import { ref } from 'vue'
import { DurationInput } from 'semantic-duration-input'

const minutes = ref<number | null>(90)
</script>

<template>
  <DurationInput v-model="minutes" placeholder="e.g. 1h 30m" />
</template>

v-model: 90

v-model holds whole minutes, or null when the field is empty. To store seconds, milliseconds or ISO 8601 instead, see Value formats.

Add the styles

With Tailwind v4, import the Tailwind entry after Tailwind. It lets Tailwind generate the component's classes and adds the design tokens:

@import 'tailwindcss';
@import 'semantic-duration-input/tailwind.css';

Without Tailwind, import the prebuilt stylesheet. It contains only the utilities the component uses, with no preflight or reset, and is wrapped in cascade layers so your own CSS wins:

import 'semantic-duration-input/style.css'

You don't need either stylesheet if you render your own input with as or the renderless slot. See Styling for theming.

Register globally

import { createApp } from 'vue'
import { plugin as DurationInputPlugin } from 'semantic-duration-input'

createApp(App).use(DurationInputPlugin).mount('#app')

The plugin registers <DurationInput> and optionally takes app-wide defaults. In Nuxt, use the Nuxt module instead.

Entry points

Import	Contents
semantic-duration-input	The component, plugin, useDurationInput, the invalidProps presets, the theme, and everything from /core
semantic-duration-input/core	Parser, formatter, locales and durationSchema, without Vue or Tailwind (Headless usage)
semantic-duration-input/nuxt	The Nuxt module
semantic-duration-input/style.css	Prebuilt stylesheet
semantic-duration-input/tailwind.css	Entry for Tailwind v4 projects

For AI coding agents

The docs are available as Markdown: llms.txt lists the key facts and pages, and llms-full.txt contains every page. Append .md to a page's URL for its Markdown version. The npm package ships both files for its version in node_modules/semantic-duration-input/dist/.

To teach your agent the setup and the usual pitfalls, install the skill:

npx skills add nicoalbrecht/semantic-duration-input