DurationInput

A duration field that accepts the three ways people actually write durations and emits seconds. multipleOf takes a duration too, so the message reads “must be a multiple of 15 minutes” rather than “must be a multiple of 900”. Segmented and preset layouts are available where a free-text field is the wrong shape.

Live demo

Constraints

Props

Shared props

With react-hook-form

import { useForm, Controller } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { durationSchema } from "@inputcn/duration/schema"
import { DurationInput } from "@/components/ui/duration-input"
import { z } from "zod"

// The companion schema validates the CANONICAL value, so the resolver and the
// field can never disagree about what "valid" means.
const schema = z.object({ timeout: durationSchema() })

export function Example() {
  const { control } = useForm({ resolver: zodResolver(schema) })

  return (
    <Controller
      name="timeout"
      control={control}
      render={({ field, fieldState }) => (
        <DurationInput
          label="Session timeout"
          {...field}
          aria-invalid={fieldState.invalid}
        />
      )}
    />
  )
}

With a Server Action

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

export default function Page() {
  return (
    <form action={save}>
      <DurationInput name="timeout" label="Session timeout" />
      <button>Save</button>
    </form>
  )
}

async function save(data: FormData) {
  "use server"
  // The hidden canonical input carries the real value, not the display text.
  const timeout = Number(data.get("timeout")) // 5400
}

Keyboard

Emits number, for example 5400. Keyboard operation is covered by automated tests; screen readers have not been verified yet.