Input Elapsed Duration
A controlled elapsed-time field with unbounded hours and explicit commit.
Render job duration · 3723 seconds elapsed
Input Elapsed Duration is a free forms-inputs component for React media, render, and processing tools. It edits elapsed hours, minutes, and seconds while storing one nonnegative total-seconds value.
The field accepts overflow in minutes or seconds and carries it into higher units on commit. It is for elapsed duration, not clock time, calendar intervals, or timezone conversion.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/input-elapsed-durationUsage
"use client";
import { useState } from "react";
import { InputElapsedDuration } from "@/components/input-elapsed-duration";
export function RenderDurationField() {
const [elapsedSeconds, setElapsedSeconds] = useState(3723);
return <InputElapsedDuration value={elapsedSeconds} onValueChange={setElapsedSeconds} label="Elapsed render time" minSeconds={0} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | Controlled nonnegative total elapsed seconds; can represent more than 24 hours. |
| onValueChange | (totalSeconds: number) => void | required | Receives the total seconds after an explicit valid commit. |
| label | string | required | Visible legend for the duration fields. |
| minSeconds | number | 0 | Inclusive minimum total seconds checked on commit. |
| maxSeconds | number | Number.MAX_SAFE_INTEGER | Inclusive maximum total seconds checked on commit. |
| className | string | undefined | Additional classes merged onto the fieldset. |
Customisation
The caller owns persistence, units beyond seconds, and any elapsed-time formatting outside the editor. Semantic field tokens keep the controls legible in both themes.
.render-duration { max-inline-size: 38rem; }Frequently asked questions
- Are hours limited to 23?
- No. Hours are elapsed units, so values such as 27 hours remain a single duration.
- Does this field convert a time of day or date?
- No. It edits a total number of elapsed seconds and has no date or timezone behavior.