Duration Picker React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import DurationPicker from @/components/ui/duration-picker.

"use client"

import { useState } from "react"
import DurationPicker, { type DurationValue } from "@/components/ui/duration-picker"

export function Demo() {
  const [duration, setDuration] = useState<DurationValue>({ hours: 1, minutes: 30 })

  return (
    <DurationPicker
      size="md"
      value={duration}
      onChange={setDuration}
      onConfirm={(d) => console.log("saved", d)}
    />
  )
}

// zero config, fully uncontrolled
// <DurationPicker onConfirm={(d) => console.log("saved", d)} />

Props

• sizedefault "md"
  "sm" | "md" | "lg"

  Overall scale. The pill is 40px (sm, 44px on touch screens), 48px (md) or 56px (lg) tall, and the corner radius, the open field width, the icon and the text size scale with it.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Outer corner radius of the squircle: square, tighter, the original 10 / 12 / 14px per size, rounder, or a pill. The inner corners open up from it while editing.

• surfaceColordefault "auto"
  string

  Fill of the three segments, any CSS color. Auto is a soft gray that follows the light and dark theme. A translucent tint keeps the digits readable in both themes.

• labelColordefault "auto"
  string

  Color of the Hr. and Min. labels, any CSS color. Auto is a muted gray tuned per theme.

• valueColordefault "auto"
  string

  Color of the typed digits, any CSS color. Auto is black on light pages and white on dark ones.

• accentColordefault "#868593"
  string

  Color of the pen icon and the tick it morphs into, any CSS color.

• gapdefault 8
  number

  Space in pixels the three segments spread apart to while editing.

• maxHoursdefault 24
  number

  Ceiling for the hours field. Typing past it clamps to this value and shakes the input.

• maxMinutesdefault 60
  number

  Ceiling for the minutes field. Same clamp and shake behavior as maxHours.

• defaultEditingdefault false
  boolean

  Renders the picker already open in edit mode, with the tick showing.

• hoursLabeldefault "Hr."
  string

  Text rendered after the hours field. Swap it for a translation or a terser h.

• minutesLabeldefault "Min."
  string

  Text rendered after the minutes field.

• editLabeldefault "Edit duration"
  string

  Accessible name of the pen button while the picker is closed.

• saveLabeldefault "Save duration"
  string

  Accessible name of the tick button while editing.

• disableddefault false
  boolean

  Dims the control to half opacity and blocks entering edit mode.

• value
  { hours: number; minutes: number }

  Controlled value. Pair it with onChange and the picker mirrors whatever you pass in. Leave it out to let the component manage its own state.

• defaultValue
  { hours: number; minutes: number }

  Starting value for uncontrolled usage. Ignored when value is provided. Left out, both fields start empty and show a 0 placeholder.

• onChange
  (value: DurationValue) => void

  Fires on every keystroke with the current clamped value. Listen here to react while the user types.

• onConfirm
  (value: DurationValue) => void

  Fires once with the final clamped value when the tick is clicked. This is usually the one you want for saving.

• onEditingChange
  (editing: boolean) => void

  Fires when the picker enters or leaves edit mode, handy for blocking navigation or dimming surrounding UI while it is open.

• className
  string

  Extra classes merged onto the root; other div props are spread onto it too. Every inner part carries a data-slot (duration-picker, duration-picker-segment, duration-picker-input, duration-picker-toggle) plus data-editing, data-disabled and data-size states, and the colors live in the --duration-picker-surface, --duration-picker-label and --duration-picker-value variables, so you can restyle from CSS alone.

Parts

FAQ

More React input components