Input Duration

Overview

InputDuration composes Input Group only (no calendar). The visible value is split into focusable segments—one per field in your format. The API uses total seconds (number | null).

A hidden <input> mirrors the seconds string for native forms. Commit occurs on segment blur or Enter; onValueChange and normalization run then.

Within each segment, digits accumulate right-to-left. Segments are uncapped until commit. On commit, values normalize with overflow carried into larger units that exist in format (60/24 rules for time; approximate 30-day months and 365-day years for y / M / d—see lib/duration-format.ts). If a larger unit is absent from the pattern, the smaller segment does not carry upward.

Editable fields use y, M, d, H, m, s (runs set minimum width); other characters are static labels; use single quotes for literals. Default: HH'h' mm'm' ss's'.

Key bindings

Custom props

Install

Configure your registry in components.json:

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

Then run:

npx shadcn@latest add @uxio/input-duration

This pulls input-group as a registry dependency. The correct variant (Base UI or Radix) follows your components.json style. The installed bundle includes lib/datetime-format and lib/duration-format.

Usage

Controlled duration (seconds)

import * as React from "react"

import { InputDuration } from "@/components/ui/input-duration"

export function DurationField() {
  const [value, setValue] = React.useState<number | null>(null)

  return <InputDuration value={value} onValueChange={setValue} />
}

Custom format

import * as React from "react"

import { InputDuration } from "@/components/ui/input-duration"

export function DurationFormatField() {
  const [value, setValue] = React.useState<number | null>(null)

  return (
    <InputDuration
      format="dd'd' HH'h' mm'm'"
      value={value}
      onValueChange={setValue}
    />
  )
}

Colon-separated time

import * as React from "react"

import { InputDuration } from "@/components/ui/input-duration"

export function ColonDurationField() {
  const [value, setValue] = React.useState<number | null>(null)

  return (
    <InputDuration format="HH:mm:ss" value={value} onValueChange={setValue} />
  )
}

Examples

Default format (HH'h' mm'm' ss's')

Days, hours, and minutes

Colon-separated (HH:mm:ss)

Years, months, days, hours, and minutes

Size variants

Use size so the field aligns with InputGroup and Input dimensions. Segment padding and text scale with the group.