Duration Input

Forms 1

About

Segmented duration field over days, hours, minutes and seconds. Digits auto-advance, arrows step, and the value stays a plain number of seconds.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Duration Input to your project and fits it to your theme.

Code

How Duration Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import {
  DurationInput,
  DurationInputContainer,
  DurationInputSegments,
  DurationInputClear,
} from "@/components/ui/duration-input";

export default function DurationInputDemo() {
  const [value, setValue] = React.useState<number | null>(3600 + 5 * 60);

  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <label className="text-sm font-medium">Session length</label>
      <DurationInput
        value={value}
        onValueChange={setValue}
        units={["h", "m", "s"]}
        max={86400}
      >
        <DurationInputContainer>
          <DurationInputSegments />
          <DurationInputClear />
        </DurationInputContainer>
      </DurationInput>
    </div>
  );
}